Now let’s add a couple more modifications to the content.php template part.
The Meta Data
If we look at the screenshots of the front page and the single view, we see that the meta information (date and author) is not needed. However, for the Opinions section of the home page, the author name and gravatar are needed (after the title, thumbnail, and excerpt).
In the content.php template part, we find a condition near line 21:
if ( 'post' === get_post_type() ) :
?>
<div class="entry-meta">
<?php
metonymic_posted_on();
metonymic_posted_by();
?>
</div><!-- .entry-meta -->
<?php endif; ?>
Change the first line of the condition condition to the following:
if ( in_category( 'opinions') ) :
Test your page. You should see that the date and the author are output (but only in the Opinions section, of course). However, if we go to one of the OPINION stories single views (by clicking the title of one of the four opinion stories), we will see that meta information if in fact also output there.
However, if we decide that we don’t want that information anywhere but on the home page, we can modify our condition, making it compound:
if ( in_category( 'opinions') && ( is_front_page() ) ):
Now we need to modify what content is output by this condition.
First of all, remove the metonymic_posted_on() function. We don’t need the date for our purposes here.
We could keep the metonymic_posted_by() function that Underscores comes with, but then we’d need to modify it to remove the “by”. We’ll just use a built-in WordPress function to get the link to the author posts archive:
if ( in_category( 'opinions') ) :
?>
<div class="entry-meta">
<?php
the_author_posts_link();
?>
</div><!-- .entry-meta -->
<?php endif; ?>
If you test the page, you’ll see that the author name is output as a link to the author posts archive (and the word by is also not there anymore).
The Gravatars
Now let’s add the call to the author’s gravatar. If you look in the Users section of the dashboard, you will see that there are five users on the site: me, and four characters from the Breaking Bad TV Show. You can also see their gravatars there.
The gravatar service associates images with email addresses, so at the gravatar.com web site, I’ve made one for each user. Then I assigned one Opinion post to each of these users.
To retrieve the author’s email as we go through the loop is easy. In fact, most information in the User’s profile can be accessed with get_the_author_meta(). The arguments you can pass to that function are listed in the codex page on it.
Once we have the user’s email, outputting the gravatar is similarly easy. We echo the get_avatar function output, passing it the email dynamically generated as explained above, and the size we want the image to be.
With that in mind, after the_author_posts_link(), add the additional line below it:
the_author_posts_link();
echo get_avatar( get_the_author_meta('email'), '128' );
Test your page.
This is almost what we want.
The only problem is that the gravatar should also link to the author posts archive. By default, gravatars don’t link anywhere.
To fix that, change your code to the following:
if ( in_category( 'opinions') ) :
?>
<div class="entry-meta">
<?php
the_author_posts_link();
?>
<a href="<?php echo esc_url(get_author_posts_url( get_the_author_meta('ID') )); ?>">
<?php
echo get_avatar( get_the_author_meta('email'), '128' );
?>
</a>
</div><!-- .entry-meta -->
Breaking down what we’re doing here:
- We get the author ID with get_the_author_meta the same way we got the email for the gravatar
- Then we pass that author ID to the get_author_posts_url function
- This gives us a valid url to echo for the link href value
- Finally we use the esc_url function to sanitize the data
The esc_url() or esc_html functions appear elsewhere in some of our exercises, as well as throughout underscores. These functions sanitize URL data, turning many characters into entities, so that they are output as straight characters by the browser rather than interpreted by them. The reason for this is that we do not want to trust any data entered by a user, as it could contain malicious code.
Similarly, we should modify our code here so that we can sanitize the email address the user entered into their profile. We will use the WordPress-native sanitize_email function:
echo get_avatar( sanitize_email(get_the_author_meta('email')), '128');
The Final Step: Move the Meta Data
If you look at the screen shot of the font page, you’ll see that this meta data block appears after the Opinion excerpt.
To do that, move the entire conditional block that is testing to see whether we’re in the Opinions category (the one we’ve been working on, in other words). Put it after the end of the .entry-content DIV. Make sure that you correctly close the PHP in the original place, and open it in the moved location.
Test your page to make sure that everything still works.
The Entry-Footer
The screenshots don’t have the entry footer content. Since we’re already in the content.php file, delete the footer at the bottom. Make sure that you do not delete the close of the article tag.
Now let’s move on to some styling of type and other things.