I’ll spare you my thought process behind the actual design and simply say that in this theme, I wanted to create something that was clean, flexible, a bit sexy and beyond the ordinary WordPress theme. Time will tell whether or not that’s how people perceive it, so in the meantime, let me lay out some of the theme’s features.

Widget-Ready, User-Friendly, and Optimized for Wordpress Versions 2.2 and Above

That includes WP Version 2.3 with its cool little tagging functionality.

Five Different Home Page Layouts

I started out with just a simple, clean 2-column home-page layout, but decided maybe folks would appreciate more than one option. So, I created 4 more on top of the first.

• Home page option 1 - This is the one currently active on the site. It’s a 3-column layout that uses image thumbnails for each post.
• Home page option 2 - This was my original 2-column layout that uses image thumbnails for each post.
• Home page option 3 - This is a 3-column layout without image thumbnails. It looks more like a traditional blog
• Home page option 4 - Another 2-column layout that looks more like a traditional blog.
• Home page option 5 - And last but not least, a 2-column layout that uses image thumbnails and places posts side-by-side.

So, if you don’t like the default home page, it’s a snap to switch to another one.

Four Different Category/Archive Page Layouts

Like with the home page, I wanted to give folks some different options for the category and archive pages.

• Archive page option 1 - This is the one currently active on the site.
• Archive page option 2 - Click the link to see a screenshot.
• Archive page option 3 - Click the link to see a screenshot.
• Archive page option 4 - Click the link to see a screenshot.

Two Different Single Post Page Layouts

Option 1 of the single post page is the one you are currently viewing. But there is also a 3-column version. Click here for a screenshot.

Home Page Featured Article Glider Box

I’ve always been a big fan of featured articles, so I thought it would be cool to add some sort of method to display not just one, but sever featured articles at the top pf the home page. This function will allow you to display several featured articles at the top of your home page, as well as an excerpt of your about page. And all folks need to do is click the link at the bottom of the box and watch your featured content glide on by.

Built-In Banner Ad Blocks

I know folks like to advertise on their sites, so I built in some blocks to allow it. And it’s very easy to change the theme to place your own advertising code/banners in those blocks.

Built-In Site Guide in Right Sidebar

The Site Guide is the little box where your readers have quick access to:

• monthly archives
• site tags (if you use them)
• site search
• popular posts (plugin required; link provided to plugin site)
• most commented posts (plugin required; link provided to plugin site)

Customized Recent Comments in Sidebar With Gravatar Support

The standard “recent comments” widget built into Wordpress is okay, but not good enough for this theme. So I came up with my own version that include an excerpt of the comment as well as a built-in Gravatar for the comment author.

Author Bio Information and Gravatar Included on Single Post Pages

Just take a peek at the top of this post. This is a great feature for multi-author sites/blogs.

Alternating Color Comments With Gravatar Support

Take a look at this post to see an example.

XHTML Valid

Of course it is. I’m a pro.

If you look at the home page of this demo site, you’ll see that all the posts - including the featured posts at the top - display a post introduction (or excerpt) rather than the full post itself. It’s the same on the category pages, archive pages and search results pages. Then, when you click through to the individual post, you get the full post content along with comments and other information. The reason you posts are presented that way is because WP-Magazine Theme is designed to use the post excerpts rather than the post content.

Since the theme is set up to us excerpts, the trick is to tell WordPress how to create the excerpt the way you want it rather than it’s own way. Without any other instructions, WordPress will create the excerpt on it’s own. Here’s what it does …

Wordpress Codex: “If you do not provide an explicit excerpt to a post (in the post editor’s optional excerpt field), it will display a teaser which refers to the first 55 words of the post’s content. Also in the latter case, HTML tags and graphics are stripped from the excerpt’s content.”

So the solution is simple … Use the Excerpt field on the Write Post screen

Whatever you place in the Excerpt field is what will be displayed as the post excerpt on your home page. And keep in mind, you will need to add some HTML to the Excerpt field if you want it to be used in the excerpt. Otherwise, WordPress strips out all code including HTML. For example, lets say you want your post excerpt to be displayed just like this:

This is the post introduction. I want to include a link to this site, and this site.

