Theme Lab » WordPress Tutorials

How To Create a Searchable Tweet Archive with WordPress

Leland — Tue, 15 Jun 2010 16:39:13 +0000

Let’s face it, the Twitter search sucks and you’ll be lucky to find tweets over a week old with it even though they still exist.

Twitter has been plagued with service issues and the fail whale (which someone coded in pure CSS) is a regular occurrence once again.

I came across a tutorial the other day on how to create a browsable, searchable archive of tweets which you can use to host your own tweets. And the best part is? It’s powered by WordPress.

In this article, I’ll go over my experience with how I set up my own @themelab tweet archive powered by WordPress, including:

Backing up my tweets with a third-party service
Importing those older tweets into WordPress
Setting it up so new tweets get imported automatically
Installing the theme to display them nicely

Backup Your Tweets

The first step is to backup your tweets. There are a few third-party services to do this, I personally used TweetBackup with good success. It’s important to remember not to expect to backup all of your tweets.

I was only able to grab 910 out of over 6000+ at the time. Even using other Twitter backup services, the same number of tweets were backed up which suggests it’s a limitation by Twitter itself. It’s best to backup as soon as possible, especially if you’re a frequent tweeter.

I had some issues logging into TweetBackup at first but eventually it worked. If you get frustrated you could also try BackupMyTweets.com. It’s worth noting that BackupMyTweets makes you “pay” by posting a tweet promoting their service. If that’s too painful for you (it’s pretty painless, I promise) you also have the option of paying $9.95 per year.

After the backup process is complete, look for the “export” option and save as RSS. You should have an XML file with all the tweets that were salvageable. The next step is to import those into WordPress.

Import Tweets to WordPress

First of all, it’s suggested you create a new WordPress installation for your tweet archive so you don’t have to worry about separating it from the rest of your normal WordPress content. I personally used a subdomain so it wouldn’t interfere with any permalinks from the blog.

The next step is to browse to Tools→Import and select the “RSS” option.

On the next screen, upload the XML file you just grabbed from whatever tweet backer-upper service you just used. Your tweets should now be loaded in your WordPress site.

Obvious Tip: Assuming this is a new WordPress installation, you’ll probably want to delete the “Hello World!” post.
Not So Obvious Tip: Since tweets from the backup file are formatted like “username: tweet message is here” (i.e. “themelab: My actual tweet is displayed here”) you might want to use the Search Regex plugin to delete this. Just replace “username: ” in post content and remember to include the space after.

Automatically Grab New Tweets

Now that you have all your old tweets stored, you’ll want to make sure any new tweets are automatically grabbed and stored as WordPress posts. For this, we’ll be using the Twitter Tools plugin by Alex King.

After installing and verifying your Twitter account details, make sure the following two options are set on the plugin’s settings page (Settings→Twitter Tools):

Enable option to create a tweet when you post in your blog? NO
Create a blog post from each of your tweets? Yes

I’m not sure what would happen if you set “Yes” to both, but I don’t intend on finding out for myself for fear of annoying the crap out of my followers. Douglas Bownman, the author of the original guide, described it as an “endless loop of repeating tweets and blog posts.”

All of the other options, like whether to exclude @replies, are either not necessary or up to your personal preferences.

Note: After installing Twitter Tools I noticed a few duplicate tweets (in conjunction with my backed-up tweets) that I went back and manually deleted.

Tweet Archive Theme

Douglas Bownman of stopdesign was also nice enough to release the tweet archive theme he used for free.

The theme works out of the box but it requires some *gasp* direct theme editing to personalize the hard-coded area (that I’ve highlighted in red) with your own account information. Just open up your header.php and scroll to the bottom.

Make sure you have the following handy to copy and paste into the “user” div area in the header file:

A 48×48 image URL of your Twitter avatar (or whatever you want really)
Your name (I used “Theme Lab” for example)
Your Twitter username (@themelab)
Location and website URL (themelab.com)

Or you could just remove it completely, it’s up to you. There is also a nice display of archive links which don’t seem as dreaded on an archive-oriented site like this.

If you’re making your own custom theme make sure to display the post content and have the full date and time as the permalink to the post. I’m not sure comments are really necessary on a theme like this, but again, it’s your site now, so you can do whatever you want with it.

Update: I just noticed the search form had the /tweets/ URL hardcoded into the form action, which obviously won’t work if you’ve installed anywhere besides a /tweets/ subdirectory. To correct this, replace the following code in searchform.php:

And replace with:

Conclusion

I really wish I set this up a long time ago. I’m a Twitter addict and have over 6000 tweets (follow me at @themelab) and unfortunately I wasn’t able to back all of them up, only about 15% of them.

Once again I’d like to thank Douglas Bowman of stopdesign for the guide on settings this up as well as the theme. It was actually a lot easier than I thought and it’s great that it can be powered by my favorite CMS, WordPress, with the help of some extra plugins.

Guide to Styling the WP-PageNavi WordPress Plugin

Leland — Tue, 04 May 2010 12:07:42 +0000

If you’re not familiar with the WP-PageNavi WordPress plugin, it allows you to replace normal previous/next navigation with a more advanced, numbered paging navigation. This is a feature I’ve included on a number themes I’ve developed, including RS16, Blogwave, RS17, and Bright Spot.

In this tutorial, I’m going to go over how to:

Install WP-PageNavi and properly integrate it in your theme.
Two methods to disable and/or override default plugin styles.
An overview of the HTML markup output by WP-PageNavi
Finally, how to alter the look of your page navigation through CSS

Install the Plugin

You have two options when it comes to installing the WP-PageNavi plugin.

Download it from WordPress.org, upload it to your /wp-content/plugins/ directory, and activate (aka, the old fashioned way).
Depending on your host, you can also automatically install plugins by searching them in “Add New” page under Plugins in your WordPress admin panel. Just search for “pagenavi” and you should find it.

Okay, that should’ve been pretty easy. Now it’s time to get your hands a little dirty in code for the integration part.

Theme Integration

In our theme integration, we never want any errors to be displayed if the WP-PageNavi isn’t active. Instead, we’ll make sure it falls back on the old previous/next-style navigation. To do this, we’ll use a function_exists conditional check.

