WordPress Magazine Theme: WP-Ellie

WordPress Magazine Theme: WP-Launch

WordPress Magazine Theme: WP-Sublime

WordPress Magazine Theme: WP-Genius

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.