In that case, here’s exactly what you’d need to place in the Excerpt field:

This is the post introduction. I want to include a link to <a href="http://www.wp-vybe.com">this site</a>, and <a href="http://www.wp-vybe.com">this site</a>.

If you need some help with the HTML code, you can write your excerpt in the normal post editor, then click the HTML view tab, and simply copy the HTML code from there.

As a side note, some folks have inquired whether they can include video in there post excerpt. The answer is yes, you can … you just need to place the code for the video in the Excerpt field.

Step 1 - Find Your Banner Ad Templates

There are 2 templates for your banner ads. One is named “Banner Ad 300×250,” and the other is “Banner Ad 468×60.” You can access them from the Theme Editor page of your WordPress control panel (under the Design tab or Presentation tab for WP versions prior to 2.5).

Step 2 - Open the Banner Ad Template and Install Your Own Banner Ad Code

When you open one of the Banner Ad templates, you’ll see some code that looks like this:

<div class="banner300"><a href="http://www.solostream.com"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner300.gif" alt="300x250 banner" /></a></div>

If you are using Google Adsense, you’d simply need to change the code as follows:

<div class="banner300">
PLACE GOOGLE ADSENSE CODE HERE
</div>

If you are using your own banners, you simply need to upload your banner image to the /images folder within the WP-Mag Theme folder, then change the code accordingly. So for example, if the name of your image is “banner.gif” and you want that banner to point to www.mysite.com, the code would appear like so:

<div class="banner300"><a href="http://www.mysite.com"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner.gif" alt="300x250 banner" /></a></div>

And that’s all there is to it. Be sure to click the Update file button, and you’re done.

Step 1 - Upload a Generic 125×125 Banner

Right-click the image to the right and save it to your desktop as banner125.gif. Then upload it to the /images folder within your WP-Mag theme folder. Alternatively, you can use your own generic 125×125 banner; just be sure to name it banner125.gif.

Step 2 - Upload the Banner Ads 125×125 Template

Right-click this link, and save the file to your desktop as banner125.php. Then upload the file to your theme folder with the rest of your theme files.

Step 3 - Place the Generic Banner Ads in Your Sidebar

In your Wordpress control panel, go to the Theme Editor. On the right side of the page, click the link named “Sidebar.” Once the Sidebar template is open in your Theme Editor, look for these lines of code:

<li>
  <?php include (TEMPLATEPATH . '/banner300.php'); ?>
</li>

If you want to remove the 300×250 banner ad and replace it with the 125×125 banner ads, simply change those lines to read:

<li>
  <?php include (TEMPLATEPATH . '/banner125.php'); ?>
</li>

If you want to keep the 300×250 ad, leave the code as it is and place these lines above or below it:

<li>
  <?php include (TEMPLATEPATH . '/banner125.php'); ?>
</li>

After you click the Update File button, you should have something that looks about like the image to the right (click image to enlarge).

Step 4 - Replace Your Generic Banners and Links With Real Ads

While still on the Theme Editor page, click the link for “Banner Ads 125×125.” The code looks like this:

<ul class="banner125 clearfix">
  <li class="ad1">
    <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner125.gif" style="display:block;margin:0;padding:0;" alt="125×125 banner ad" /></a>
  </li>
  <li class="ad2">
    <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner125.gif" style="display:block;margin:0;padding:0;" alt="125×125 banner ad" /></a>
  </li>
  <li class="ad3">
    <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner125.gif" style="display:block;margin:0;padding:0;" alt="125×125 banner ad" /></a>
  </li>
  <li class="ad4">
    <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/banner125.gif" style="display:block;margin:0;padding:0;" alt="125×125 banner ad" /></a>
  </li>
</ul>

All you need to do is upload your 125×125 banner image(s) to the /images folder, and change the code above to reflect that.

For example, if you upload a new banner called solostream-banner-125.gif, and you want to link that banner to www.solostream.com, you would simply change the code to this:

<li class="ad1">
  <a href="http://www.solostream.com"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/solostream-banner-125.gif" style="display:block;margin:0;padding:0;" alt="125×125 banner ad" /></a>
</li>

