Creating a Custom Blog Homepage In WordPress

Here’s how to make a custom homepage inside Wordpress. We’ll cover the easy way… and the geeky way.

Creating a Custom Blog Homepage In WordPress

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?

Many freebie WordPress themes have the stereotypical blog homepage. They show the latest posts in chronological order. That, however, is a seriously stupid homepage. There are much smarter things to be doing with your homepage.

So, the question is… how?

There are a couple ways to go about. One is much easier than the other, but I’ll show you the geeky way, too. 🙂

First, The Easy Way To Make A Custom Homepage

First, you create a new page in WordPress. Then, you simply tell WordPress to make that your homepage.

Go to Settings > Reading. On that screen, you will have your Front Page settings. You can show your latest posts if you’d like, but we’ve already established that that’s stupid. So, select a static page. Then, in the dropdown of pages, select the page you want to be your homepage.

Now, there’s a good chance that you might not be happy with the way that page looks. After all, if you’re using a standard WordPress theme, then the page templates are pretty basic and you’re going to find it hard to make a decent looking homepage yourself.

So, how can you make a homepage like mine?

It is actually fairly simple if you use a page builder such as Thrive Architect. My homepage was built exclusively in Thrive Architect. Zero custom coding, zero geekery. So, I designed the page the way I wanted it with Architect, then chose that page to be my front page.

Easy peasy.

But, now let’s cover the geeky (and somewhat old-school) way to do this…

The Geeky Way To Create A Custom Homepage

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. 🙂 I told you this was geekier.

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. And yes, you’ll need to hand-code what you want into this home.php file.

NOTE: What follows are some code snippets from an old version of this site from about 10 years ago. Back then, we had to hand-code things. Up above is how I do things now. But, I will leave these code snippets in place as an aid for the die-hard geeks. 🙂

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. At the time, 259 was the ID of a category of videos I did at the time. 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 was 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.

Whew! Man, That Was Weird. But…

This post was originally written in 2009. Back then, we did things the hard way because all the easy tools weren’t a reality yet. All that code above is from then. But, it worked. 🙂

But, things are easier these days. WordPress can select a homepage right in settings. Better yet, with tools like Thrive Architect, you can literally make your homepage look like any dang thing you want, without being confined by the limits of your theme.

About David Risley
David Risley is the founder of the Blog Marketing Academy, a 20-year veteran blogger and online entrepreneur. His focus? Building a reliable, recurring business around his "lifestyle" and the lives of his students. He has this weird obsession with traveling in his motorhome around the country with his wife and 2 kids. David also likes to talk about himself in the third person. In bios like this one. Read his full story.
  • Brigitte says:

    Thanks for actually giving the code on how to customize a wordpress homepage to show only the latest posts. I copied and pasted the code you give here into my worpress home page file (which I managed to create according to your instructions though it took me awhile…) but it comes up with a parse error, syntax error, unexpected T_string. I have googled this error and tried everything but can't make it work.
    Can anyone help?

  • Christian says:

    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.

  • Marc says:

    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!

  • Christian says:

    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 🙂

  • Wizard of Aus says:

    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.

  • Stuart Conover says:

    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*

  • Blog Expert says:

    I think using hooks is the easiest way to customize a theme.

  • JR Griggs says:

    Thanks bro! I’ll let you know how it turns out.

  • Chris says:

    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.

  • >
    2 Shares
    Share
    Tweet
    Share