Let’s say this is your normal previous/next WordPress navigation code:

We will change it to the following:

This basically checks to see if WP-PageNavi is active and if it is, it displays the new page navigation code. If not, it gracefully falls back to the normal previous/next navigation.

Please Note: Depending on how your CSS is coded, you may want to put the wp_pagenavi(); part inside the “navigation” (or equivalent) div. Keep in mind WP-PageNavi spits out a new class called “wp-pagenavi” though which we can use to style separately.

Override Plugin Styles

By default, WP-PageNavi automatically inserts a CSS file called pagenavi-css.css from its plugin directory into the header of your site. We don’t want these default styles to interfere with our own cool custom-made styles, so we’ll completely get rid of them, and there are two simple ways to do just that.

Add a CSS file to your theme directory – This is probably the easiest way to override the default WP-PageNavi styles. If you have a file called pagenavi-css.css in your theme directory, WP-PageNavi will use this instead of the default one in the plugin directory.
Add a snippet to your functions.php file – The following code snippet I picked up from WP Recipes will completely disable the above behavior and not include any stylesheet from the plugin (either the default one or an override in your theme directory).

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
	wp_deregister_style( 'wp-pagenavi' );
}

Just plop that code in your theme’s functions.php file and add the CSS styles to your regular theme’s stylesheet (usually style.css).

Note: Make sure the code is surrounded by brackets like if your functions file is currently empty.

WP-PageNavi HTML Markup and CSS Selectors

Here’s what the WP-PageNavi markup looks like. In the following example, there are four pages, currently on page two.


	Previous1
	2
	3
	Next
	...
	Last »

We can use the following CSS selectors to target the above HTML markup:

.wp-pagenavi – Applies to the entire div, useful for CSS clears, padding/margin, font sizes and styles (bold, italic, etc.)
.wp-pagenavi a – Targets all links inside the page navigation, including page numbers and previous/next.
.wp-pagenavi a.page – Targets page numbers specifically
.wp-pagenavi a.first – Targets the “first” link specifically (not listed above)
.wp-pagenavi a.last – Targets the “last” link specifically
.wp-pagenavi span – Targets the current page number along with the extend part (the thing with three dots)
.wp-pagenavi span.current – Specifically targets the current page number
.wp-pagenavi span.extend – Specifically targets the extend (three dots thing)
.wp-pagenavi span.pages – Specifically targets page number display (i.e. Page 1 of 4)

Note: The previous and next links by default, have no CSS class on them. If you want them to completely differentiated from the page numbers and first/last links, those will need to reset any styles added to the .wp-pagenavi a selector. If that made no sense, take a look at the following (really simplified) example.

For example: Let’s say you wanted the the previous and next links to be bold, but every other link to have a normal weight. You would need to do the following:

.wp-pagenavi a { font-weight: bold; } /* Previous and Next links only */
.wp-pagenavi a.page,
.wp-pagenavi a.first,
.wp-pagenavi a.last { font-weight: normal; } /* Other links */

I combined page number links, the first link, and the last link into one rule for example purposes. Of course, you can separate them and add more specific styles to each one.

This would be much easier if there was a class added to previous/next links by default, but there’s not. It’s not a huge deal as you can just reset them anyway.

Important Update: Thanks to an update from scribu in the comments, it turns out the newest version of WP-PageNavi does have previous/next classes on them (thanks in part to Yoast).

You can use .wp-pagenavi a.previouspostslink and .wp-pagenavi a.nextpostslink to select previous and next links, respectively.

So pretty much everything above up until the unordered list of selectors isn’t relevant anymore, but I’ll keep it just because it could be a useful lesson in overriding CSS in some other situations. The below CSS example will still apply as I didn’t use those selectors anyway.

A CSS Example

Here’s an example of a PageNavi styling which I built off of the Blogwave theme.

Here’s the code I used to get this look, multi-single-line CSS is optional:

.wp-pagenavi a, .wp-pagenavi span {
	padding: 5px; margin-right: 10px;
	font-size: 15px; color: #03719c; text-decoration: none;
	border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background: #03719c;
	color: #fff;
	border: 3px solid #AFAFAF;
	}
.wp-pagenavi span.current { font-weight: bold; }

And here’s what it all means:

First Rule
The .wp-pagenavi a, .wp-pagenavi span selects all anchor and span elements (pretty much everything) inside the .wp-pagenavi div.

The first line of the rule sets a padding of 5px so it won’t be crammed up against the light gray border (defined below). It also sets a consistent margin of 10px to the right of each element so there is equal spacing between each.
The second line sets a font size of 15px, makes the text color blue, and makes sure links have no underline.
The third line sets a solid 3px gray border on everything. The border-radius code makes the corners rounded.

Second Rule
The .wp-pagenavi a:hover, .wp-pagenavi span.current selects the link hover effect as well as the current page number, respectively.

The first line sets a dark blue background color.
The second line makes the text white.
The third line gives a slightly darker border.

Third Rule
This selects the current page number (again) without affecting the link hover effect as well (like the second rule). This just makes the current page number a bold font weight.

The reason I didn’t include it with the link hover effect is because it has an uneven effect going from normal to bold font weight.

Note: Depending on how your CSS is coded, you may have to use more specific selectors. For example, if there are styles for #content a and your WP-PageNavi is inside the content div, you may have to rewrite your PageNavi CSS as #content .wp-pagenavi a and override any other less-specific styles.

Conclusion

I know this was a relatively simple example, you could have a lot more advanced CSS rules to differentiate the various links and other elements even more. Hopefully you picked up a few CSS tips along the way too.

Optional WP-PageNavi integration is a pretty cool feature theme developers could integrate in their themes. With the integration method I outlined above, users could easily choose whether or not to use it, and it could be a nice option for a lot of blogs.

Hope you all liked the tutorial, and if you have any requests for future WordPress tutorials or CSS tips, let me know in the comments.

Dissecting Astatic – Thematic Child Theme Tutorial

Leland — Sat, 10 Apr 2010 17:53:26 +0000

