Implementing The Real Ultimte Front Page

Previously, I briefly illustrated how using a home.php file can allow you to build a custom layout to your WordPress blog’s home page. However, I didn’t really document it well enough for the casual WP user to implement by himself. For the unknowing of my readers, here is a guide to using my (really Rudd-O’s) discovery on your site.

If you already understand the concepts behind this, skip to the download link.

Let’s take a look at Rudd-O’s code again. Try to figure out what it’s doing:

1: <?php $homepage = get_settings('siteurl')."/home/";
2: global $wp;
3: $wp_received_argument = false;
4: foreach ($wp->query_vars as $k=>$v) if ($v) $wp_received_argument = true;
5: if ($wp_received_argument) require(TEMPLATEPATH . “/index.php”);
6: else { wp_redirect($homepage);
7: exit(); } ?>

Line 1 gets the address of the blog and adds what we would use to access a static page with a slug of ‘home’.

Line 2 brings in the $wp object, which allows us to figure out if there are any parameters in the URL that we need to work with.

Line 3 sets a simple boolean value of ‘false’ to a variable that we will use to determine if we have recieved any parameters.

Line 4 looks at the $wp object and asks it if there are any parameters. If it finds any, then we set $wp_received_argument to ‘true’, and we will use that in the next line.

Line 5 is where the magic happens. If we have parameters, like the page number variable, then we will load the regular index.php template which will show you the normal blog page. Otherwise, we will continue to line 6 and 7.

Line 6 will run if we don’t have any parameters, which means that we want to show our special home page. We will send a redirect to the browser telling it to go to our static page. Then we quit running this page, since there is nothing more to do anyway.

This is a relatively simple concept. Rudd-O mentioned in his original article that one should add a link to /[wp-root]/page/1 somewhere, like in the header along with the page links for example. What that will do is give WordPress the parameters we need to have the blog listing shown. If you need help adding this link, leave a comment below.

Here’s the fun part. My hacks to Rudd-O’s code will replace the redirection of the original code. All HTML and PHP content is placed within home.php. Now that we are including our content in a straight-out PHP file, and not going back to the database to retrieve a page (via the WP Loop), you can even add a real mini-loop to your front page! You can do whatever layout you want with home.php now. (See my home page, which has the mini-loop, a list of categories, and my Flickr photostream, for an example).

Now that we understand what Rudd-O’s code accomplishes, it’s up to you to use your imagination. Until recently, my email that came upon request included some basic instructions, which read something like this:

Attached is a well-commented version of home.php. Use it to set up your custom layout, but don’t upload it yet.

In order for this to look and function properly on your site, you will need to adapt it to your theme. You will have to make the portion of home.php before my table-based layout look like the code in index.php from the top of the file to just before the loop, and from just past the loop until the end of the template. Remember to close the else statement with a right curly bracket.

Also, you will need to add the /page/1 (or ?paged=1 if you aren’t using pretty permalinks) link to the page list in header.php, which should include code to dynamically change the highlighting of the Home and Blog links.

For those basically familiar with PHP, HTML and some of the simpler CSS concepts, adapting the sample home.php file I am providing should be somewhat easy. If you don’t have such keen skills, you can review the W3Schools’ tutorials on HTML and PHP for a bit of help. (Sorry folks, these days I can’t handle doing the editing for everyone, although I wish I could.)

If you are convinced that you want a home page with a custom layout for your WordPress blog, I have provided an older version of my layout, plus all of the associated logic basedon Rudd-O’s code. As noted above, you will have and want to do lots of tweaking with it to make it look good, so grab the download below, and hack away.

 Download sample home.php layout »

Share This