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.
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.
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:
<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(); ?>
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.
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/
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
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:
echo '| <a href="'.admin_url("comment.php?action=cdc&c=$id").'
echo '| <a href="'.admin_url("comment.php?action=cdc&dt=spam&c
- Save the file functions.php and open the file comments.php. Find the comments loop and add the following lines:
- 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.
Getting notified when a new draft is saved
As a blog administrator, you have to know what your authors and contributors are working on. Sure you can ask them, but it can become a boring task quickly if you have many different contributors.
The solution to the stated problem is a plugin called Draft Notification. When someone creates a new draft on your blog, you'll automatically receive an email.
How to do it
- Of course, the first thing to do is to get the plugin. You can download it from the following URL:
- Once you have downloaded the file, rename the .txt extension to .php and install it according to the standard installation procedure.
- That's all! Now, every time a new draft will be saved you'll receive an email notification. Please note that the creation of this plugin is such that it also sends out an email when an existing draft has been modified and saved again.
- Since dates aren't saved in the WordPress database for drafts, there does not seem to be an efficient way to check if it is the first time the draft has been saved.
How it works
Once installed, the Draft Notification plugin starts to look up when a draft is saved. When it does, the plugin automatically sends an email to the blog admin.
Allowing multiple authors on posts
In a multi-author blog, sometimes an author starts a post and another one finishes it. Or, perhaps, two (or more) contributors share their ideas and create a great article together.
Unfortunately, by default, WordPress allows only one author per post. Although this is good for most blogs, it can quickly become very frustrating for contributors on a multi-author blog. Just imagine that two authors have worked together to write a post, but only one can be rewarded. In my opinion, that's not a very comfortable situation for either of them.
Luckily, a very cool WordPress plugin allows your blog to assign more than one author to a post. The plugin is simply named Co-Authors and was created by Weston Ruter.
How to do it
- The Co-Authors plugin can be downloaded from the web site . Once you have it, extract it onto your hard drive and install it by following the standard installation procedure.
- Write a post, or edit an existing one. When you scroll down the page, you'll see a box named Post Author(s). This is where you can add as many authors as you want.
- Now, you have to modify your template files a bit to where you want the co-authors to be listed. The Co-Authors plugin provides the following co-authors tags:
- They work exactly the same way as the built-in author's tags. For example, let's modify the single.php file of our theme and display the co-authors. Add the following code anywhere within the loop:
How it works
When installed, the Co-Authors plugins creates news tags to return multiple authors. If only one author wrote the post, only his name is displayed.
In the preceding piece of code, we check if the coauthors() function exists. If yes, then we use it to display co-authors. If the function doesn't exist (which means that the plugin isn't installed) we use the built-in the_author() function instead.
Displaying a list of all of the authors
In my opinion, in a multi-author blog it is a good thing to display a list of all of the authors, such as in your About page. In this recipe, I'm going to show you how to easily display the list of your authors and control its display.
To achieve this recipe and enhance your About page, you should definitely create a page template. This is not mandatory, though.
How to do it
Edit the desired file and insert the following line of code to where you want your list of authors to be displayed:
<?php wp_list_authors(); ?>
Save the file, publish the page, and visit your blog. You will notice that all of your authors are now listed.
How it works
To display the list of your blog authors, you only need the wp_list_authors() function. This function can be inserted anywhere into your theme files. Once called, wp_list_authors() executes a database query to get the list of authors. The function can be controlled with parameters.
Now that we have learned how to display the list of authors, let's learn how to the function used to display the list of authors.
Controlling the wp_list_authors() function
The wp_list_authors() function can be controlled with a few parameters:
- Optioncount: Display the number of published posts by each author (1 = true, 0 = false).
- exclude_admin: Exclude the admin from the authors list (1 = true, 0 = false).
- show_fullname: Display the first and last name of the authors (1 = true, 0 =false).
- hide_empty: Do not display authors with 0 posts (1 = true, 0 =false).
- feed: The text to be displayed for a link to each author's RSS feed. The default choice is no text and no feed displayed.
- feed_image: This is the path or filename for a graphic image. This acts as a link to each author's RSS feed, and overrides the feed parameter.
The following line of code will list the author's full names along with the number of posts that they have published:
<?php wp_list_authors('show_fullname=1&optioncount=1'); ?>
The following code will not exclude the admin, as well as the authors who haven't published any post yet:
<?php wp_list_authors('exclude_admin=0&hide_empty=0'); ?>
In this article, we have learned how to glorify a multi-author blog. We have also learned:
- Displaying author picture on posts
- Displaying the author’s gravatar picture on posts
- Adding moderation buttons to the comments
- Getting notified when a new draft is saved
- Allowing multiple authors on posts
- Displaying a list of all of the authors
If you have read this article you may be interested to view :