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.

  1. personal avatar Shawn Grimes
    Stroll on over and visit Shawn Grimes
    March 1, 2007

    Ah yes, more yummy goodness to keep in mind for the next time I redesign my site. Really Chris, thank you for putting your time and effort into writing these articles. You are putting light on things that for sure have gone overlooked with WordPress.

  2. personal avatar clint
    Stroll on over and visit clint
    March 1, 2007

    cant wait to dive into this one!!

  3. personal avatar Chadwick Ferguson
    Stroll on over and visit Chadwick Ferguson
    March 1, 2007

    Looks useful!

  4. personal avatar kartooner
    Stroll on over and visit kartooner
    March 1, 2007

    Awesome! Couldn’t have come at a better time. This is perfect since I’ve been considering making the front index (or home.php) of my site into a portal, or CMS hub of sorts.

  5. personal avatar Kates
    Stroll on over and visit Kates
    March 1, 2007

    Hey that was a better approach than digging the database. Use your own rss feed to show your recent posts. That’s cool. Very efficient indeed. This I gotta use. Thanks Chris, I learned a lot of new tricks reading your posts.

  6. personal avatar David Petherick
    Stroll on over and visit David Petherick
    March 1, 2007

    Fantastic timing, and excellently structured documentation. Thanks Chris - a pint of good karma has bene ordered for you.

  7. personal avatar Daniel
    Stroll on over and visit Daniel
    March 1, 2007

    Could this technique be used to pull the entire last post, instead of a list of recent posts?

    Basically, I’m just looking for my homepage to have static content, along with the “latest news” from any post category.

    How big is hit to performance?

    In anycase, I’m going to give this a try, as demonstrated.

    Thanks for the tutorial!

  8. personal avatar Sime
    Stroll on over and visit Sime
    March 1, 2007

    Thanks for the grat article!

    One question about caching: I want to put latest del.icio.us links also on the home page with the similar code. I was just wondering about cache? I want to set up cache for del.icio.us so that I doesn’t get banned for pulling it on every page hit…

  9. personal avatar Jayson Franklin
    Stroll on over and visit Jayson Franklin
    March 1, 2007

    Wow! I think I’m getting the hang of this. However, how long does it take to update? Is there a cache? I’m trying to integrate wordpress into my school’s website and I’m having some trouble getting it to see new posts. No errors or anything, but I had to point it directly at the feed. Just doesn’t seem to update but once an hour?

  10. personal avatar Chris J. Davis
    Stroll on over and visit Chris J. Davis
    March 1, 2007

    Hey Elliot,

    I understand your frustration completely. It mirrors my own when I think of all the “hacks” I would have to employ to make your browser of choice understand simple HTML and CSS. I refuse to use hacks for one browser, no matter the market share.

    When I actually had access to a Windows box I did everything I could to make this site useable for those who still prefer a sub-par experience, but I don’t have any windows compatible boxes anymore and will not be buying one just to test my personal site.

    Again I am sorry that you had a less than fun experience here, but at the moment there is nothing I can or will do about it.

  11. personal avatar Elliott Back
    Stroll on over and visit Elliott Back
    March 1, 2007

    So, I’ve got a few problems with this. See, like 90% of people, I’m using a variant (the latest, but not all are so lucky) of IE. And, your site doesn’t work in IE. At all. I can’t even submit my comment, so I’ll have to go dust off FF. This is extremely deterring.

  12. personal avatar Angela
    Stroll on over and visit Angela
    March 1, 2007

    Thanks for sharing this, I’m very excited about it. I do have a question though… if you use the home.php file, can you still use the main index template (index.php)? Or are you exchanging index.php for home.php??

  13. personal avatar yoram
    Stroll on over and visit yoram
    March 1, 2007

    this is great — now my day will follow your instructions :)

  14. personal avatar Jim Westergren
    Stroll on over and visit Jim Westergren
    March 1, 2007

    Thanks a lot man. Will study this in detail a bit later :)

  15. personal avatar Samir
    Stroll on over and visit Samir
    March 1, 2007

    Chris,

    This is very useful. Thank you very much.

    Question for you: Can I create a new page, name it feeds.php or news.php and then have link in navigation bar to it using K2 theme? This way news feeds page could nicely integrate into WP K2 theme and I still could have my index.php as it is.

    Thank you in advance!

    Samir

  16. personal avatar Solitario
    Stroll on over and visit Solitario
    March 1, 2007

    Complimenti per la grafica!

  17. personal avatar moshu
    Stroll on over and visit moshu
    March 1, 2007

    On the testbed (beside a huge error message) nothing could be seen of what you promised in the article :)

