Continuing with the Loop

Topics Covered in This WordPress Tutorial:

Displaying Post Time & Tags, Displaying Comments, Adding Page Navigation, Adding Fallback Content

Exercise Preview

Exercise Overview

Now that we've established the foundation of The Loop, it's time to enhance your posts with essential metadata that readers expect from professional blogs. In this exercise, we'll implement dynamic display of publication dates, tag systems, and comment counts—three critical elements that improve user experience and site navigation. These features transform a basic post display into a fully functional blog interface that encourages reader engagement and content discovery.

Creating the Loop

We'll start by adding temporal context to your posts. Displaying publication dates helps readers assess content freshness and creates a chronological narrative for your site.

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

2. Inside The Loop, locate the the_content() function around line 30 and add the time display immediately below it:

   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <?php the_content(); ?>
      <?php the_time(); ?>
   <?php endwhile; ?>
   <?php endif; ?>

3. Save the file and test your changes.

4. Open your browser and navigate to:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

5. Keep this browser tab open for quick testing as we iterate through code changes.

6. You'll notice the time displays in WordPress's default format (hours, minutes, AM/PM), which isn't ideal for blog posts. We need to format it properly and add appropriate styling to match our design system.

7. Return to your code editor and enhance the time display with proper formatting and CSS classes:

   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <?php the_content(); ?>
      <p class="entry-meta"><?php the_time( 'F j, Y' ); ?></p>
   <?php endwhile; ?>
   <?php endif; ?>

   The F j, Y parameter within the_time() uses PHP's date formatting: F displays the full month name, j shows the day without leading zeros, and Y provides the four-digit year. This creates reader-friendly dates like "March 15, 2026" instead of technical timestamps.

8. Save the file.

9. Return to your browser and refresh the page:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

   The date should now display in a clean, professional format with proper styling applied through the entry-meta class.

Adding & Displaying Post Tags

Tags serve as a lightweight taxonomy system, helping readers discover related content and improving your site's SEO. Let's implement a complete tagging system.

1. First, we need to add tags to our existing posts. Open a new browser tab and navigate to:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

2. Enter your credentials if prompted.

3. In the left sidebar, click Posts.

4. Click the Hello world! post title to enter the editor.

5. In the right sidebar, locate the Tags section and enter: cars, restoration

6. Click Add to apply the tags.

7. Click Update to save your changes.

8. We'll intentionally leave the second post untagged to demonstrate conditional display behavior. Return to your code editor.

9. In index.php, integrate tag display with the existing metadata around line 31:

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

10. Save the file.

11. Test the implementation in your browser:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

12. You'll notice that while tagged posts display properly, the untagged post shows a hanging dash—poor user experience. Let's implement conditional formatting.

13. Return to your code editor and refine the tag display logic by removing the manual dash and integrating it into the the_tags() function:

    <?php the_content(); ?>
       <p class="entry-meta"><?php the_time( 'F j, Y' ); ?><?php the_tags( '—Tags: ' ); ?>
    <?php endwhile; ?>

    This approach leverages WordPress's built-in conditional logic: the_tags() only outputs content when tags exist, and we're customizing the prefix to include our em dash and "Tags:" label.

14. Save the file.

15. Refresh your browser to see the improved behavior:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

    Tagged posts should display "—Tags: cars, restoration" while untagged posts show only the date, maintaining clean presentation.

16. Now let's add comment count display, a standard feature that encourages community engagement and signals content popularity.

17. In index.php, add the comment link function:

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
       <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
       <?php the_content(); ?>
       <p class="entry-meta"><?php the_time( 'F j, Y' ); ?><?php the_tags( '—Tags: ' ); ?></p>
       <?php comments_popup_link(); ?>
    <?php endwhile; ?>
    <?php endif; ?>

18. Save the file.

19. Test the comment display:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

    You should now see comment counts displayed below each post's metadata, creating a complete post information hierarchy.

Adding Post Navigation

Professional blogs require robust pagination to handle content growth gracefully. Without proper navigation, users become trapped on single pages, destroying the browsing experience. Let's implement a complete pagination system that scales with your content.

1. To properly test pagination, we need to simulate a multi-page scenario by temporarily limiting posts per page. Navigate to your admin dashboard:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

2. Enter your credentials if prompted.

3. In the left sidebar, hover over Settings and click Reading.

4. Next to Blog pages show at most, enter 1 to force pagination.

5. Click Save Changes.

6. Click the Monteith Restoration & Performance title link to view your site.

   Notice that only one post displays, but there's no way to access additional content—a critical navigation failure that would frustrate real users.

7. Return to your code editor to implement the solution.

