Most people run blogs with a single author; however, in the case of my other blog (Brothers In Blog) and my kid’s site, there is more than one author creating content. I’ve been thinking about adding some type of personalization to the top or bottom of an article at these sites, but just haven’t gotten around to it. That is of course until my kids forced the issue and asked me to add a unique signature graphic to the bottom of each post.

Add the Signature Directly to a Graphic Image

My kid’s site uses a modified version of the Pride theme from Small Potato at WpDesigner. In this theme the bottom of each post conveniently closes with a custom graphic to give it the center point and extra splash of complimentary color. I took this graphic image and made two other versions of it: one for author Aquanetta and one for Zemora.

Original graphic used at the bottom of a post

New graphic used at the bottom of posts authored by Aquanetta

New graphic used at the bottom of posts authored by Zemora

Create an Author Specific CSS Style

To close each post with the appropriate graphic I altered the current div class from the “entry” class to one that dynamically uses the author’s name, and made this update to the following files:

• index.php
• single.php
• post.php
• archive.php

Here is a quick summary of the before and and after code changes:

Before: < div class="entry" >

After: < div class="< ? php the_author(); ?>" >

Note: Code snippets include extra spaces that normally cause an execution error. I have intentionally added those spaces here in order to avoid confusing the web server and browser. If you cut and paste the code into your own theme, make sure to remove the extra spaces.

To make the dynamic div class assignment work, I copied the “entry” class in the style.css file and pasted it back into the file three more times. The first copy I renamed to Aquanetta, the second one to Zemora, and the last one to admin (I added the admin class just in case there were some admin authored pages or posts).

I left the new admin class unchanged from the original “entry” class; however, for the new Aquanetta and Zemora classes I increased the bottom padding from 20px to 70px to give the necessary clearance between the signature and the rest of the post. Then, I changed the background image name to the two new images I created for each signature.

Here are the css settings for the original “entry” class, and an example of one of the added author specific classes:

.entry{
padding: 0 20px 20px;
line-height: 24px;
background: #fff url(images/bg_rc_bottom.gif) no-repeat left bottom;
clear: both;
}

Original “entry” class from the style.css file

.Aquanetta { /* added 7-19-07 to extend entry for a signature image */
padding: 0 20px 70px;
line-height: 24px;
background: #fff url(images/aquanetta_bottom.gif) no-repeat left bottom;
clear: both;
}

Altered version of the “entry” class renamed for the author Aquanetta. There is a similar class for author Zemora named accordingly and with a different background url specified.

Worthwhile Modification

This modification is very easy and worth thinking about if your blog has more than one author on a regular basis. The added personalization helps make each article a little more unique and helps authors stand out from each other.

Please Note: Comments to this post have been closed. Thanks for reading

Share, Bookmark, or Email this post

If you liked this post, subscribe to TechTraction's RSS feed or TechTraction's email feed

Filed under: How-To & Tech Tips