Pingbacks & Trackbacks

  1. MacManX.com » Blog Archive » Blogroll Dive: 6/13/05 » [...] ory of Tuva, the science behind their throat singing, and legend of the Horse Head Fiddle. Chris shares more of the secrets behind creating WordPress themes. Tom reports the success of [...]
  2. davidbisset.com » Secrets of WordPress Theming » [...] Part 1, Part 2, and Part 3. [ via ] Leave a Comment [...]
  3. SonicChicken weblog » [...] Special thanks to Chris J. Davis for putting together the info in the first place! No Comments so far Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> [...]
  4. O Weblog! » Tutorial on Wordpress Theming » [...] Cheers! Secrets of WP Theming: Part 1 Secrets of WP Theming: Part 2 Secrets of WP Theming: Part 3 [...]
  5. Time Being » Blog Archive » WordPress Themes and a Quick Business Update » [...] This more for my own memory more than anything that most sane folks would be interested in. As this blog is in dire need of a style overhaul, this excellent WordPress Theming Tutorial, Parts [1] [2] [3], should come in handy. [...]
  6. Testbed » Blog Archive » Theme Resources » [...] Secrets of WP Theming Pt 3 [...]
  7. davidhay » Blog Archive » Hacking Wordpress Modules » [...] After having seen Chris J Davis’ guides to Wordpress theming, I thought that having found a cool little gubbin I ought to share it too. [...]
  8. FOUND&LOST » [...] [...]
  9. Secrets of WP Theming at ericsetiawan.com » [...] Chris J Davis wrote about the secrets of Wordpress theming. He divided it into three sections. Part 1 is about the custom templates which you can use to make your own static pages on Wordpress, like the archive page. Part 2 covers the *per category template*. Part 3 is about the use of home.php which after he pointed it out I feel it can be a powerful tools. On his example page, it can be used as a summary page (or the cool words *rss aggregation*) of your page which will be loaded before the index.php. Actually you can find all this piece of info at the codex but I think Chris has put it all together nicely. Now that he share it with us means this is not secrets anymore, right? :) [...]
  10. Display RSS Feeds in WordPress - exoskeleton » [...] Awesome! I just discovered a great tutorial that shows you how to set up a WordPress blog so that it can pull in RSS feeds from other sites - or other blogs you may be running on the same site. Apparently WP already has some Magpie RSS parsing capabilities installed - which is nice because I was under the impression you had to go out and install all that crap yourself. [...]
  11. Secrets of WP Theming: Part 3 at BureauBlumenberg » [...] 31st, 2005 in design, css/xhtml. if you need to know how to customize your wordpress site: | Secrets of WP Theming: Part 3 well done how-to — btw. he (Chris J. Davis) is one of the k2 creators. // Used for showingand hiding user information in the comment form function ShowUtils() { document.getElementById("authorinfo").style.display = ""; document.getElementById("showinfo").style.display = "none"; document.getElementById("hideinfo").style.display = ""; } function HideUtils() { document.getElementById("authorinfo").style.display = "none"; document.getElementById("showinfo").style.display = ""; document.getElementById("hideinfo").style.display = "none"; } Search [...]
  12. Wordpress 2.0 Theme Design Competition - Alex Allied » [...] Secrets of WP Theming Part 1 | Part 2 | Part 3. [...]
  13. WordPress theme park » Secrets of WP Theming » [...] Links: Secrets of WP Theming: Part 1 Secrets of WP Theming: Part 2 Secrets of WP Theming: Part 3 [...]
  14. Stupid Wordpress Tricks » Blog Archive » Secrets of Wordpress Theming » [...] Part 1: Custom TemplatesPart 2: Per-Category TemplatesPart 3: Customized Home Page (home.php) [...]
  15. toehold » Panacea? Unfortunately Not » [...] Secrets of WP Theming - part 1 Secrets of WP Theming - part 2 Secrets of WP Theming - part 3 [...]
  16. Diana’s Writing Blog » links for 2006-11-05 » [...] Secrets of WP Theming: Part 3 - Sillyness Spelled Wrong Intentionally (tags: wordpress) [...]
  17. Best Wordpress Beginner Articles and Worthy Plugins - Roundup » ..._trackPageview('/outbound/article/www.chrisjdavis.org');">Secerts Of WordPress Theming - Part 2 Secerts Of WordPress Theming - Part 3 ...

Leave a Reply