Creating Blog Templates in WordPress

In this post, we’re going to set up the template files necessary to make a fully functional blog section on a WordPress site. We’ll also configure the admin area to allow for what we’d like to happen. This isn’t complicated, but there are a few areas that need to be covered. Our goal here is to create templates for the blog homepage, the blog posts themselves as well as a blog archive page.

Setting Up Our Blog Home Page Template

If you take a look at the WordPress hierarchy, you’ll see that, in order for us to create a template for our blog index page, we’ll need to name it “home.php.” This is what’s required for consistency with the WordPress naming convention. By naming our file home.php, we’re telling WordPress what template we’d like to use for our purposes.

Once we’ve got our file named and saved in our theme directory (it can be blank at this point), we can go ahead and adjust a few settings in the admin area of our install. The first thing we need to do is to actually create a page named “Blog” in the “Pages” section of the admin. By doing this, it’ll give us something to choose from next.

In this next step, we’re going to tell WordPress which page it should use for our blog homepage. Basically, this is sort of a phantom page that we need to point to that will use our home.php template file we just created. To do this, we can either go into the “Settings > Reading” area in the admin and choose our page under the “Front Page Displays” area or we can use the WordPress Customizer. If you decide to use the customizer, navigate to the “Appearance > Customize > Static Front Page” section and click around a bit. You’ll see exactly what to do. Personally, I’d get used to using the customizer if I were you, because that seems to be where WordPress is heading for many of these types of settings.

Lastly, we need to add our newly created “Blog” page to our menu. To do this, navigate to “Appearance > Menus” and add the page to the appropriate menu.

Basically, what we did here, if we go backwards, was to create a new link in our menu that will bring us to our blog section. In order for something to be in that section, we needed to create a page called “Blog.” In order for the “Blog” page to be considered as the home page for our section, we had to tell WordPress about it in the customizer. Lastly, in order for us to see the page as we’d like to see it, we created a template file called, “home.php.” Next up, we’ll code the home.php file.

Adding Code To Our Blog Home Page Template

Coding our blog home page is much like coding other WordPress template pages. There may be a few more areas you’d like to customize, but by and large, it’ll look familiar if you’ve read some of my other posts.

I’m going to show you some code below that you may want to include on a home page. I’ve stripped out all HTML (that’ll be up to you), so what we’re left with is only PHP. Below the code, I’ll explain what’s going on any what each piece of code does. I’ll also take advantage of commenting some of the code.

// INCLUDE HEADER FILE
<?php get_header(); ?>

  // BEGIN WHILE LOOP AND IF STATEMENT
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    // ADD CLASS FOR CSS
    <?php post_class('post'); ?>

    // DISPLAY POST TITLE WITH LINK TO POST
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

    // DISPLAY EXCERPT OF POST TEXT AND STRIP ALL HTML FROM IT
    <?php echo strip_tags( get_the_excerpt() ); ?>

    // DISPLAY AVATAR OF AUTHOR
    <?php echo get_avatar( get_the_author_meta( 'ID' ), 24 ); ?>

    // LINK TO AUTHOR POST PAGE
    <?php the_author_posts_link(); ?>

    // LINK TO CATEGORY PAGE
    <?php the_category( ', ' ); ?>

    // DISPLAY DATE POST WAS WRITTEN
    <?php the_time('F j, Y'); ?>

    // IF POST THUMBNAIL, DISPLAY IT AS LARGE
    <?php if( get_the_post_thumbnail() ) : ?>
      <?php the_post_thumbnail('large'); ?>
    <?php endif; ?>

    // LINK TO NEXT POSTS
    <?php next_posts_link( 'Older posts' ); ?>

    // LINK TO PREVIOUS POSTS
    <?php previous_posts_link( 'Newer posts' ); ?>

  // END WHILE LOOP
  <?php endwhile; else : ?>

    // IN ENGLISH, NO POSTS
    <?php _e( 'Sorry, no pages found.' ); ?>

  // END IF STATEMENT
  <?php endif; ?>

// INCLUDE SIDEBAR
<?php get_sidebar(); ?>

// INCLUDE FOOTER FILE
<?php get_footer(); ?>

If you look at the top and the bottom of the code example above, you’ll see where I’ve “included” the header and footer files. To do this, I used the “get_header” and “get_footer” functions. Similar to these functions is the “get_sidebar” function. Since I already covered this in a previous post, if you’re interested in how these functions work, please read that post.

After we include these template file, we’ll begin our if statement and while loop. Basically, we’re telling WordPress, “if” we have posts, do this. “If” we don’t, do something else. We’re also telling it, “while” we have posts, keep looping through them until we don’t have anymore. You can see where I commented the relevant areas of the code for this. I wrote about the WordPress loop in a previous post as well, so if you’re interested, you know what to do.

