Managing and Enhancing Multi-Author Blogs with WordPress 2.7(Part 2)

by Jean-Baptiste Jung | June 2009 | MySQL Content Management Open Source PHP WordPress

In the first part of this two-part article by Jean Baptiste-Jung, we learned about managing a a multi author blog. When you are running a multi author blog, you need to have sufficient content to attract the visitors. In this part we shall learn how glorify your multi-author blog. Specifically, you will learn:

  • 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

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

  1. 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.
  2. Once you have your renamed authors' pictures, upload them to the wp-content/themes/yourtheme/images directory.
  3. 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(); ?>" />
  4. 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:

Managing and Enhancing Multi-Author Blogs with WordPress 2.7(Part 2)

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.

  1. 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.
  2. Check your emails and open the one received from Gravatar. Click on the link to confirm your email address.
  3. Choose a username and a Password for your account.

    Managing and Enhancing Multi-Author Blogs with WordPress 2.7(Part 2)

  4. 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.
  5. 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.

    Managing and Enhancing Multi-Author Blogs with WordPress 2.7(Part 2)

  6. 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
&amp;size=60&amp;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:

Managing and Enhancing Multi-Author Blogs with WordPress 2.7(Part 2)

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

  1. 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>';
    }
    }
  2. 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());
    ?>
  3. 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:

    Managing and Enhancing Multi-Author Blogs with WordPress 2.7(Part 2)

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.

Sign up for a Packt account to see the rest of this article

Now that you've read a few articles, you might want to consider signing up for a Packt account. It takes a matter of seconds, will give you access to all the articles on PacktPub.com, and once you've signed up you'll be returned here to carry on reading your article.

Furthermore, you'll gain access to nine free ebooks, and be offered a free trial of PacktLib, Packt's online library. Simply enter your details here, or log in to your existing account.

Log in

...or register

Wonderful mail by
Whoa! This blog looks well-founded like my old identical! It's on a wholly different enthral but it has euphonious much the uniform layout and design. Super select of colors!
Awe-inspiring mail by
Awesome! This blog looks right-minded like my disused a certain! It's on a fully other topic but it has bonny much the uniform verso layout and design. Superlative choice of colors!
Jamboree in the Hills by
Awesome post. Do you mind if I ask what your source is for this information?

Post new comment

Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Sort A-Z