Last weekend I released a free Thematic child theme called Astatic. It was probably the most “advanced” Thematic theme I’ve ever made as I made use of several theme filters, as well as CSS styling to make certain pages look differently using the same HTML markup.

In this tutorial, I’ll go over:

The very basics of making a child theme
How to use Thematic action and filter hooks
How to style pages differently with CSS without changing markup

Child Theme Basics

A child theme technically only needs 1 file, a stylesheet named style.css. This differs from a normal theme which requires at least two files, index.php and style.css. Here’s what the header of a very basic child theme’s stylesheet should look like:

/*
Theme Name: Astatic
Theme URI: http://www.themelab.com/free-wordpress-themes/
Description: A very minimal child theme of Thematic
Author: Theme Lab
Author URI: http://www.themelab.com/
Template: thematic
Version: 0.1
*/

Notice the line second from the bottom which says Template: thematic. This is what sets the parent theme to whatever theme is in your /wp-content/themes/thematic/ directory.

You could change this to whatever directory you wanted to inheirit all the parent theme stuff from any other theme, for purposes of this tutorial we’ll stick with Thematic though.

Ever since WordPress 2.7, you can also make pretty much any template file you want in your child theme directory to have it override the parent theme’s template.

Since Thematic has a boatload of action hooks and filters, you probably won’t need to do that. You can make just about any change you want through just a functions.php file in your child theme directory.

Thematic Hooks and Filters

You can take advantage of Thematic’s built-in hooks and filters by placing a file called functions.php in your child theme directory.

I used these for removing bits of code from the template without altering the parent theme files. For example, the first part of Astatic’s functions file removes the Javascript code from the head of the document.

It was mostly used for Jquery dropdown menus for navigation. Since I was only planning on having a simple one-level-deep page navigation, I decided to remove it. Here’s the code I used.

function remove_thematic_js() {
    remove_action('wp_head','thematic_head_scripts');
}
add_action('init','remove_thematic_js');

Code Explanation

The first line is where I named the function. This could be named whatever you want but it’s best if you use a descriptive function name. I used remove_thematic_js because, well, the function is for removing Thematic’s JS.
The second line is where I define what the function does. In this case, I’m removing the thematic_head_scripts from the wp_head hook
The final line makes the magic happen.

Overriding Thematic Functions

To “override” a function, you first have to remove it, then code a new function to replace it. I did this with the thematic_blogtitle function, so I could wrap h1 tags around it on non-singular pages. First, the removal code:

function remove_thematic_blogtitle() {
    remove_action('thematic_header','thematic_blogtitle',3);
}
add_action('init','remove_thematic_blogtitle');

Pretty much identical to the above, except for one seemingly minor detail. Notice the number “3″ in the remove_action line? This is the priority defined in Thematic’s original function files, which needs to match in our function, or it won’t work.

You can find more of these functions in Thematic’s library files. Just make sure the hook name (in this case, thematic_header) and the priority (if applicable) match.

Now, here’s the new and improved blogtitle function:

