Displaying author picture on posts
Did you like the previous recipe in the first part? I hope you did! But personally, I must admit that even though displaying author information looks very cool, something is missing from the previous recipe. Can you guess what is it? It is a picture of the author, of course.
Even if your author-related information is precise and complete, a picture is still essential. This is because it is the easiest, and quickest, way for a reader to recognize an author. But sadly, WordPress can’t handle author pictures by default. Let’s learn how to create a hack that will allow us to display the author’s picture in the way that we want to.
Getting ready
As we’ll be using author pictures in this recipe, you should start by requesting a picture of all of your authors. Although it isn’t necessary, it will be really better if all of the pictures have the same width and height. A square of 80 to 110 pixels is a good standard.
Also, make sure that all of your pictures have the same format, such as .jpg, .png, or .gif.
How to do it
Now that you have collected pictures of all of your authors, we can start to hack WordPress and insert author pictures in the posts
- First, you have to rename your images with the author IDs. You can also use author’s last name if you prefer, but in this example I am going to use their IDs.
- Once you have your renamed authors’ pictures, upload them to the wp-content/themes/yourtheme/images directory.
- Open the file single.php and add the following code within the loop:
<img src="<?php bloginfo('template_url); ?>/images/<?php the_
author_ID(); ?>.jpg" alt="<?php the_author(); ?>" /> - Save the single.php file and you’re done. Each post now displays a picture of its author!
How it works
The working of this code is pretty simple. You simply concatenated the result of the the_author_ID() function with the theme URL to build an absolute URL to the image. As the images are named with the author ID (for example, 1.jpg, 4.jpg, 17.jpg, and so on), the the_author_ID() function gives us the name of the picture to be displayed. You just have to add the .jpg extension.
There’s more…
Now that you’ve learnt how to display the picture of the current author, you should definitely use this recipe to enhance the previous recipe. The following code will retrieve the author information, and display the author picture as we have learnt earlier:
<div id="author-info">
<h2>About the author: <?php the_author();?></h2>
<img src="<?php bloginfo('template_url); ?>/images/<?php the_author_
ID(); ?>.jpg" alt="<?php the_author(); ?>" />
<?php the_author_description(); ?>
<?php the_author();?>'s website: <a href="<?php the_author_url(); ?>">
<?php the_author_url(); ?></a><br />
Other posts by <?php the_author_posts_link(); ?>
</div><!--/author-info-->
The outcome of the preceding piece of code will look similar to the following screenshot:
Displaying the author’s gravatar picture on posts
Gravatars (which stands for Globally recognized avatars) is a popular service, that allows you to associate an avatar image to your email address.
On October 18, 2007, Automattic (The company behind WordPress) acquired Gravatar. Since WordPress 2.5 the popular blogging engine is fully gravatar-compatible, which results, in the ability to include gravatars in comments.
In this recipe, I’ll show you how to modify the previous code to use the author gravatar instead of a personal picture.
Getting ready
As we’re going to use Gravatars, you (and each of your authors) first need a gravatar account. Carry out the following steps to create a gravatar account and associate an image to your email address.
- Go to the web site http://en.gravatar.com/site/signup, and enter your email address into the text field. Gravatar will send you a confirmation via email.
- Check your emails and open the one received from Gravatar. Click on the link to confirm your email address.
- Choose a username and a Password for your account.
- Once your username and Password has been created successfully, you’ll see a text that reads Whoops, looks like you don’t have any images yet! Add an image by clicking here. Click on the given link, and choose to upload a picture from your computer’s hard drive, or the Internet.
- Once you are done choosing and cropping (if necessary) your picture, you have to rate it. Click on G unless—except, if your avatar is meant for mature audiences only.
- Done! You now have your own gravatar.
How to do it
Open the file single.php from the theme you’re using and paste the following code:
$md5 = md5(get_the_author_email());
$default = urlencode( 'http://www.yoursite.com/wp-content/themes/
yourtheme/images/default_avatar.gif' );
echo "<img src='http://www.gravatar.com/avatar.php?gravatar_id=$md5
&size=60&default=$default' alt='' />";
How it works
The first thing to do is to get an md5 sum from the author’s email address. To do so, I used the php md5() function along with the get_the_author_email() function. I didn’t use the_author_email() because this function directly prints the result without allowing you to manipulate it with php
I then encoded the URL of a default picture that is to be shown if the author hasn’t signed up to Gravatar yet.
Once done, the gravatar can be displayed. To do so, visit the web site:
http://www.gravatar.com/avatar.php with the following parameters:
- gravatar_id: The gravatar id, which is an md5 sum of the user email
- size: The gravatar size in pixels
- default:The absolute URL to an image which will be used as a default image if the author hasn’t signed up to gravatar yet
Adding moderation buttons to the comments
A common problem with comments is spam. Sure, you can moderate comments and use the Akismet plugin. However, sometimes someone leaves a normal comment, you approve it, and then the spammer—who knows that his comments aren’t being accepted by the moderator—starts to spam your blog.
Even though you can do nothing against this (except moderating all of the comments), a good idea is to either add spam and delete buttons to all of the comments. This way, if you see a comment saying spam while reading your blog, then you can edit it, delete it, or mark it as spam. I got this useful tip from Joost de Valk, who blogs at www.yoast.com
Getting ready
The following screenshot shows normal comments without the edit, delete and spam buttons:
There’s nothing complicated at all with this recipe. However, you must be sure to know which kind of blog the users are allowed to edit or delete your comments. For a list of actions and user roles, see the section named Controlling what users can do, which is later in this article.
How to do it
- Open the file functions.php and paste the following piece of code:
function delete_comment_link($id)
{
if (current_user_can('edit_post'))
{
echo '| <a href="'.admin_url("comment.php?action=cdc&c=$id").'
">del</a> ';
echo '| <a href="'.admin_url("comment.php?action=cdc&dt=spam&c
=$id").'">spam</a>';
}
} - Save the file functions.php and open the file comments.php. Find the comments loop and add the following lines:
<?php
edit_comment_link();
delete_comment_link(get_comment_ID());
?> - Save the file comments.php and visit your blog. You now have three links on each of the comments to edit, to delete (del), and to mark as spam as shown in the following screenshot:
How it works
In this recipe we started by creating a function. This function first verifies whether the current user has the right to edit posts. If yes, then the admin URLs to mark the comment as spam or delete it are created and displayed.
In the file comments.php, we have used the edit_comment_link(), which is a built-in WordPress function. Some themes include this by default. We then used the comment ID as a parameter to the delete_comment_link() function that you had created earlier.