Step 5 - Add a Bit of Style

Add the following code to the bottom of your Stylesheet template:

/* -------------------[ 125x125 Banner Ads ]------------------- */
 
#sidebar li li.ad1 {
  float:left;
  margin: 0 5px 5px 0;
  width:125px;
  }
 
#sidebar li li.ad2 {
  float:left;
  margin: 0 0 5px 0;
  width:125px;
  }
 
#sidebar li li.ad3 {
  float:left;
  margin: 0 5px 0 0;
  width:125px;
  }
 
#sidebar li li.ad4 {
  float:left;
  margin: 0 0 0 0;
  width:125px;
  }


If you have any questions on this tutorial, just leave a comment, and I’ll respond as quickly as possible.

To get a better idea what I mean by “auto-scroll,” simply look at the home page of this site. You’ll notice the featured articles scroll automatically form one to the next. If you’d like to implement this feature on your site, it’s pretty simple.

First, open your Featured Articles template. To find the Featured Articles template, click the Presentation link on your WordPress control panel, then click Theme Editor. From the list of files on the right, select “Feature Articles on Home Page.”

On the following page, scroll to the bottom, and find this block of code:

<script type="text/javascript" charset="utf-8">
  var my_glider = new Glider('my-glider', {duration:0.5});
</script>

Change it to this:

<script type="text/javascript" charset="utf-8">
  var my_glider = new Glider('my-glider', {duration:0.5, autoGlide:true, frequency:8});
</script>

You can adjust the time period between article rotations by changing the “8″ in the above code.

And that’s it.

Step 1 - On Your User Profile Page, Fill in the Author Bio Info

Just click the Users tab on your WordPress control panel, then click “Your Profile” from the sub-navigation bar. Look in the bottom left corner of the page, and fill in the field marked “About Yourself.” Then be sure to click the Update Profile button.

Step 2 - Create a Free Gravatar Account

The author photo is pulled from your Gravatar account. Also, be sure the email address you use for your Gravatar account is the same email address you use in your WordPress Author Profile. Note: the email addresses have to be EXACTLY the same, including the same case.

What If Your Gravatar Does Not Appear?

If your Gravatar does not appear, first, see Step 2 above. Second, you can try the direction in this comment.

How to Remove and/or Replace Your Gravatar

See this comment.

Step 1 - Remove the Existing Site Title and Description

Before you can place your logo in the upper left corner of your new WP-Magazine Theme driven site, you’ll need to make some space for it. So, lets remove the existing site title and description.

1. In your Wordpress control panel, click the Presentation link; then click Theme Editor. On the next page, you should see see the stylesheet.css template.

2. Scroll down till you see this block of code:
#header .sitehead-left p {
margin:0;
height:26px;
line-height:26px;
}

You’ll want to change it to this:

#header .sitehead-left p {
position:absolute;
text-indent:-999em;
margin:0;
height:26px;
line-height:26px;
}

3. Next, scroll down till you see this block of code:
#header h1 {
font-size:20px;
margin:0;
line-height:24px;
height:24px;
}

Change it to this:
#header h1 {
font-size:20px;
margin:0;
line-height:24px;
height:24px;
display:none;
}

Then, be sure to click “Update File” in the bottom right corner.

Step 2 - Upload and Install Your Logo

Now that we have some room in the top, left corner, you’ll need to upload your logo to your Wordpress theme. The best place to upload your logo is the /images folder, which within WP-Magazine theme folder.

After the image is uploaded, again, open your stylesheet template and scroll down till you find this block of code:
#header .sitehead-left {
width:50%;
float:left;
margin:0;
padding:0;
}

You’ll need to change it to this:
#header .sitehead-left {
width:50%;
float:left;
margin:0;
padding:0;
background:url(images/filename.gif) top left no-repeat;
height:60px;
}

Be sure to change the “filename.gif” above to the actual filename and file extension of your own logo. Also, you may have to adjust the height, depending upon the dimensions of your logo.

Just be sure to click the Update File button after any changes.

Step 3 - Optional - Link Your Logo to the Home Page

If you’d like to link your logo to your home page, open your Header template, and find this block of code:


<div class="sitehead-left">
<h1><!--p bloginfo('name');--></h1>
<!--p bloginfo('description');--></div>
 
 
Change it to this:

 
 
Then update the file.

And that should do it.

Step 1 - Write a New Page

Just click the Write Page link under the Write tab on your Wordpress control panel.

Step 2 - Assign the Site Map Page Template to your Page

On the right side of the Write Page console, you’ll see a blue box title “Page Template.” You may have to click the white + sign to expand it. From the drop-down list, select “Site Map Page,” and click the Publish button.

Update - be sure to give your page a page title by filling in the Title field.

That’s it.

• Home page option 2 - This was my original 2-column layout that uses image thumbnails for each post.
• Home page option 3 - This is a 3-column layout without image thumbnails. It looks more like a traditional blog
• Home page option 4 - Another 2-column layout that looks more like a traditional blog.
• Home page option 5 - And last but not least, a 2-column layout that uses image thumbnails and places posts side-by-side.

To change your home page layout is a breeze.

Step 1 - Login to Your Wordpress Site Via FTP, and Find Your Index Page Templates

In your theme folder, you will find 5 different index page templates. There are named index.php, index2.php, index3.php, index4.php and index5.php. Click the image to the right to enlarge.

Step 2 - Change the File Names to Reflect Your Chosen Home Page Layout

To select a new home page layout, first, change the index.php file to index1.php. Then, change the filename of your chosen home page layout to index.php. Refresh your browser, and you should see the new home page layout.

To Change Your Archive Page Layout, Follow the Same Steps Above

There are 4 different archive page layouts.

• Archive page option 1 - This is the one currently active on the site.
• Archive page option 2 - Click the link to see a screenshot.
• Archive page option 3 - Click the link to see a screenshot.
• Archive page option 4 - Click the link to see a screenshot.

The filename for your archive page templates are archive.php, archive2.php, archive3.php and archive4.php. To use a different archive page layout, just change archive.php to archive1.php, and change your chosen archive page layout to archive.php.

To Change Your Single Post Page Layout, Follow the Same Steps Above

There is the standard 2-column single post page with the filename single.php. Then you also have a 3-column version of the single post page which has a filename single2.php.

To use the 3-column version, simply rename single.php to single1.php. Then rename single2.php to single.php.

How simple is that?

If you’d like to add your own post thumbnails for any or all of your posts, which I recommend, the process is quite simple.

Step 1 - Select a Photo and Cut it to the Proper Size

Ideally, the post thumbnail image should be 100px by 100px. If it is a different size, I added a style element to the photo that will automatically convert it to 100×100. If that happens, however, it may negatively impact the image’s quality, so your should try to make your post thumbnails exactly 100px by 100px .

Step 2 - Upload Your Photo

You can either upload your photo via FTP or via the standard Wordpress image upload function on the Write Post page; just below your Publish button. Once your photo is uploaded, you’ll need the file path for the photo’s location.

For example, if you upload your photo to a subdirectory (of your Wordpress site) named “images” … the file path would be something like: http://www.mysite.com/images/filename.jpg.

If you upload your photo via the Write Post image uploader, the file path will be something like: http://www.mysite.com/wp-content/uploads/2007/12/filename.jpg. To get the actual file path, just go ahead and send the image to your post editor. When you do that, Wordpress will produce an image tag that looks something like this: <img src='http://mysite.com/wp-content/uploads/2007/11/filename.jpg' alt='feature1.gif' />

In this case, the only part of that tag you need is: http://mysite.com/wp-content/uploads/2007/11/filename.jpg

Once you have the image path, just be sure to delete the image tag from your post editor box.

Step 3 - Create a Custom Field for Your Thumbnail Image

If you scroll to the bottom of your Write Post page, you’ll see an area near the bottom called “Custom Fields.” (You may have to click on the white + sign to the far right to expand the custom fields area).

In the field marked “Key,” you’ll need to enter: post_thumbnail. In the field marked “Value,” you’ll need to enter the file path for your image. Then just click the “Add Custom Field” button. Finally, continue with your post, and when you’re ready, click the Publish button.

As I said above, your thumbnail image will appear on each page that the post appears, except the single post page.