Creating a Page for Single Posts

Topics covered in this WordPress tutorial:

Making the post template, Adding a comment form, Customizing the comments’ CSS

Exercise Preview

Exercise Overview

Right now, when someone clicks a blog post title, it brings them to a dedicated page for that post, but we can’t see or leave comments. By default, WordPress uses index.php for every page, unless you provide it with other page templates. The reserved template filename for a single post is single.php, which is what we’ll create in this exercise.

Creating single.php

We want single.php to be very similar to the index.php page, so it will be best to make a duplicate.

1. In a code editor, open index.php from the mrpTheme folder if it isn’t already open.

2. Save the file as single.php into the mrpTheme folder located here:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
   • Windows: C: > xampp > htdocs > mrp > wp-content > themes
3. This page doesn’t need everything we created in index.php. Delete the following:
   • <h1> title
   • <a> link around the <h2> title (but leave the title)
   • comments_popup_link()
   • #postsNavLink div (and everything inside)
   • else statement
   • no posts found paragraph

4. When finished, you should be left with a fairly simple loop, as shown below:

   <?php get_header(); ?>
      <div id="primary">
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
            <p class="entry-meta"><?php the_time( 'F j, Y' ); ?><?php the_tags( ' - Tags: ' ); ?></p>
         <?php endwhile; ?>
         <?php endif; ?>
      </div><!-- end primary -->
      <?php get_sidebar(); ?>
   <?php get_footer(); ?>
   

5. The main reason why we wanted a custom post page is for comments. Add the following function and wrapper div to pull in the comment form:

   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <h2><?php the_title(); ?></h2>
      <?php the_content(); ?>
      <p class="entry-meta"><?php the_time( 'F j, Y' ); ?><?php the_tags( ' - Tags: ' ); ?></p>
      <div id="commentsSection"><?php comments_template(); ?></div>
   <?php endwhile; ?>
   <?php endif; ?>
   

   NOTE: This will output the default comment section, with a submission form and the list of comments.

6. Save the file.

Viewing & Styling the Comments

This is the default comments template, and we don’t have any styles for it. Since we can’t see the code until the page renders, we will use Chrome’s Developer Tools to inspect it to see what our styles should target.

1. Open up Chrome and go to:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

2. Click the Hello world! post to take a look at the comments template.

3. Ctrl–click (Mac) or Right–click (Windows) to the left of the comment’s bullet, and choose Inspect.

   

4. In the left-hand panel, the ordered list <ol class="commentlist"> should be highlighted. Hover over it to see the padding and margins highlighted above.

   

   OK, we need to get rid of padding and margins on the .commentlist; we’ll remember that. Let’s figure out how to get rid of the bullet.

5. Ctrl–click (Mac) or Right–click (Windows) on the bullet itself and choose Inspect.

   In the left-hand panel, a list item <li> should be highlighted.

6. In the CSS section on the right, notice that we have a general li style that adds a bullet background image and some padding. That’s what we need to override.

   

7. Let’s go make those changes. Leave Chrome open and switch to your code editor.

8. Open style.css from the mrpTheme folder.

9. At the very bottom, after the .prevPage rule (around line 447), add the following rules. (If you don’t have the .prevPage rule, add the new rules after .imgLeft around line 436):

   .commentlist {
      padding: 0px;
      margin: 0px;
   }
   
   .commentlist li {
      background-image: none;
      padding: 0px;
   }
   

10. Save the file.

11. Switch back to Chrome. It should still be open to the MRP site. If not, go there now and click the Hello world! title.

12. Reload the page to see the new styles. Awesome!

Bonus: Finishing the Comment Styling

If you have extra time, you can continue to style the comments.

1. If you closed Chrome, open it again and go to:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

2. Click the Hello world! post to see the comments.

3. Leave a new comment so that we have a couple to look at.

4. Ctrl–click (Mac) or Right–click (Windows) one of the comments’ text and choose Inspect.

5. Note that the entire comment is in a div with the class comment-body.

   

6. Above the paragraph, hover over the <div class="comment-meta commentmetadata">. Above, you can see that .comment-meta styles the date and time of the comment.

7. Below the paragraph, hover over the <div class="reply">. Above, you can see that .reply styles the reply link below the comment.

8. Let’s make styles for these. Switch back to your code editor.

9. Open style.css from the mrpTheme folder.

10. We’ll start with the comment-body div. We want some padding, a background color, and some space between comments. After the .commentlist li rule, add the following rule (around line 455):

    .comment-body {
       background-color: #f9f9f9;
       padding: 10px;
       margin-bottom: 10px;
    }
    

11. Next, we’ll style the comment time and date to be a little smaller. After the .comment-body rule, add the following rule:

    .comment-meta {
       font-size: 13px;
       font-style: italic;
       line-height: 15px;
       margin-bottom: 10px;
    }
    

12. We want the reply link in the right corner. After the .comment-meta rule, add the following bold code:

    .reply {
       float: right;
    }
    

13. The comment paragraphs need to be a little smaller too. After the .reply rule, add the following rule:

    .comment-body p {
       font-size: 13px;
    }
    

14. Save the file.

15. Switch back to Chrome and reload the page to get the new styles.

16. Excellent, with one small problem. The floated Reply link is collapsing the div a bit. Switch back to your code editor.

17. Edit the .comment-body style around line 455 by adding the following bold code:

    .comment-body {
       background-color: #f9f9f9;
       padding: 10px;
       margin-bottom: 10px;
       overflow: hidden;
    }
    

18. Save the file.

19. Switch back to Chrome and reload the page to get the new styles.

20. Close the Developer Tools console.

21. Preview the page in Firefox.

22. Scroll down to the bottom and notice that the large comment text field extends beyond its containing div into the sidebar. Let’s fix this.

23. Ctrl–click (Mac) or Right–click (Windows) the large text field, and choose Inspect.

24. Notice that the text field has an ID of comment and is inside a form that has an ID of commentform. This is how we will target our style.

25. Switch back to your code editor.

26. After the comment-body p rule, add the following rule (around line 473):

    #commentform #comment {
       width: 100%;
    }
    

27. Save the file.

28. Switch back to Firefox and reload the page to see that the text field no longer extends beyond its containing div. Sweet!