The Zeitgeist - And How-To
Posted on April 15, 2007
3 Comments
I found a nifty new plugin today called WP-Zeitgeist. While the results aren't nearly as structured as Google's Zeitgeist, I think it's pretty cool.
Basically, this plugin gives a way to visualize the search phrases folks have used to end up here at the blog. The more often a search term or phrase has been used, the larger it'll be in the cloud.
See it in action at the Zeitgeist page.
Here's how I did it.
To start, I created a new Page template (read more about WordPress Pages). To do that, I copied my theme's existing page.php to zeit.php. Opened up Zeit and edited the comment at top to make it easier to spot when chosing a template:
-
<?php
-
/*
-
Template Name: Zeitgeist - 2 col
-
*/
-
?>
Next, I needed to add the "tag" that actually displays the zeitgeist. I glanced over the code in my page template and located the code for The Loop. I want to display the tags right below that. Thus "the loop" code displays the Page content, created via the WP page editor.
Using the Default theme's page.php as an example, the loop looks like this:
-
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
-
<div class="post" id="post-<?php the_ID(); ?>">
-
<h2><?php the_title(); ?></h2>
-
<div class="entry">
-
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
-
-
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
-
-
</div>
-
</div>
-
<?php endwhile; endif; ?>
Right below that last line, I added:
-
<span class="clouds">
-
<?php zeitgeist_display(1, 100, '', ''); ?>
-
</span>
the zeitgeist_display() function is where all the magic happens. I wanted to style the links a bit differently than my theme's default, so I wrapped the whole thing in a span to make it easy on myself.
The last step is adding some CSS to my theme's stylesheet. Here's what I currently have, although I may be tweaking the relative text sizes a bit over time:
-
/* WP-ZeitGeist plugin */
-
.cloud_0 {font-size: 60%;}
-
.cloud_1 {font-size: 65%;}
-
.cloud_2 {font-size: 70%;}
-
.cloud_3 {font-size: 75%;}
-
.cloud_4 {font-size: 80%;}
-
.cloud_5 {font-size: 85%;}
-
.cloud_6 {font-size: 90%;}
-
.cloud_7 {font-size: 95%;}
-
.cloud_8 {font-size: 100%;}
-
.cloud_9 {font-size: 105%;}
-
.cloud_10 {font-size: 110%;}
-
-
.clouds a:hover {color: #FF9C00;}
-
.clouds a {text-decoration:none;}
The bottom two lines are for that clouds class that the span tag is using. They just handle the links look. The cloud_x classes are used for the relative sizes in the zeitgeist cloud. I modified a bit from whoo's sample, just playing around with it a bit.
And there you have it.
Tags: google, plugin, search, WordPress, zeitgeist
Possibly Related Posts
Comments
3 Responses to “The Zeitgeist - And How-To”
Leave a Reply
This is cool too. I just subscribed to your feed. cool site.
Hey AgentSully, glad you found some stuff you liked. Welcome aboard!