function new_blogtitle() {
if (is_home() || is_front_page()) { ?>


Code Explanation

First line, is once again, to name the function.  Since this is for a new blog title, I’ll call it new_blogtitle.  Remember, descriptive names.
The second line is a conditional tag which checks to see if you’re on the homepage or front page (basically the only pages which use h1 tags for the blog title).
The “else” portion is identitcal to the first part, except the blog-title ID is wrapped in  tags rather than .
The final line adds the action to thematic_header with priority 3 (remember, the same number we used to remove the old blog title function.

Excerpt Display on Homepage
By default, Thematic displays the full post on the homepage (as opposed to an excerpt).  Since I want it to be consistent with all archive and search pages (which have excerpts by default) I needed to change it.  Here’s the code I used:
function astatic_content($content) {
	if (is_home() || is_front_page()) {
		$content= 'excerpt';}
	return $content;
}
add_filter('thematic_content', 'astatic_content');
On top of that, I wanted to limit the amount of words in the excerpt to 20.
function new_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'new_excerpt_length');
Credits to WP Engineer for the above code, which could be used on any WordPress theme (not just Thematic).
Of course, you can change the “20″ to whatever you want, just keep in mind you may have to increase the height of the non-singular posts to accommodate more excerpt words, which we’ll go over next.
Changing the Look With CSS
Now on to my favorite part, the CSS.  You’ll notice on any index pages (main index, archives, categories, tags, and search) posts are laid out in two columns.  The markup between these and singular pages (single posts and pages) are essentially identical.
I used the .not-singular class to style the index posts differently.  This class is output in the  tag on any index pages through the body_class function.
I used the following snippet of code to style posts on these index pages.
.not-singular .post {
	width: 400px;
	height: 150px;
	float: left;
	margin-right: 50px;
	}
Code Explanation

The first line selects only non-singular posts, since that’s all we want to style onw.
The next two lines give a fixed height and width to the div, this will help the posts look neat.
The float: left makes the post float to the left, which forms the “columns”.
The right margin sets 50 pixels of space between the two columns, so they aren’t crammed.

Remember, the body classes change from page to page, depending on what type of page you’re on.  Let’s say you’re on a “Pink” category archive page, a body class called category-pink will be made available, and you could set the entire background of the page with the following code: body.category-pink { background-color: pink; }.
Keep in mind, pink background would probably make your visitors want to gauge their eyes out, although hopefully you get the idea of the potential of body_class.  You can also take advantage of post_class which functions very similarly for styling various types of posts, also integrated in Thematic.
Footer Navigation
Since I removed every single page navigation menu through filtering, I decided I would insert a basic page menu through the thematic_abovefooter hook.
function astatic_footernav() {
?>





This is just a basic, one level deep page menu including a translation-friendly “Home” link.  Here’s the CSS code to style it:
#footer-nav { clear: both; list-style: none; text-align: center; padding: 50px 0 20px; }
#footer-nav li { border-left: 1px solid #000; display: inline; padding: 0 10px; }
#footer-nav li#home-link { border-left: 0; }
Code Explanation

The #footer-nav clears any floats with clear:both, removes the default bullets with list-style:none, aligns the menu to the center, and adds sufficient padding above and below the list.
#footer-nav li adds a 1 pixel border (or separator) to the left of every list item, sets them all up on one line, and adds padding to the left and right.
#footer-nav li#home-link makes sure no border is displayed to the left of the “Home” link, since that would look slightly odd.

Footer Link
I decided to add a footer link back to the Astatic theme page, in case any visitor of an Astatic site was wondering what theme it was using.  I used the following code.
function childtheme_theme_link($themelink) {
    return $themelink . ' & Astatic';
}
add_filter('thematic_theme_link', 'childtheme_theme_link');
Note: Please use & instead of a straight ampersand.  I changed it above because it was messing up the code display for some reason.
Basically I’m piggybacking on top of the default “Thematic Theme Framework” link, which can be removed in the Thematic Options page.  I picked up this tip from this guide to customizing Thematic.
Conclusion
Make sure to download the Astatic theme and take a peek at the code for a more in-depth look at what went on during the development.
For any more Thematic information, ThemeShaper is the ultimate resource, including their forums.  It also may be worth following a site called Thematic 4 You which is run by Thematic lead developer, Chris Gossmann.
I plan on doing even more detailed (if that’s even possible) “theme dissection” tutorials in the Underground when it’s ready.  Make sure you sign up to the email list on the previously linked page for any news regarding that, among other goodies.
Phew.  I hope you learned a little something hear about making Thematic child themes, and hopefully about child themes in general.  Let me know what you think in the comments.


Related posts:
Astatic – Free Thematic Child Theme
Braintied – Free Thematic Child Theme
Monochromatic – A Thematic Child Theme



Useful Alternatives to the Dreaded Monthly Archive Links
Leland — Sat, 27 Mar 2010 12:33:20 +0000

			

				

			
		
In a lot of WordPress sites’ sidebars, you’ll probably see the monthly archive links make an appearance.  These are a list of links that categorize your post by month.  If you want to get more specific, you can even group the posts by week or even day.  Unless you’re using widgets, these lists are output using the wp_get_archives function.  Here are some examples:

 – Lists the monthly archives (no parameters needed, it’s monthly by default)
 – Lists the weekly archives
 – Lists the daily archives
Bonus:  – Lists the yearly archives

So what’s the problem?  Well, depending on the site, monthly archive links aren’t very useful to your visitors.  I mean, how many times have you visited a site and said “Hmm…I want to check out some posts written in January 2008″?
Probably never, and these links waste valuable space in your sidebar (or footer, whatever) that could be occupied by more useful links.
In this post, we’ll go over how to insert the following into your WordPress theme, including a widget alternative (if available):

Popular post links (three separate methods)
Featured articles/links using the Blogroll
Recent post links

There are a few methods to get a link list of popular/useful posts.  Here they are:

Popular Posts by Comments
Sometimes the quantity of comments is a good way to gauge a post’s popularity.  If you want to generate a list of links with your most commented posts, here’s the code for that:
First, paste the following function in your functions.php file:
function popularPosts($num) {
    global $wpdb;

    $posts = $wpdb->get_results("SELECT comment_count, ID, post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , $num");

    foreach ($posts as $post) {
        setup_postdata($post);
        $id = $post->ID;
        $title = $post->post_title;
        $count = $post->comment_count;

        if ($count != 0) {
            $popular .= '';
            $popular .= '' . $title . ' ';
            $popular .= '';
        }
    }
    return $popular;
}
Then paste the following into your sidebar (or wherever you want a list of popular posts by comments):

     

You can change the “10″ to however many posts you want.  I’m assuming you already have CSS in place in your theme for lists like this, so I won’t go over any CSS styling.
Source: How to List Your Most Popular Posts in WordPress
“Currently Hot” List
 – This is a relatively new method of generating a list of popular posts.  It requires you use the WordPress.com Stats plugin.  Here’s the code:
 0) {
			echo '';
			foreach ($top_posts as $p) {
?>
				
';
		}

	}
?>
Remember: You need the WordPress.com stats plugin activated for this code to work.  If you just installed it, you should probably leave it on for a few days to collect enough relevant data before using it.
If you want to hide the smiley face added by the plugin, make sure you hide it the right way.
Hint: Change the “ol” tags to “ul” if you want an unordered list instead of a numbered list.
Source: Quick and Easy Popular Posts for Your WordPress Blog
Featured Articles with Blogroll
Using WordPress’ built-in blogroll functionality, you can manually select a link to whichever posts you want.  This is probably the most flexible way since you have the most control over how your links are displayed, and they don’t even have to be on your site.
You can also categorize your links and list them all in separate lists, using just one line of code with the built-in wp_list_bookmarks function.
&title_after=&category_before=&category_after='); ?>
This will output all your blogroll list categories with “h3″ titles.  Depending on your sidebar’s markup, you may want to add code to be displayed before and after each list.
If you want to exclude any categories, you can use the exclude_category parameter with a comma-separated list of link category IDs.
If you don’t know how to use the blogroll feature, I found this pretty nice screencast on WordPress.tv (try watching it in full screen mode).

Recent Post Links
This is something pretty simple that I’ve gone over before.  Using the same wp_get_archives function we went over above, you can modify to get a list of recent posts.

The type=postbypost is the type to use.  If you have a ton of posts, I’d recommend using a limit so all of your posts don’t show up.
You can also use the “Recent Posts” widget, assuming your sidebar is widgetized.
Conclusion
I know on some sites, monthly archive links can be useful, like perhaps on a news site, or an “of the day” site (like for cartoons or recipes).
Some people glance at them just to see how long the blog has been active, it can help credibility (hint: add the show_post_count=1 parameter to show a post count next to monthly archive links).
Most of the time, however, it’s a waste of space.  It can be replaced with some other much more useful links, like popular content or related posts that users would find more value in.
Any monthly archive links could be placed on a site map page and out of your sidebar.
In the comments, I’d be interested to hear your feedback.  Do you use monthly archive links?  When do you think they could be relevant?  Do you have any other useful alternative examples?


Related posts:
The Easy Way To Display Recent Posts in WordPress
How To Create a Searchable Tweet Archive with WordPress
The Ultimate Guide to WordPress Conditional Tags



How to Create a Comments Central Page Template in WordPress
Hafiz Rahman — Wed, 24 Feb 2010 15:15:57 +0000

			

				

			
		
One way to increase visitor engagements is to reward their comments by showcasing them on your website. Additionally, you can also feature the top commenters as well, linking back to their website in the process. Here we’ll create a dedicated Page Template to  display those comments and commenters in one place.
In short, this tutorial will teach you how to:

create a Page Template,
use SQL queries in your code to fetch comments with varying parameters,
create a section of the Page that’s only viewable by Admin,
add support for a comment-related plugin.


Creating a Page Template
The easiest way to create a Page Template is to open the page.php file in your theme, which will roughly look like this:

  
    
    

    
      
    
    
    
  




Copy and paste page.php’s content and add this to the very top:


And save it. There’s no real rules on naming a Page Template file, but it’s a good idea to go with a prefix to make it recognizable, say “pt-comment-central.php”. We haven’t added anything into this Page Template, but it’s up and running and selectable on the write new Page dashboard area.
Fetching Comments
For this Page Template, we’ll feature four different aspects of comments:

Recent Comments,
Recent Trackbacks / Pingbacks,
Top Commenters,
Most Commented Posts,

First, we’ll do Recent Comments:
Recent Comments

comments c INNER JOIN $wpdb->posts p ON (c.comment_post_id=p.ID) WHERE comment_approved = '1' AND comment_type not in ('trackback','pingback') ORDER BY comment_date DESC LIMIT $max";
  $results = $wpdb->get_results($sql);

  $template = '%g %an on %pt';

  $echoed = 0;
  foreach ($results as $row) {
    $tags = array('%ct','%cd','%g','%pt','%pu','%au','%an','%cid');
    $replacements = array($row->comment_title,$row->comment_date,get_avatar($row->comment_author_email,'32'),$row->post_title,get_permalink($row->comment_post_ID),$row->comment_author_url,$row->comment_author,$row->comment_ID);
    echo '' . str_replace($tags,$replacements,$template) . '';
    $echoed = 1;
  }
  if ($echoed==0)
      echo 'No comment found.';
?>


The SQL query asks for all approved comments sorted by date (latest first). $max is where we set the amount of comments to get, 7 in our case. The output of the code above will be an unordered list of recent comments:

With a little CSS we can straighten that to look better:
#cc-recent-comments li {
  width: 100%;
  float: left;
  list-style-type: none;
}

#cc-recent-comments li img {
  float: left;
  margin-top: -5px;
}


