How to Create an Interior /blog/ Page That Mimics a Traditional WordPress Front Page

We got hung up recently trying to create an interior blog page (i.e., www.agreatsite.com/blog)  for a client’s design. This problem is more common now with full-featured templates and frameworks that employ sliders and carousels on the front page that are triggered by a template’s index.php file.

First, Create a Custom WordPress Page Template

First, you’ll need to create a custom WordPress page template. All WordPress templates have a page.php file as part of the default template–we simply want to vary that file a little bit. Make a copy of your page.php file and name it page-blog.php.

Next, you need to enter a few lines of code at the very top of your new php file:

<?php
/*
Template Name: Blog
*/
?>

The code above is a naming tag–the template name, in this case “Blog” will be the name that appears in the template selection box at the WordPress page edit window, which we’ll screenshot below.

The Code

Now, you can’t simply run the regular WordPress loop on our custom interior page, we are going to use the WordPress template tag get_posts to query our WordPress database and grab our posts. The following code accomplishes this:

$myposts = get_posts('');
foreach($myposts as $post) :
setup_postdata($post);
?>
  <div class="post-item">
    <div class="post-info">
      <h2 class="post-title">
      <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
      <?php the_title(); ?>
      </a>
      </h2>
      <p class="post-meta">Posted by <?php the_author(); ?></p>
    </div>
    <div class="post-content">
    <?php the_content(); ?>
    </div>
  </div>
<?php comments_template(); ?>
<?php endforeach; wp_reset_postdata(); ?>

For the purposes of illustration, a greatly simplified version of the preceding code, without any html markup, hrefs, author information, post date data, or comment section would be as follows:

$myposts = get_posts('');
foreach($myposts as $post) :
setup_postdata($post);
?>
 <?php the_title(); ?>
 <?php the_content(); ?>
<?php endforeach; wp_reset_postdata(); ?>

How it Works

So what’s happening here? Well, the heart of the whole process is get_posts–this template tag queries the WP database and gets our posts.

Next, the foreach construct processes each post in turn–thus we’ll have all our posts on our blog page.  The setup_postdata WordPress function, well, sets up our data so it’ll display properly (otherwise the_content may not display the text of our posts. Finally, the wp_reset_postdata restores the $post global variable.

Once you’ve created the file, you’ll obviously want to upload it to your template (theme) directory.

Setting Your Blog Page

Your next step is to simply set up your blog page within the WordPress dashboard. From the WP dashboard, go to Pages, then Add New and create a page with a title “Blog” (or whatever is suitable). Remember the custom template we created above under the heading First, Create a Custom WordPress Page Template? You should now see your custom template name appear under the “Template” pull-down in the Page Edit screen, as indicated in the pic below by the green arrow.

You don’t need to put any text in the text edit window, you just need a title–you won’t be displaying any page text here, you’ll be bypassing the specific text of this post and grabbing posts from the database.

Some Background on Why This Was Needed

Incidentally, framework and template designers that hijack WordPress’ index.php file to display a homepage slider, while requiring WordPress’ reading settings to be set to “Your latest posts” as shown in the screenshot below are doing a disservice to users (hence mandating this tutorial). The sounder practice is to code sliders and homepage features into a custom WordPress template.