Easy Way To Highlight Guest Posts

If you’ve read a guest post on this site recently, you may have noticed a special block I created just for them which is styled differently than the rest of the post. The block contains information about the author of the post, an avatar image and a link to the URL of their choosing. This way, I give the reader clear indication that the post they are reading is not mine. I know you’re just dieing to see how I accomplished this little feat so let’s get onto the code snippets.

Back in late April, I inquired on the forum if anyone had any experience or plugin suggestions regarding highlighting guest blog post authors. I was hoping to find a plugin that would add a div box which pulled in a users gravatar via their email address while I manually filled out the content in each post. I didn’t come across anything like that but thanks to the members of the forum, they offered a way in which I could add some CSS to my themes style sheet and then wrap the guest author content within that Div class so it would be styled accordingly.

Here is the CSS code I added to me theme.

.guestposter {
 
	border: 1px solid #dddddd;
	padding-bottom: 16px;
	display: block;
	margin-bottom: 20px;
	font-style:italic;
	background: #E9E4D4;
 
	}
 
.img-gravatar{
       float:left;
	margin-right: 10px;
	margin-bottom: 0px;
 
	}

Once this was added to my style sheet, I was able to manually assign the guestposter class to a block of content which dealt with the guest post author.

<div class="guestposter"><img class="img-gravatar" src="link to the image" alt="alt text" title="titletext" width="50" height="50" />This is a guest blog post written by <strong>My WordPress</strong>, author of the blog, <a href="http://www.wordpress.org" target="_blank">WordPress</a>.</div>

Of course, just substitute the code with your own stuff and you should be all set. I don’t publish guest posts that often so copying and then pasting this code snippet isn’t too bad.