$template determines how the actual text will be written; this is based on the format made by WP Comment Remix, and you can follow that link to learn more on customizing it (look for ‘tokens’).
Next is Recent Pingbacks / Trackbacks:
Recent Pingbacks / Trackbacks 

comments c INNER JOIN $wpdb->posts p ON (c.comment_post_id=p.ID) WHERE comment_approved = '1' AND comment_type not in ('trackback','pingback') ORDER BY comment_date DESC LIMIT $max";
  $results = $wpdb->get_results($sql);

  $template = '%g %an on %pt';

  $echoed = 0;
  foreach ($results as $row) {
    $tags = array('%ct','%cd','%g','%pt','%pu','%au','%an','%cid');
    $replacements = array($row->comment_title,$row->comment_date,get_avatar($row->comment_author_email,'32'),$row->post_title,get_permalink($row->comment_post_ID),$row->comment_author_url,$row->comment_author,$row->comment_ID);
    echo '' . str_replace($tags,$replacements,$template) . '';
    $echoed=1;
  }
  if ($echoed==0)
    echo 'No comment found.';
?>


The code above is very similar to the one we have for Recent Comments, the only differences being that we’re now asking for comments with ‘comment_type’ under ‘pingback’ / ‘trackback’, and the template is a bit different as well. Result:

Here’s the code for Top Commenters:
Top Commenters

comments WHERE comment_approved = '1' AND comment_type not in ('trackback','pingback') GROUP BY comment_author, comment_author_url, comment_author_email ORDER BY comment_count DESC LIMIT $max";
$results = $wpdb->get_results($sql);

$template = '%g %an (%c comments)';

$echoed = 0;
foreach ($results as $row) {
    $tags = array('%g','%au','%an','%c');
    $replacements = array(get_avatar($row->comment_author_email,'32'),$row->comment_author_url,$row->comment_author,$row->comment_count);
    echo '' . str_replace($tags,$replacements,$template) . '';
    $echoed = 1;
}
if ($echoed==0)
    echo 'No commenter found.';
?>


Nothing too mind-blowing there. Do notice the cool get_avatar() function, though, which will give you the Gravatar for anyone whose email address you specify. In this case, we fetch the avatar image using the commenter’s e-mail address. With the CSS similar to the one we have for recent comments, we can have this result:
#cc-top-commenters li {
  width: 100%;
  float: left;
  list-style-type: none;
}

#cc-top-commenters li img {
  float: left;
  margin-top: -5px;
}


Last is Most Commented Posts:
Most Commented Posts

$sql = "SELECT p.*, c.comment_count FROM $wpdb->posts p INNER JOIN (SELECT comment_post_id, count(comment_ID) as comment_count from $wpdb->comments WHERE comment_approved='1' GROUP BY comment_post_id) c ON (c.comment_post_id=p.ID) ORDER BY c.comment_count DESC LIMIT $max";
$results = $wpdb->get_results($sql);

$template = '%pt (%c comments)';

$echoed = 0;
foreach ($results as $row) {
  $tags = array('%pd','%pt','%pu','%c');
  $replacements = array($row->post_date,$row->post_title,get_permalink($row->ID),$row->comment_count);
  echo '' . str_replace($tags,$replacements,$template) . '';
  $echoed = 1;
}
if ($echoed==0)
    echo 'No commenter found.';
?>



And that’s it. Next, we’ll add some extra coolness by adding some stuff that only the admin can see.
Admin-only Information
To show stuff only for the admins, we can use this code snippet from WPCandy:


Now on the Dashboard, we get a quick glance of a site’s total, approved, pending review and spam comments. Let’s replicate this for our Page Template for easier, admin-only access:

Total Comments: total_comments; ?>
Approved: approved; ?>
Moderated: moderated; ?>
Spam: spam; ?> 


