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:

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:

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

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="125x125 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="125x125 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="125x125 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="125x125 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="125x125 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>
 

<h1><!--p bloginfo('name');--></h1>
<!--p bloginfo('description');-->

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.

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

Your feature article photos can be almost any width you like really. However, the featured article box is only 650px wide, so you may want to limit your photos to less than half that width to allow room for the post excerpt.

The photo’s height, however, needs to be more specific. Ideally, your photo’s height should be exactly 220px. If it does happen to be taller or shorter, I added a style element to the photo that will automatically convert the height to 220px. If that happens, however, it may negatively impact the photo’s quality, so try to make it exactly 220px high.

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 Photo

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: home_feature_photo. 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.

Your image will appear in 2 places. First, it will appear in the Featured Articles box (for that article) on your home page. And it will also appear on the single post page for that article; aligned to the right of the content. See this post for an example.

If you choose not to enter a photo for one or more of your featured articles, the theme will function properly without it.

Step 1 – Unzip the File

The file you downloaded can be unzipped with any standard unzip program (if you don’t have one already installed on your computer, Stuffit Expander is a popular option for PC or MAC users). Within the unzipped file, you will find the actual theme file along with the end user license agreement (please take a moment to read over the license agreement).

Step 2 – Upload the Theme File to Your Wordpress Site

For this step, you’ll need an FTP (file transfer protocol) program. An FTP program allows you to transfer files between your computer and your web hosting account. There are several available, but I use SmartFTP.

You’ll want to upload your theme folder to the /wp-content/themes folder in your Wordpress installation. Be sure you upload the theme folder, which will have one of the following names (depending upon which package you purchased):

• WP-MagTheme10-Basic
• WP-MagTheme10-Prem
• WP-MagTheme10-Dev

Step 3 – Activate Your New Theme

Login into your Wordpress control panel, and click the Presentation link. On the next page you’ll see all your available themes. Simply click on the WP-Magazine Theme 1.0 screen shot.

Step 4 – Set Up Your Featured Articles Section

If you don’t already have a “Featured” category, you’ll need to create one. Click the Manage tab, then Categories on the sub-navigation bar. Create a new category named “Featured.” Also, be sure the category slug is “featured.”

For the Featured Articles function to work correctly, you may also need to modify your permalink structure. To do that, click the Options tab, then “permalinks” on the sub-navigation bar. Just be sure that any option other than the default permalink structure is selected.

Finally, the only thing left to do is to place some of your posts/articles in the Featured category. By default, the theme is set up to display your 5 most recent Featured Articles in the featured article box on your home page. You can change that number, but we’ll save that for a future tutorial.

Step 5 – Install/Activate Plugins for Popular Articles and Most Commented Articles

In the right sidebar, you’ll see a little box I call the “Site Guide.” It’s designed to give your readers quick access to your most popular posts, most commented posts, site search, monthly archives and site tags (if you use them). For the popular posts and most comments posts to function, you’ll need 2 plugins; Alex Kings Popularity Contest (Note: Popularity Contest plugin has not been updated for WP 2.5 and above yet. There is a fix for it though here) and Nick Momrik’s Most Commented.

Be sure you download the latest version of each plugin and upload them to your wp-content/plugins folder. Then activate them. The theme will do the rest. If you’d rather not use one or both of these functions, that’s fine too. The theme will function normally without them.

Step 7 – Install/Activate Plugin For Related Post

If you look at the top of this article just under the post title, you’ll see a link that says “Related.” The related articles are generated by a plugin called WordPress 2.3 Related Posts. It pulls other posts that share the same tags as the post you’re viewing. You’ll want to download, install and activate the latest version. If you prefer not to use the related posts function, the theme will function properly without it.

Step 8 – Be Sure You Have an “About” Page

If you look on the home page in the Featured Article box, you’ll see a link to the right that says “About this Site.” When folks click that link, the theme is designed to display an excerpt of your “About” page. If you already have an About page, that’s perfect; just make sure the Page Slug reads “about.” To find the page slug, click Manage, then Pages. Edit your About page. On the right side of the Write Page, you’ll see a blue box named “Page Slug.”

If you don’t yet have an About page, well, go ahead and create one.

Step 9 – Add Some Content to Your Sidebars

If you’re using the 3-column version of the theme, you’ll need to add some content to your middle sidebar. So,click the Presentation link, then Widgets, and drag some content into Sidebar1. You can also add some content to Sidebar2 if you like, and it will appear just below the Recent Comment section. Be sure to click the Update button when you’re done.

Step 10 (Optional step for Lightbox users)

There is a Javascript conflict between Lightbox and the Featured Article glider. So far, I’ve been unable to find a fix for it, so in the meantime, here are 3 Lightbox alternatives that have been used successfully by other WP-Mag Theme users.

• Shutter Reloaded plugin
• Highslide
• akWpLightBox

Update – Temp Fix for Lightbox Issue

This is not a perfect fix, but it should make possible to use Lightbox without causing a problem in the Featured Article glider on the home page.

1. Open your Header template, and find these lines of code:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/tabber.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/effects.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/glider.js"></script>

2. Change it to just this line:
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/tabber.js"></script>

3. Scroll down a bit further and find this line:
<body>

4. Just after that line, place the following block of code:

<?php if (is_home()) { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/effects.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/glider.js"></script>
<?php } ?>

5. Click the Update File button.