- Find the code that reads:
<p class="right"><a class="comments-count" href="#">850</a></p>
- Replace it with:
<p class='right'><a class='comments-count' href='<?php the_permalink() ?>'><?php comments_number('0', '1', '%') ?></a></p> - Save
index.phpand refresh your browser.
We added the comments_number tag to display a count of the comments for each post, and used <?php the_permalink(); ?> to add a link to the individual post, when the user clicks on the number of comments.
The result now looks like this:
Even though we had most of these text elements handled in our mockup, we're now seeing what's available via the WordPress template tags. Using these tags means, we can pull in content automatically from the database, making full use of WordPress' CMS capabilities.
Tip
Beyond the Loop: WP_Query and template tags
Once you get to rummaging around in your loop (or loops, if you create custom ones for other template pages), you'll quickly see that the default theme's template tags are a bit limiting. There are thousands of custom template tags you can call and reference within the Loop (and outside of it) to display the WordPress content. In Chapter 4, Advanced Theme Features, we'll customize our theme with advanced features using the WP Query function. Chapter 6, Your Theme in Action, will have a template tag and WP_Query reference and you can also check out the following links to find out what template tags are available:
The final touch to our loop is to add some automatically generated classes, which will help us if we want to use different styling for different areas of the site at a later stage. This also applies to parts of the page outside the Loop.