wp_count_comments() is a neat function that returns an array of various comment stat numbers. We’re adding links to the respective comment administration area too.
Adding Some Sparks
Last, say you find a cool comment-related plugins you want to incorporate into this Page Template. Instead of adding more codes, let’s just add support for it. For this example, I’ll go with Activity Sparks plugin, which can “display a ’sparkline’ style graph in your sidebar indicate post and/or comment activity. ” Sounds great to me.
Usually, a plugin’s readme.txt file will teach you how to add it into your theme files. In our case, the code can be like this:
'legend','height_px'=>100,'width_px'=>600,'period'=>30, 'ticks'=>24));
  }
?>


function_exists() checks whether a particular function is available; in our case, the activitysparks function, which will be available if the plugin has been uploaded and activated. If it’s there, we show the graph. If not, then our Page Template won’t show anything (but it will still run just fine, no errors).
Result and Example
An example of this Page Template is available here. It uses the codes you see here with a few modifications, mostly to keep the HTML structure consistent with the rest of the website. The whole code for that Page Template is available at Pastebin.
Credits and Further Readings


The codes used to display the various recent and top comments are taken from WP Comment Remix plugin. Take a look at its code to learn more things to do with comments, like excluding admin comments from top commenters or how to take into account recent comments only. The $template we use to format the output can be learned more from that page, too.

Creating Your Own Page Template on the WordPress Codex.
Displaying admin-only content tutorial on WPCandy.


Related posts:
Add Gravatar Support to Your WordPress Comments
You Don’t Need a Blog On Your Front Page
Useful Alternatives to the Dreaded Monthly Archive Links



Add a Widgetized Footer to Your WordPress Theme
Leland — Sat, 25 Apr 2009 12:33:34 +0000

			

				

			
		
The inspiration for this tutorial comes from a tweet I received with feedback for the soon-to-be-released RS12 theme.

Although the widgetized footer did not ultimately make it in the release of the RS12 theme, I decided to write this tutorial to show people how exactly to add a widgetized footer in your theme.  In this guide, you’ll learn:

The HTML and CSS code needed to produce the widgetized footer
How to add commonly used WordPress template tags as placeholders
How to widgetize the footer and place widgets inside it

There’s going to be a lot of code in this post, so if you’re up for it, read on…

I’ll be using the Green Rays WordPress theme as my example in this tutorial.  At the moment, the footer just has a standard “copyright” message and credits.
The HTML
The first step is to add the HTML markup.  Let’s say we’re going to have three different sections in the widgetized footer with lists of Most Recent Posts, Monthly Archives, and Daily Archives.  We’ll place this HTML code above the current “copyright” line.


Recent Posts




Featured post


Blockquotes


How the ‘more’ tag works


Order or Unorder








Monthy Archives




March 2008


February 2008


January 2008


December 2007








Daily Archives




March 7, 2008


February 9, 2008


January 4, 2008


December 22, 2007







Basically this code puts each “widget” in a div.  Inside each widget is a heading and an unordered list with links.  Yes, I know the links don’t go anywhere.  We’ll later replace this with WordPress template tags.  Here’s what we have so far:

The CSS
As you can see, this isn’t looking so good without any CSS styling.  Add the following code to your stylesheet.
.footer-item {

 float: left;

 width: 33%;

 padding-bottom: 10px;

}

.footer-item ul {

 padding-left: 15px;

}
What this code does is float each footer item to the left, which basically means they can be side by side.  The width is set to 33%, which gives enough room for three footer items in a single row.  There is also a little bit of padding added below each footer item.  The second piece is just padding the lists 15 pixels to the left. 
Now you can see the HTML and CSS are starting to come together.  Here’s what you should have so far:

WordPress Code
At the moment, we have a bunch of empty HTML links, with no actual WordPress code.  Let’s replace the lists under Recent Posts, Monthly Archives, and Daily Archives with the WordPress template tag equivalents.  Replace what you currently have with the following:


Recent Posts












Monthy Archives












Daily Archives









The parameters should be pretty self-explanatory, but if you’re not sure about any of them, try looking up wp_get_archives in the WordPress Template Tag Lookup Tool.  Remember, I’m just using the wp_get_archives() template tags as a placeholder.  We’ll be switching these out with other WordPress widgets later, after we widgetize the footer.
Widgetize It
For this section of the tutorial, I’ll be borrowing parts from my previous widgetizing themes tutorial.
The first step is to register the “sidebars.”  To do this, simply replace the current contents of the functions.php file with the following:

if ( function_exists('register_sidebar') )

    register_sidebar(array(

        'name' => 'Sidebar',

        'before_widget' => '
',

        'after_widget' => '
',

        'before_title' => '',

        'after_title' => '
',

    ));

if ( function_exists('register_sidebar') )

    register_sidebar(array(

        'name' => 'Footer',

        'before_widget' => '',

        'after_widget' => '
',

        'before_title' => '',

        'after_title' => '
',

    ));

?>
Now we’ll go into sidebar.php and replace the current dynamic sidebar conditional tag with this:

With this:

Now we’ll go into our footer.php file and wrap the footer items in it’s own respective sidebar conditional tag.  Right before the first “sidebar-item” div, add the following.

Right after the final closing “footer-item” div (and above the “clear” div which we added earlier) we’ll add the following:

Okay, now our sidebar and footer should be widgetized.  Let’s test it out by adding a few widgets in the footer.  I’ll add a Blogroll widget, Recent Comments widget, and a text widget.  Here’s what it should look like:

Conclusion
Well, that’s the basics of adding a widgetized footer to your theme.  You may want to add separate styling rules for other types of widgets such as the calendar or search box.  This probably won’t work with every theme, such as the RS12 theme for example, as it had a non-expandable footer.
If anyone wants the updated Green Rays theme by any chance, you can download it here.  This way you can see where exactly I added the code.  You can compare it with the original theme as well.
Hope you liked the tutorial.  Will you be adding a widgetized footer to your theme?  Is there anything in the code I used above you would do differently?  Questions, comments, suggestions, and criticisms are all welcome, so feel free to sound off in the comments.


