Adding A Guest Blogger Intro Block

I wanted to add a guest blogger block on my new site BloggerBarter. You know the block that shows a little bio with a photo of the guest blogger. The first time I notice someone using one was on emoms at home. Here is an example from her blog Scroll to the bottom to see what I’m yammering about.

Now I’m sure there is a plugin for WordPress that will do this easy enough, but then where’s the fun in that? Before you start make a backup of your theme.

To get started open the following files of your theme: index.php, single.php, author.php and style.css

In the first 2 file place this code somewhere within the loop.


<?php
if ($authordata->ID != '1'){
include (TEMPLATEPATH . '/authors/author-id'. $authordata->ID .'.php');
}
?>

If you want this block to show near the the title look for a group of code that contains
php the_title()

Next open the author.php file, Here you can chose to replace the defualt information, or just add to it. If you want to replace the blocks of code, look for a block containing $authordata->display_name & $authordata->user_description with the code above. (Remember make a back first!)

I myself chose to just place the code under the default information.

We’re not done yet but let me explain what we’ve done. First we made sure that this will only work for users with ids other than 1. You may need to change this if you use another second account to post with. Look in your dashboard under users to find out what your id is.

Next we include a file from within a subdirecory of your theme called authors. We are giving the file the name author-id?.php for the second author. The “?” in this example will automatically be replaced with the users id#.

the next step is to create a sub directory within your themes directory named authors. In it make a new file called author-id2.php and place the following html into it:

<div id="guest_blogger">
<h2>Guest Blogger</h2>
<img align="left" src="<?php bloginfo('stylesheet_directory') ?>/authors/author-id2.jpg" width="74" height="74" alt="" />I would Like to welcome:<br />
<strong class="authors_name">David Span</strong> makes his living from blogging. You can learn more about him from his other websites<br />
<a href="">http://DavidSpan.com</a><br />
<a href="">http://MyBlogIt.net</a><br />
</div>

Also place your users photo image into the same directory and rename it author-id2.jpg. Save the file and open your style.css and add the following lines:

div#guest_blogger{
border-top: 5px dotted #c00;;
border-bottom: 5px dotted #c00;;
height:110px;
padding:0px;
margin:10px;
font-size: 11px;
line-height: 14px;
}

div#guest_blogger h2{
text-align:center;
padding:0px;
margin:0px;
font-size: 16px;
line-height: 18px;
color: #c00;
}

div#guest_blogger img{
padding:0px;
margin:0px;
margin-top:2px;
margin-right:15px;

}

strong.authors_name{
font-size: 11px;
line-height: 14px;
font-weight: bold;
color: #c00;
}

Please forgive me as my style sheet knowledge leaves a lot to be desired.
If you want to see how it looks drop by BloggerBarter and take a peek.

If you have problems or suggestions please leave a comment. I’d be happy to help.

Related posts:

1. WordPress Plugin tutorial part 2 The Header
2. 1 Step theme install – Not
3. WordPress Theme Tags: ‘bloginfo’
4. Easiest way to reset your password
5. WordPress Theme Tags: ‘include’