Secrets of WP Theming: Part 3

Well it is time again for everyones favorite series.  So far we have covered some pretty groovy stuff.  Part 1 showed us how to create custom code laden templates that can be applied to blank pages in WP to achieve some gnarly effects.

In Part 2 we talked about creating custom templates for each of your categories, opening up a whole world of possibilities.  Today we are going to talk about a little used theme template, the Home Template (home.php).

There's no place like Home

So as you remember we talked about the different files that WordPress is hard-coded to recognize.  One of these that we have not talked about yet is home.php.  This template file is only used when index.php is called without any arguments passed to it.

That is a mouthful, isn't it?  What that nonsense above means is the following.  When you load this site, the physical URI, or address is http://chrisjdavis.org/index.php, and when you click on a link to a specific post, say this one which is number 732, the address becomes index.php?p=732.  Now p=732 is an argument, or rather how we tell WP that we want to see post #732.

My site uses some mod_rewrite magic so you dont see that, but trust me it is there, so home.php is only used when the physical address in the address bar of our browser is somesite.com/index.php.

And that matters to me WHY exactly?

Good question, glad you asked.

First, time for a little demonstration, take a moment and head on over to my test site and look around.  Back now? Good.  So what do we see over there?  Well the top row contains images from my Flickr account, the second row features the latest 5 posts from The Test Bed and finally the last row contains the last 5 entries from my Support Forums.  The index page has become more of an overview page, and you know the best part... I haven't called the WordPress loop: <?php if (have_posts()) : while (have_posts()) : the_post(); ?> anywhere on that page.

Now what I am about to show you isn't neccesarily the best way to go about this, I am merely choosing this course of action to demonstrate how powerful and completely disconnected from the core function of WP you can make home.php.  Keep that in mind.

So how am I displaying all this info if I am not hitting the database for it?

Simple, I am using the WordPress version of magpieRSS to grab, parse and style various RSS feeds.

What home.php gives you is the ability to have a WP handled index page that can be more static in nature, with a blog behind the scenes.  In essence we move closer to using WP as a Content Management System, as opposed to merely an elegant blogging platform.

Now of course you would want to have the_loop included in the home template to simplify matters, I just wanted to get across the extreme flexability of WP when using templates by going without it.

So lets write some code

Now for most of you this will probably be your first exposure to the RSS aggregation built into WP, don't go nuts with it!  It is powerful and easy to use, but you take a hit in performance when using it.

So we open up with the customary code:

<?php get_header(); ?>

Here is our first new bit, we need to call the rss functions and set a variable to todays date:

<?php require_once (ABSPATH . WPINC . '/rss-functions.php'); ?><?php $today = current_time('mysql', 1); ?><div class="main"><h2>Recent Flickr
</h2>

Now I am not parsing RSS for the Flickr area, since they (Flickr) provide a nice little solution for this already.  I am not going to paste it all in here, but you can find the code easily enough if you are a Flickr user.

Okay here is where the fun begins, we are now ready to call and handle the first RSS feed.

<?php
$rss = @fetch_rss('http://chrisjdavis.org/testbed/feed/');
if ( isset($rss->items) && 0 != count($rss->items) ) {
?>

So what have we done so far?  We are telling WP that we want to grab the RSS feed from this site, and if the feed responds, then move on.

<h3>Latest Posts on <?php bloginfo('name'); ?></h3><ol><?php
$rss->items = array_slice($rss->items, 0, 5);
foreach ($rss->items as $item ) {
?>

Okay the above snippet of code is saying, grab the pieces of the RSS feed, publishdate, author, title, content etc and create an array from them, and then for each of these arrays returned do what comes next.

<li><a href='<?php echo wp_filter_kses($item['link']); ?>'> <?php echo wp_specialchars($item['title']); ?><small>— 
<?php echo human_time_diff( strtotime($item['pubdate'], time() ) ); ?><?php _e('ago'); ?></small></li><?php
}
}
?></ol>

Okay, lets look at what is going on here.  First we are grabbing the link for the item returned and passing it through one of WP's many filters.  This link will allow us to load the post in full at the site referenced.  Since this is our own site, when you click on the link it will load the post using your single.php template.

Next we grab the title that is returned, and then we close the link tag, moving on to grabing the pubdate - when the item was published, and then using human_time_diff we calculate how long it has been since the item has been posted.  That gives us the groovy human readable 21 days ago stamp.

For the forum section, we just follow the above steps, only changing the URI of the feed to http://chrisjdavis.org/support/rss.php.  Other than that everything is the same.

After the second block of RSS aggregation code, we just need to add the closing code we need and we are done:

</div><?php get_footer(); ?>

And there you have it... a letter opener

Err... sorry MST3K moment.

Seriously though, that is about it.  I think you can see the potential that home.php has, freeing your site up to be just whatever you want while retaining the flexability and power that WordPress brings to the table.

So take what you have learned here and do something amazing with WordPress on your own sites, and by all means come back here and comment showing us all your brilliant work.

Until next time.