Related posts:
See How Easy It Is To Widgetize WordPress Themes
What exactly is a widget-ready WordPress theme?
Make A Custom Twitter Widget Without A Plugin



How To Add PollDaddy Polls On WordPress Blogs
Leland — Thu, 16 Oct 2008 16:17:37 +0000

			

				

			
		
It’s been a long time since I’ve written a tutorial here.  I thought with Automattic’s acquisition of PollDaddy, this would be a good opportunity to write one about adding polls to your self-hosted WordPress blogs, more specifically – PollDaddy polls.  In this tutorial I’ll go over:

Installing the PollDaddy plugin
Signing up to PollDaddy (if you don’t already have an account)
Creating and managing polls from within your WordPress admin panel
Inserting the polls you create into your WordPress posts and pages

And now onto the tutorial…

The Plugin
You can grab this plugin from this page over at WordPress.org.  After installing the plugin, you’ll notice a prompt to input your PollDaddy account details.
Signing Up
If you don’t have a PollDaddy account already, not to worry!  I’ll walk you through it.  You can sign up for a free account here.

Fill in your name, e-mail address, and password choice, and you’re all set.
Configuring the Plugin
After this, you’ll need to go back to your WordPress admin panel and type in the login details you just created.  Upon revisiting the PollDaddy admin page, you’ll see a new screen to create and manage your polls.

I’m not sure what that warning message means, but I’ll just ignore it and see if the polls work anyway.  Seems some others are having the same problem as well.
Creating Polls
Click the “Add New” link to set up your poll.  There’s an input box for the poll question, as well as three answers.  You can click the “Add Another” button for more answer choices.  You can also set up multiple choice polls, randomize the answer order, and allow other answers.

I’ll choose the “Simple White” design and leave the default settings for results and repeat voters.
After clicking the “Add Poll” button, I was greeted with a page with two warning messages on it.  After re-logging in to the admin panel (somehow I was logged out) and visited the Polls page, it seems the poll I created was indeed successful.
Inserting Polls
The next step is to go write a post, and click the orange button thingy next to Add Media.  You should see a screen like this with your newly created poll.

Again, the same warning message pops up.  I’ll try my best to ignore those since they seem not to make a difference with the actual workings of the plugin.  After sending the poll to the editor, WordPress will generate a shortcode to place in your post.
Help Me!  It doesn’t work!
After saving/publishing, you’ll notice the actual poll doesn’t display in your post, just the unparsed shortcode.  To correct this, you’ll need to install another plugin from PollDaddy.  You can get it here.  I grabbed the one for version 2.5 and above.
I’m not sure why this plugin isn’t even mentioned at all on the first plugin’s page.  I had to check this support thread to find out why the polls weren’t displaying properly.  Apparently the first plugin was just for creating/managing polls.  This one is for having them display in your WordPress post.
All Done
That’s it.  Here’s the poll I’ve just created in action.

Pretty cool?
Conclusion
First of all, I’d like to congratulate Matt Mullenweg and Automattic on this awesome acquisition.
It’s a mystery to me why the plugin for creating/managing polls and the plugin for displaying polls are separate.  Maybe someone can enlighten me.  I personally think that these two plugins should be combined into one.
I think it’s also worth mentioning the self-hosted WP-Polls plugin by Lester Chan, if you’d rather not be dependent on a third-party service.
Hope you all liked the tutorial.  Feel free to comment with your thoughts on the acquisition, the WordPress integration, and the tutorial.  I’d love to hear them.


Related posts:
Easily Add Videos to Your WordPress Blogs
WordPress.com Blogs Now Have XML Sitemaps
WordPress Weekend Resources – June 27, 2008



Dipslaying Code In WordPress Posts
Leland — Sun, 15 Jun 2008 16:41:49 +0000

			

				

			
		
Sites that frequently publish code examples, such as tutorial sites, need an easy way to display code on their pages.  Fortunately for WordPress users, there are several great ways to display codes in your posts.  In this tutorial, you’ll learn about:

Manually displaying code
The WP Code Shield plugin
SyntaxHighligter Plus

If you run a tutorial site, or any other website that may require code examples, read on…

Manually Displaying Code
One of the problems most people face when trying to display code in their posts, is how to get it to not execute on the page.  To do this, you’ll need to use character entities to replace the actual brackets.

> will become <
< will become >

Manually changing each little symbol like this can become a tedious task.  Luckily, I’ve found a tool that can convert < and > to > and <.
WP Code Shield
This is a plugin which will take any code inside  tags and convert the brackets into character entities automatically.  You can get the plugin here.

SyntaxHighighter Plus
If you want something more interactive than boring old code, then SyntaxHighlighter Plus is the plugin for you.  You can download the plugin here.  This plugin supports syntax highlighting in the following languages:

Bash
C++
C#
CSS
Delphi
Java
JavaScript
PHP
Python
Ruby
SQL
VB
XML/HTML

If you wanted to highlight PHP, for example, you’d type out [php]your php code here[/php] and save.

Saving this would produce a code box similar to this:

As you can see, this plugin produced a feature-filled code box with the ability to copy and print.  Just a note, this plugin cannot be used alongside CodeShield.
Conclusion
As I browsed the WordPress plugin directory, it seems these aren’t the only WordPress code plugins available.  Feel free to look around and see if another plugin better suits you.
If you don’t write code in your WordPress posts very often, you’d probably want to use one of the first two methods listed here.  If you frequently post code examples, something like SyntaxHighlighter Plus will probably be more beneficial to you and your blog.
I hope you enjoyed this guide.  Feel free to subscribe to the feed for more Theme Lab updates.


Related posts:
The Easy Way To Display Recent Posts in WordPress
Social Bookmarking with WordPress
Contact form plugins for WordPress



Reset Your WordPress Password via phpMyAdmin
Leland — Thu, 12 Jun 2008 15:33:27 +0000

			

				

			
		

It seems since the release of WordPress 2.5.1 – WordPress users have been experiencing issues with the built in password reset function.
Basically, the reset password function doesn’t work because the e-mail that’s supposed to contain the reset link never comes.
Not to worry, there is still hope if you have forgotten or lost your password.  You can reset it via phpMyAdmin, a MySQL database administration tool.