Moving along, you can see the “post_class” function. This is simply to add more granular control over our classes for CSS. This is a styling issue. You can read more about this function here.

On the next line, we’ve got the “the_permalink” and “the_title” functions. The the_title function displays the title of the post and the way we’ve got it set up, the the_permalink function links the title to the post page itself.

After that, we’re using the “the_excerpt” function to display an excerpt of our post content. There’s a bit of drama that comes with this function, so we’ve employed the use of the “get_the_excerpt” as well as the PHP “strip_tags” function, which strips HTML and PHP tags from a string. The reason we had to use these additional functions was because by default, WordPress sends out the excerpt formatted in paragraph tags. This can alter the text appearance, so it was necessary to clean it up and then re-format it inside our own HTML (not shown).

In the next line, the “get_avatar” function displays the avatar associated with the author’s email address.

If you’ve been on the internet within the past twenty years, you’ve certainly seen posts written by various authors on the same website. Many of these websites have links to author pages that filter all posts down to a specific author. In WordPress, the “the_author_posts_link” displays that link to the author page.

Similar to the previous function, the “the_category” function links to the specific category that the post belongs to.

If you were to write multiple posts on the same day and were to utilize the “the_date” function, the date would only display for the first post iteration inside the loop. To work around this, you can utilize the “the_time” function and format it to show the date.

The “the_post_thumbnail” displays the featured image for a specific post. As you can see, we use the “get_the_post_thumbnail” function in our “if” statement. Basically, we’re checking to see if a featured image exists and if it does, pull it out and display it. If an image doesn’t exist (no string is returned), move right on by.

The next few lines use the “previous_posts_link” and the “next_posts_link” to link to pages that hold previous posts and next posts.

Adding Code To Our Single Post Page Template

To work with a generic single blog post template file, we’re going to need to create it and name it “single.php.” This will tell WordPress that we want this particular template to be use to display our single post posts.

In the code example below, I’m going to do the same thing as I did above. Luckily, there won’t be nearly as much writing as before because, as you might have noticed, much of the template code is identical or similar to what we used above. Only a few things have been changed and I’ll go over those areas below.

<?php get_header(); ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <?php the_title(); ?>
    <?php echo get_avatar( get_the_author_meta( 'ID' ), 24 ); ?>
    <?php the_author_posts_link(); ?>
    <?php the_category( ', ' ); ?>
    <?php the_time('F j, Y'); ?>
    <?php if( get_the_post_thumbnail() ) : ?>
      <?php the_post_thumbnail('large'); ?>
    <?php endif; ?>

    // DISPLAY FULL POST CONTENT 
    <?php the_content(); ?>

    // DISPLAY COMMENT SECTION
    <?php comments_template(); ?>
    
    <?php endwhile; else : ?>
      <?php _e( 'Sorry, no posts found.' ); ?>
  <?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

As you can see, we’ve removed the_excerpt and instead, included a function called, “the_content” below the featured image (if there is one). Most simply put, this function will display the content of a blog post.

After the post content, you can see that we’ve added a new function, called, “comments_template.” This functions loads the comments template inside either a single post or a single page. It’s the comment sections that we’ll cover next.

Reviewing the Comment Template

As you can see in the previous section, we’ve already added the code to include our comment section. For the average person, this is all you would need to do. Since comment templates are sort of complex, we’re not going to get into their actual code. I can tell you though, if you did want to add your own comment template, you can do so by creating a file called “comments.php” and WordPress will pull that template in, instead of its default template. You would do this if you were creating a plugin or a custom comment section or something like that.

Adding Code To Our Archive Template

If you take a look at the WordPress hierarchy, you’ll see that the “archive.php” template is used for a wide variety of pages, including the author, category, date and tag archives. It’s a nice catch-all file for handling very similar pages.

The archive template is actually very similar to the “home.php” file that we created earlier. So similar, in fact, all we need to so is add one function to it and call it a day.

The way we’ll do this is to create a file named “archive.php” and copy the contents of “home.php” into it. Directly above the loop, we’ll add this code:

<?php wp_title(''); ?>

Again, you’ll need to format the “wp_title” function the way you see fit. What this code will give you is the title of the page you’re on. So if you’re looking at an author page for “Jay Gaulard,” you’ll see “Jay Gaulard” written above the posts. This is true for dates, categories and tags as well.

Now, just to let you know, if you were to amend this code with adjacent text like this:

<?php wp_title(''); ?> Blog Posts

You may have a more descriptive title.

——

I’m going to stop here. I hope I’ve given you some good information in this post. I know it’s helped me immensely by writing it out. If you have comments or questions, please leave them below. Also, if you’re interested in more posts that cover WordPress template files or something similar, be sure to check out my WordPress category.