8. In index.php, add pagination controls after the endwhile statement around line 33:

   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <?php the_content(); ?>
      <p class="entry-meta"><?php the_time( 'F j, Y' ); ?><?php the_tags( '—Tags: ' ); ?></p>
      <?php comments_popup_link(); ?>
   <?php endwhile; ?>
      <?php posts_nav_link(); ?>
   <?php endif; ?>

   The posts_nav_link() function intelligently generates both previous and next page links based on context and available content.

9. Save the file.

10. Test the navigation implementation:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

11. The Next Page link appears, but it's positioned directly adjacent to the comment links, creating visual clutter. Let's add proper structural markup.

12. Wrap the navigation function in semantic HTML for better styling control:

    <?php endwhile; ?>
       <div id="postsNavLink">
          <?php posts_nav_link(); ?>
       </div>
    <?php endif; ?>

13. Save the file.

14. Refresh your browser:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

    The navigation now sits on its own line with a container ID for future CSS targeting.

15. For more granular styling control, we need to examine the generated HTML structure. CTRL–click (Mac) or Right–click (Windows) the Next Page link and choose Inspect.

16. In the Developer Tools, notice that the generated link lacks specific CSS classes for individual styling.

17. Close the Developer Tools console.

18. Return to your code editor to implement more flexible navigation.

19. Replace the combined function with individual navigation functions for precise control. Delete the posts_nav_link() function around line 35:

    <?php endwhile; ?>
       <div id="postsNavLink">
    
       </div>
    <?php endif; ?>

20. Add the separated navigation functions:

    <?php endwhile; ?>
       <div id="postsNavLink">
          <?php previous_posts_link(); ?>
          <?php next_posts_link(); ?>
       </div>
    <?php endif; ?>

21. Enhance the structure with individual containers for targeted styling:

    <?php endwhile; ?>
       <div id="postsNavLink">
          <div class="prevPage"><?php previous_posts_link(); ?></div>
          <div class="nextPage"><?php next_posts_link(); ?></div>
       </div>
    <?php endif; ?>

22. Save the file.

Adding Fallback Content

Professional applications always handle edge cases gracefully. When no posts exist—whether due to filtering, database issues, or content management decisions—users need clear feedback rather than confusing blank pages.

1. Implement the fallback condition using WordPress's built-in conditional logic:

   <?php endwhile; ?>
      <div id="postsNavLink">
         <div class="prevPage"><?php previous_posts_link(); ?></div>
         <div class="nextPage"><?php next_posts_link(); ?></div>
      </div>
   <?php else : ?>
      <p><br>Sorry, no posts matched your criteria.</p>
   <?php endif; ?>

2. Save the file.

3. To demonstrate this fallback in action, we'll temporarily remove all posts. Navigate to your admin dashboard:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

4. Enter your credentials if prompted.

5. In the left sidebar, click Posts.

6. Click the checkbox next to Title to select all posts.

7. From the Bulk Actions dropdown, select Move to Trash.

8. Click Apply.

9. Keep this admin tab open for easy restoration, then open a new browser tab and navigate to:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

   You should see the professional fallback message instead of a broken or empty page.

10. Return to the admin tab and click the Undo link in the confirmation message to restore your posts. If the undo option isn't available, click Trash, select your posts, and choose Restore from Bulk Actions.

11. Now that we've verified our implementation, let's restore normal pagination settings. In the left sidebar, hover over Settings and click Reading.

12. Next to Blog pages show at most, enter 10 (WordPress default).

13. Click Save Changes.

Bonus: Styling the Links

Let's implement professional navigation styling with proper left-right alignment that users expect from modern blog interfaces.

1. First, restore the single-post display for testing purposes. Navigate to:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

2. Enter your credentials if prompted.

3. Hover over Settings and click Reading.

4. Next to Blog pages show at most, enter 1.

5. Click Save Changes.

6. Keep this browser tab open for quick settings access.

7. Return to your code editor.

8. Open style.css from the mrpTheme folder.

9. Navigate to the bottom of the file and add the navigation container styles after the .imgLeft rule (around line 436):

   #postsNavLink {
      padding-top: 10px;
      padding-bottom: 10px;
      overflow: hidden;
   }

   The overflow property prevents container collapse when child elements are floated, ensuring consistent layout behavior across different content scenarios.

10. Add the individual link positioning styles:

    .nextPage {
       float: right;
    }
    .prevPage {
       float: left;
    }

11. Save the stylesheet.

12. Test the enhanced navigation styling:
    • Mac: localhost:8888/mrp
    • Windows: localhost/mrp

13. The Next Page link should now appear right-aligned. Click through to verify the Previous Page link displays on the left side of subsequent pages.

14. Finally, restore the standard blog settings. Return to the Reading Settings tab in your browser.

15. Next to Blog pages show at most, enter 10.

16. Click Save Changes.