Open phpMyAdmin
In your hosting control panel software, such as cPanel – there should be a link to access your phpMyAdmin.  Usually this link is bundled close together with other MySQL database management tools.  Here’s a screenshot of what it looks like in cPanel.

Locate the users table
This is almost always called wp_users, unless you changed your database prefix.

After selecting the users table, you’ll need to click the Browse tab at the top, then click the little pencil icon next to the password you wish to change.
Change your password
You should now be on a screen like this.

In here, type in the new password of your choice in the appropriate input field.  Make sure you select MD5 from the dropdown menu.  Click “go” and your new MD5′d password should be saved.
Login to your account
You should now be able to login to your account with the password you chose.  WordPress 2.5.1 will automatically upgrade your password to the new encryption when you do this.
Conclusion
WordPress 2.5.2 is right around the corner, and hopefully this password problem will be corrected in that release.  Make sure to always keep your passwords safe and to yourself.  I hope you found this tutorial useful if you have been locked out of your WordPress 2.5 blogs.  Thanks for reading and don’t forget to subscribe to the feed.


Related posts:
WordPress 2.8.3 Security Fix: Admin Password Reset
How to install the latest version of WordPress
The Importance of Backing Up Your WordPress Site



Use FeedBurner to Manage Your WordPress Feeds
Leland — Mon, 09 Jun 2008 12:05:47 +0000

			

				

			
		
FeedBurner is an essential tool for many bloggers.  FeedBurner is a tool for managing, syndicating, and promoting your blog feeds.  Best of all, it’s a free service.  It’s very easy to get started and in this guide, I’ll show you how.

Burn your FeedBurner feed
Redirect your WordPress feed to FeedBurner
Recommended FeedBurner services

Start taking advantage of FeedBurner and read on…

Burn Your Feed
To get started, type your blog URL into FeedBurner’s front page.  If all is well, it should automatically detect your feed and verify it.  If you don’t already have an account with FeedBurner, it’s easy to sign up.  All you need to do is input your e-mail, as well as choose a username and password.

Now that you’ve claimed your feed, you should be on a screen which tells you you have completed step 1.

On step 2 of the FeedBurner process, it will prompt you to set up additional free FeedBurner stat tracking.  Besides this, you’re all done – unless you want to optimize and publicize your feed more, which will be gone over later.
Integrate with WordPress
Luckily for self-hosted WordPress users, FeedBurner provides an easy to use plugin to redirect your native WordPress feeds to your brand new FeedBurner-managed feed.  It’s called FeedBurner FeedSmith, and you can download it here.
Once you have installed and activated the plugin, a new Settings page will be created where you can input your FeedBurner feed URL, as well as a FeedBurner comments feed URL (optional).

After saving the settings, your WordPress feed URLs will now redirect to FeedBurner.
Recommended FeedBurner Services
FeedBurner offers a multitude of free and paid services you can use to optimize, publicize, and monetize your feeds.

BrowserFriendly – This will make your FeedBurner page more presentable to all browsers, making it easier for potential readers to subscribe to your feed.
FeedFlare – Provides links such as “Add to del.icio.us” and “Digg This” to each of your feed items, so your readers can share content across social networks with ease.
Email Subscriptions – Integrate your feed into an e-mail subscription service provided by your choice of either FeedBurner or FeedBlitz.
PingShot – Automatically ping several web-based feed reading services such as Technorati, Bloglines, Ping-o-matic, and many more.

This is just a small selection of many useful free services provided by FeedBurner.
Conclusion
If you don’t already use FeedBurner on your WordPress blogs, you should.  It’s super easy to sign up and get started, as I’ve gone over in this guide.  Once you build up a good amount of subscribers, you can also use the FeedCount to show off your subscriber count.  Thanks for reading, and don’t forget to subscribe to my feed (served by FeedBurner) for more Theme Lab updates.


Related posts:
Stop Complaining About Scrapers and Start Taking Advantage of Them
Put your dormant domains to use with WordPress
Agregado WordPress Theme Review

Theme Lab » WordPress Tutorials

How To Create a Searchable Tweet Archive with WordPress

Backup Your Tweets

Import Tweets to WordPress

Automatically Grab New Tweets

Tweet Archive Theme

Conclusion

Guide to Styling the WP-PageNavi WordPress Plugin

Install the Plugin

Theme Integration

Override Plugin Styles

WP-PageNavi HTML Markup and CSS Selectors

A CSS Example

Conclusion

Dissecting Astatic – Thematic Child Theme Tutorial

Child Theme Basics

Thematic Hooks and Filters

Overriding Thematic Functions

.

Excerpt Display on Homepage

Changing the Look With CSS

Footer Navigation

Footer Link

Conclusion

Useful Alternatives to the Dreaded Monthly Archive Links

Popular Posts by Comments

“Currently Hot” List

Featured Articles with Blogroll

Recent Post Links

Conclusion

How to Create a Comments Central Page Template in WordPress

Creating a Page Template

Fetching Comments

Recent Comments

Recent Pingbacks / Trackbacks

Top Commenters

Most Commented Posts

Admin-only Information

Adding Some Sparks

Result and Example

Credits and Further Readings

Add a Widgetized Footer to Your WordPress Theme

The HTML

Recent Posts

Monthy Archives

Daily Archives

The CSS

WordPress Code

Recent Posts

Monthy Archives

Daily Archives

Widgetize It

', 'after_title' => '

', 'after_title' => '

Conclusion

How To Add PollDaddy Polls On WordPress Blogs

The Plugin

Signing Up

Configuring the Plugin

Creating Polls

Inserting Polls

Help Me! It doesn’t work!

All Done

Conclusion

Dipslaying Code In WordPress Posts

Manually Displaying Code

WP Code Shield

SyntaxHighighter Plus

Conclusion

Reset Your WordPress Password via phpMyAdmin

Open phpMyAdmin

Locate the users table

Change your password

Login to your account

Conclusion

Use FeedBurner to Manage Your WordPress Feeds

Burn Your Feed

Integrate with WordPress

Recommended FeedBurner Services

Conclusion

',
'after_title' => '

',
'after_title' => '