WordPress Magazine Theme: WP-Aire

WordPress Magazine Theme: WP-Ellie

WordPress Magazine Theme: WP-Launch

WordPress Magazine Theme: WP-Sublime

WordPress Magazine Theme: WP-Genius

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.

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="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.