Confessions of a Six Figure Professional Blogger

Creating a Custom Blog Homepage [Wordpress]

April 14, 2009 | Feature, Webmaster Crap

Wordpress is extremely customizable and that’s one of the beauties of it. When you are able to master customizing blog themes for Wordpress, you can turn the platform into almost anything.

The problem is that most people don’t know how to do it. They look at a blog theme and see nothing but cryptic HTML and PHP code. Sound familiar?

Last week, I was told about the confusions a person was having on creating a custom blog homepage (like what I have here on DavidRisley.com). They couldn’t find anything on the net to show them how to do it. He was trying to use a Wordpress page to do it. He tried using plug-ins. Nothing worked to create a dynamic homepage.

It is actually much easier than any of that. I’ll show you how.

Create a Custom Homepage File in Your WP Theme

If you view the template hierarchy for Wordpress, you’ll see the order for which it checks for files in your theme. In the image on that page, you’ll see home.php. It will check for this file and, if it doesn’t find it, it will default to your index.php file.

So, go into the folder where your theme is located. It will be in /wp-content/themes/[name of theme]/. You will see an index.php file there. Now, you might find a home.php file in there. THAT is your homepage template. If your theme doesn’t have a home.php file, just create one. Create a copy of your index.php file and simply save it as home.php. From there, the file will need to be modified.

I hope I haven’t lost you. :)

Essentially, any theme changes you make to the home.php file will only affect your blog’s homepage. So, within this file, we will make any changes to make your blog homepage look like you want it to look.

Showing a Feature Post

On the homepage of this blog, I show a single feature post for the day at the top. How did I do that?

I created a category called “Feature”. Whenever a post is assigned to this category, it is made into a feature. I also assign the post to whatever other categories are relevant.

Here is the code to output the feature:

<?php $my_query = new WP_Query(’category_name=feature&showposts=1′); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
    <h6>Today’s Feature Post</h6>
    <div class="clearboth"></div>       
    <div class="comm"><span><?php comments_popup_link(’0′, ‘1′, ‘% ‘); ?></span></div>
    <h3 class="h1" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <div class="post-meta-top">
    <div class="date"><span><strong><?php the_time(’F j, Y’); ?></strong></span></div>
    </div>
    <div class="clearboth"></div>

    <?php the_content(’<br />Read the rest of this entry &raquo;’); ?>
    <?php endwhile; ?>

Now, the HTML in this and the layout of the theme tags you will need to edit to suit your own design. But, what it is doing is running a query to fetch a single post (the latest one) from the “feature” category. It then just runs the loop to display it. Also note that I am using the_content() to show the text of the post, and it stops wherever I use the “read more” break (which is part of the Wordpress editor). If I forgot to include that, it would show the entire post on the homepage and look like crap. If you don’t want to mess with this, you can just use the excerpt.

Showing the Latest Posts

Beneath the feature post, I show the latest posts down the left side of the homepage. I will leave it up to you to format this stuff and put it into a column layout, but this is how you show the latest posts:

<?php
    query_posts("cat=-259");
    while (have_posts()) : the_post();
    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
    <h3 class="h1" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <div class="post-meta-top">
    <div class="date"><span><strong><?php the_time(’F j, Y’); ?></strong></span> | <?php comments_popup_link(’0 Comments’, ‘1 Comment’, ‘% Comments’); ?></div>
    </div>
    <div class="clearboth"></div>
    <?php the_excerpt(’<br />Read the rest of this entry &raquo;’); ?>   
    <?php endwhile; ?>

So, what’s going on here? First I’m running a query for all posts that are NOT in the category with the ID of 259. In my particular case, this is the Flip Tip videos category. Since I want to exclude those posts from that listing, I do so here. Then, I just run the loop again.

Now, you will also see that I have an IF statement in there which will exempt the post from displaying if the ID is $do_not_duplicate. This variable was defined with the feature post (see above) and the purpose of this is so that my daily feature post is not listed twice.

Showing The Videos

On my custom homepage, I am also listing the latest videos. Above, I exempted category #259. In this case, I want to exclusively list category 259. So, the query to start off the loop would be:

<?php query_posts("cat=259&posts_per_page=5"); ?>

The only addition here is that I am limiting the list to only the latest 5 videos.

Feel Free To Cheat

I’m not going to be able to turn you into an expert Wordpress theme hacker in this post, however hopefully I’ve given you a good start.

Remember, often you can swipe code from other files in your theme. You will see “the loop” used in multiple Wordpress files. In my custom version, I’m simply duplicating the loop and starting it off with my own criteria and customizing the appearance.

You can also download free WP themes for the only purpose of looking at the code to see how they did things. Then, just copy it to your own theme. This is how we learn.

If you enjoyed this article, you might also like...

  1. How To Use a Custom Page Template In Wordpress
  2. How I Converted a Non-Blog Site to Wordpress
  3. How To Replace Your Wordpress Search With Google
  4. Using Gravatars On Your Blog – Why And How
  5. Using Wordpress to Podcast and Video Blog

Learn The Real Story On Blogging As a Business...

  • Get immediate FREE access to the Six Figure Blogger Blueprint
  • Get exclusive stuff NOT available on this blog.
  • Get the latest updates from the weird Risley man who runs this site.

Enter email:

  • Good post. Just figuring out how to have a page customized as photoblog instead of my normal theme.
  • To comment further, I agree with you (upon reading this post a second time) on the concept of taking other themes apart to learn how they work. To me, it's the quickest way to figure something out...look at something that's doing what you want to do and just take the part you need ;) Thing is, you're still always going to have to use your brain a little bit to get all the pieces to work together.
  • I've been timid on trying to do that, but now it makes more sense, I'll be sure to copy my file first in notepad, so if there are any screw ups, (not the 1st time) there will be no worries.
    Thanks David!
  • Man, thanks for posting this...it's good to have a simple breakdown of this. It's fairly easy to cut and paste together a custom page template to do this, but I've been wanting to do a custom home page for a while now, and it's just BORING to do! But I think it would make for some good results...maybe I need to get on this :)
  • Another helpful post which has given me a few more more pieces of the WP jigsaw.

    By the way, when I am trying to understand the intricacies of a piece of code, I find it helpful to paste the code into a text editor so that I can then move the tags, etc onto new lines and tabs, so that I can see more clearly where phrases open and close and how they relate to each other. I sometimes even use a bit of colour coding to separate things out a little more.

    My university teacher called this sort of formatting "pretty printing". I have used the idea all over the place, ever since, in order to enhance the visual clarity when the written words and ideas are becoming too complex.

    In this case, I printed out the formatted PHP from your post and then went over to your home page and crossed matched the two documents.

    It's a bit like doing the crossword or sudoku puzzles. Oh, what great joy when I finally get it!

    I use a little freebie formatting HTML text editor called TextPad, which lays HTML code out with tabs, etc.
  • While I don't have this setup on any of my sites, I knew how to do this. This post is really for entertainment's sake as I've been a reader here for a few months now and have NOT been to the main page of the site.

    Through the magic of RSS feeds, related posts, and the search bar I haven't used the most basic front of your site. I don't think I've ever done that on a site until now *laughs*
  • I think using hooks is the easiest way to customize a theme.
  • Thanks bro! I'll let you know how it turns out.
  • Cool post; the home.php vs. index.php hierarchy can come in very handy, as you've so competently shown.

    Just about everything I've learned about modifying Wordpress I've learned from hacking different themes; poking, prodding, and picking apart to see what does what. I'd recommend setting up a dummy blog for experimentation. That way you can avoid the risk of bringing down your entire (real) blog just because you misplaced a bit of code.
blog comments powered by Disqus