Creating a Page for Single Posts

Topics Covered in This WordPress Tutorial:

Creating a dedicated post template, implementing a robust comment system, and customizing comment styling with professional CSS techniques

Exercise Preview

Exercise Overview

Currently, clicking a blog post title navigates users to a dedicated page, but the commenting functionality remains invisible and inaccessible. This represents a critical gap in user engagement—comments are the lifeblood of dynamic websites and community building. By default, WordPress relies on index.php as a catch-all template for every page type unless you provide specialized alternatives. The reserved template filename for individual post pages is single.php, and creating this template is essential for any professional WordPress theme.

Understanding WordPress's template hierarchy is fundamental to theme development. When a user visits a single post, WordPress searches for single.php first, then falls back to index.php if no dedicated template exists. This exercise will teach you to harness this hierarchy to create more targeted, feature-rich user experiences.

Creating the Single.php Template

The most efficient approach is to duplicate index.php and modify it for single-post functionality. This method ensures consistency while allowing for post-specific features like comments and enhanced metadata display.

1. In your preferred code editor, open index.php from the mrpTheme folder if it isn't already accessible.

2. Save the file as single.php in the mrpTheme folder located at:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
   • Windows: C: > xampp > htdocs > mrp > wp-content > themes
3. Single post pages require different functionality than archive pages. Remove the following elements that are inappropriate for individual post viewing:
   • <h1> title (not needed on single posts)
   • <a> link around the <h2> title (preserve the title itself)
   • Comments_popup_link() function call
   • #postsNavLink div and all nested content
   • Else statement and fallback content
   • "No posts found" paragraph

4. Your streamlined loop should now resemble this clean, focused structure:

   <?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. Now we'll implement the commenting system—the primary reason for creating this dedicated template. Add the comment functionality within your post loop:

   <?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: The comments_template() function automatically generates both the comment submission form and the complete list of existing comments, including threading and reply functionality.

6. Save the file to activate your new single post template.

Inspecting and Styling the Comments System

WordPress generates a sophisticated but unstyled comment structure. To create professional-looking comments, we need to understand the generated HTML structure first. Chrome's Developer Tools will reveal the classes and IDs we need to target with our CSS.

1. Launch Chrome and navigate to:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

2. Click the Hello world! post title to view your new single post template in action.

3. Ctrl–click (Mac) or Right–click (Windows) to the left of any comment's bullet point, and select Inspect from the context menu.

   

4. In the Elements panel, locate the <ol class="commentlist"> element. Hover over it to visualize the default padding and margins that WordPress applies.

   

   The excessive padding and margins create awkward spacing. We'll need to reset the .commentlist styling. Next, let's identify how to eliminate the unwanted bullet points.

5. Ctrl–click (Mac) or Right–click (Windows) directly on the bullet point and select Inspect.

   The Elements panel should highlight a <li> element.

6. In the Styles panel on the right, you'll notice that existing li styles are adding a background image bullet and padding. These inherited styles need to be overridden for comment list items specifically.

   

7. Keep Chrome open for testing and switch to your code editor to implement the fixes.

8. Open style.css from the mrpTheme folder.

9. Locate the bottom of the file, after the .prevPage rule (around line 447), and add these comment-specific style overrides. If the .prevPage rule doesn't exist, add the styles after .imgLeft around line 436:

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

10. Save the file to apply your changes.

11. Return to Chrome (still viewing the Hello world! post) and reload the page to see your styling improvements take effect.

Advanced Comment Styling (Bonus Section)

With the foundation in place, let's create a polished, professional comment system that enhances user experience and encourages engagement.

1. If Chrome is closed, reopen it and navigate to:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

2. Click the Hello world! post to access the comments section.

3. Add a test comment to ensure you have multiple comments for styling reference.

4. Ctrl–click (Mac) or Right–click (Windows) on any comment's main text and select Inspect.

5. Observe that each complete comment is wrapped in a div with the class comment-body. This is our primary styling target.

   

6. Above the comment paragraph, hover over the <div class="comment-meta commentmetadata"> element. This container holds the comment timestamp and author information.

7. Below the comment paragraph, examine the <div class="reply"> element, which contains the reply link for threaded conversations.

8. Switch back to your code editor to implement comprehensive comment styling.

9. Open style.css from the mrpTheme folder.

10. Begin with the main comment container. After the .commentlist li rule, add this foundational styling (around line 455):

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

11. Style the comment metadata for improved readability. After the .comment-body rule, add:

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

12. Position the reply link for intuitive user interaction. After the .comment-meta rule, add:

    .reply {
       float: right;
    }

13. Adjust comment text sizing for optimal readability. After the .reply rule, add:

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

14. Save the file and return to Chrome to preview your enhanced comment styling.

15. Reload the page to view the improvements. You'll notice the floated Reply link slightly collapses its container—a common CSS issue we'll resolve next.

16. Return to your code editor and modify the .comment-body style around line 455 by adding the clearfix solution:

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

17. Save the file and reload Chrome to confirm the layout fix.

18. Close Developer Tools and test your comments in Firefox to ensure cross-browser compatibility.

19. In Firefox, scroll to the comment form and notice that the large textarea extends beyond its container into the sidebar area—a responsive design issue that needs addressing.

20. Ctrl–click (Mac) or Right–click (Windows) on the comment textarea and select Inspect Element.

21. Note that the textarea has an ID of comment and is nested within a form with ID commentform. This parent-child relationship provides the specificity we need for targeted styling.

22. Switch to your code editor and add the final responsive fix after the .comment-body p rule (around line 473):

    #commentform #comment {
       width: 100%;
    }

23. Save the file and reload Firefox to verify that the textarea now respects its container boundaries, creating a polished, professional appearance.