Using WordPress Template Heirarchy to Create a Custom Blog Page

The custom theme being used by my client did not support  a custom blog page and separate static home page. Luckily the solution to this problem is easily solved by utilizing the WordPress template heirarchy. As many of you WordPress affictionados already know WordPress makes use of a template heirarchy in order to decide how it displays your pages and posts. In the case of displaying your posts on a custom blog page WordPress will first look for the home.php template. If it doesn’t find it then it will default to using your index.php. In my particular case the theme lacked a home.php and the index.php was not coded to query posts.

The following tutorial will walk you through the steps of creating a custom home.php template and using that template to display your sites most recent post.

How to Create a Custom Home.php Template

  1. Navigate to your wp-content>themes folder.
  2. If your site already makes use of a child theme open up the child theme folder.If you don’t have a child theme you should create one using the steps found here: http://codex.wordpress.org/Child_Themes. This is a best practice for making any custom changes to your current theme and will future proof your theme in the event it is updated.
  3. If you already have a child theme check to see if it already has a home.php. If it doesn’t go a head and create one.
  4. Next, copy the code from your existing index.php file directly into the home.php file. This is the quickest way to ensure that the original HTML structure of your theme is preserved in your new custom blog page.
  5. Once you have copied over your index.php code to your home.php replace the old prexisting query with one that is able to query posts. Here is a break down of the basic code you will need to display posts (minus the HTML and CSS).

1. Use query_posts to alter the output of the loop. The following will display the 5 most recent posts from your blog.

 <?php query_posts( 'posts_per_page=5' );?>
<?php $more = 0 ?>

2. Intialilze the while loop which will query the recent posts from WordPress.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

3. Add the code required to display the post information. The code below is a basic example which will display the title of the post, the date and the main post content respectively.

<?php the_title(); ?><br/><?php echo get_the_date(); ?> <br/><?php the_content(); ?>

4. If you plan to have comments supported you will need to add the call to the comments template.

<?php comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Comments are off for this post');

5. Finally, close the loop off.

<?php endwhile; else: ?> <?php endif; ?>

The resulting code all together looks like this:

<?php query_posts( 'posts_per_page=5' );?>
<?php $more = 0 ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_title(); ?><?php echo get_the_date(); ?>

<?php the_content(); ?>
<?php  comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Comments are off for this post');?>
<?php endwhile; else: ?> <?php endif; ?>

Feel free to customize the HTML and CSS of the home.php file since your index.php will not be affected by this.

Display a Static Home Page & Custom Blog Page

Once you create your home.php template WordPress will automatically use this file to display your blog posts. However a simple configuration in the WP backend will need to made first. Follow these steps to enable your home.php template to display your recent posts.

  1. Login to your WP backend.
  2. Create a new page. Make sure the template that the new page is using is set to default. Also do not place any content on this page. It should remain blankl.
  3. Name the page something that makes sense to you like “blog”.
  4. Next navigate to: Administration > Settings > Reading panel.
  5. Set  “Front page displays” to “a static page”. Choose a page that you want to use to display your homepage content from the drop down.
  6. In the drop down menu for “Posts page” select the page you just created, in this case “blog”.
  7. Save your changes and navigate to the front end of the site. The blog page will now display your recent posts using your home.php template.