Why is that?

The main problem with blog navigation is that the content is not interlinked properly. That’s especially true for generic blogs that aren’t about one single topic.

When a visitor lands on your generic blog, they’re probably interested in only one of the topics that you cover. Say that topic is dogs. Even though all of your dog posts are grouped by “tags” and “categories”, your blog sidebar is probably distracting the visitor with links to other unrelated content about cycling, rock climbing or whatever else you write about.

Don’t distract your readers.

Give your readers only what they’re interested in at that moment and help them find more of it. Doing that will make your visitors stick around longer, browse more pages, and even improve your SEO!

Here’s how you can achieve that.

Clean Up Your Sidebars

On your post pages, you don’t have to tell the reader about all the categories and tags that you write about. Why would you clutter your sidebar with such information?

A list of categories and a tag cloud are useful information on the homepage because they give your reader an overview of the things that you write about. So, you can put those on the sidebar of the homepage, but not the sidebar of posts pages.

The problem is that most WordPress themes don’t separate the site-wide sidebar from the post sidebar. It is, however, essential to have a separate sidebar for posts if you’re serious about improving the navigation and layout of your blog. If your theme has a single sidebar for everything, read this post to learn how to give your posts their own sidebar.

Ideas for Relevant Content to Put on Your Posts Sidebar

The more a Web page is focused on a single topic and the more links to other related Web pages it has, the more search engine optimization weight it’ll carry for that topic. Making your sidebar relevant to the topic of the post itself will have huge benefits for your blog. Here are some ideas of the relevant content put on your sidebar:

• Related links to other posts on the same topic on your blog
• A list of categories that the post belongs to
• A list of tags that the post belongs to
• RSS feed for the categories and tags that the post belongs to

Use a Related Posts Plugin

Perhaps the best thing you could do to improve the navigation of your blog is to use a related posts plugin. The most popular plugin for this function is Yet Another Related Posts Plugin (YARPP).

Read this post to learn how you can put links to related posts on your sidebar using YARPP.

I hope you found these tips helpful. If you have any questions, comments, or suggestions on what else can be done to improve navigation, post them below!

Related posts:

1. Fix Yet Another Related Posts Plugin (YARPP) Widget and Add it to the Sidebar
2. Give Posts Their Own Sidebar in WordPress
3. Sensible Use of “Tags” in a WordPress Blog

In this tutorial, I will show you the proper way to create a dynamic sidebar that is solely for posts.

Create a PHP File for the Sidebar

The first step is creating the actual PHP template file for the sidebar. Name the file sidebar-post.php. Put this file in the same folder where sidebar.php exists. Now copy the content of sidebar.php to the new file.

My sidebar.php looks like this:

<?php global $vigilance; ?>
  <div id="sidebar">
    <?php if ($vigilance->sideimgState() == 'hide') : else : ?>
      <?php if (is_file(STYLESHEETPATH . '/sidebar-imagebox.php')) include(STYLESHEETPATH . '/sidebar-imagebox.php'); else include(TEMPLATEPATH . '/sidebar-imagebox.php'); ?>
    <?php endif; ?>
    <?php if ($vigilance->feedState() == 'disabled') : else : ?>
      <?php if (is_file(STYLESHEETPATH . '/sidebar-feedbox.php')) include(STYLESHEETPATH . '/sidebar-feedbox.php'); else include(TEMPLATEPATH . '/sidebar-feedbox.php'); ?>
    <?php endif; ?>
    <ul>
      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('right_sidebar') ) : ?>
        <li class="widget widget_recent_entries">
          <h2 class="widgettitle"><?php _e('Recent Articles'); ?></h2>
          <ul>
            <?php $side_posts = get_posts('numberposts=10'); foreach($side_posts as $post) : ?>
            <li><a href= "<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
            <?php endforeach; ?>
          </ul>
        </li>
      <?php endif; ?>
    </ul>
    <?php if (is_active_sidebar('left_sidebar')) echo '<ul class="thin-sidebar spad">';?>
      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('left_sidebar') ) : endif; ?>
    <?php if (is_active_sidebar('left_sidebar')) echo '</ul>'; ?>
    <?php if (is_active_sidebar('right_sidebar')) echo '<ul class="thin-sidebar">'; ?>
      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('right_sidebar') ) : endif; ?>
    <?php if (is_active_sidebar('right_sidebar')) echo '</ul>' ;?>
  </div><!--end sidebar-->

Unless you’re using the same theme that I copied this code from, Vigilance, you’ll most certainly have different code. Look at the code you’ve copied and find what looks like this:

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('right_sidebar') ) : ?>

In your new file, sidebar-post.php, you should substitute right_sidebar (or whatever you have) with post_sidebar.

Register the Dynamic Post Sidebar

Now that you’ve created the PHP file for a widget-enabled sidebar, it is time to register this sidebar so that you can add widgets to it. You’ll have to  look into how your theme registers sidebars. In your theme’s folder, you should find a file called functions.php. In that file, look for a line that looks like this:

if ( function_exists('register_sidebar') ) register_sidebar(array(

The code in the theme that I’m using here is this:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'name'=> __('Right Sidebar', 'vigilance'),
        'id' => 'right_sidebar',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));

In the code above, you’d have to substitute Right Sidebar with Post Sidebar and right_sidebar with post_sidebar. Apply the equivalent changes to your own theme’s code.

Finally, Call Your New Sidebar from single.php

In most WordPress themes, a post page is displayed using the single.php template file. This file is where a sidebar gets called on. You’ll have to edit the line that calls the main sidebar to make it call the new sidebar that you’ve created above.

single.php is located at the main folder of the theme. In your single.php, look for the code get_sidebar(); and edit it to get_sidebar('post');.

That’s it! Now your post pages will display their own separate sidebar. To add widgets to this new sidebar, go to the widgets panel, find the sidebar named “Post Sidebar”, and drag widgets to it.

I hope you found this tutorial helpful. If you have any comments, questions, or suggestions, please post them below

Related posts:

1. Fix Yet Another Related Posts Plugin (YARPP) Widget and Add it to the Sidebar
2. Clean Your WordPress Sidebar to Improve Navigation and SEO!

Most blogs list links to related posts at the bottom of each post page. Another great place to list related links is in the sidebar. YARPP does come with a sidebar widget. But as you can see in the plugin’s forum, many people are having problems with it. Also, it doesn’t allow you to separate the style and template from the main related posts links. Even the author of the plugin has disowned the built-in widget!

What I’ll show you here is how you can create your own YARPP sidebar widget and give it a different style and template from the main related posts links.

PHP Code for the Widget

Here’s the entire PHP code for this widget.

add_action('widgets_init', create_function('', 'register_widget("Related_Posts_Widget");'));
class Related_Posts_Widget extends WP_Widget
{
    function Related_Posts_Widget() {
        parent::WP_Widget(false, $name = 'Related Posts Widget');
    }

    function widget($args, $instance)
    {
		extract($args);
		extract($instance);

		echo	$before_widget;

		echo	related_posts(array('template_file'=>'yarpp-template-widget.php'));

		echo	$after_widget;
    }

    function update($new_instance, $old_instance)
    {
        return $new_instance;
    }
}

Copy and paste the code above in functions.php in your theme’s folder. You can now go to “Appearance” -> “Widgets” and you’ll see a new widget called “Related Posts Widget”. Simply drag it to your sidebar! But wait. Before you do that, you’ll have to create a template file for the widget.

Widget Template File

The template file is mostly made up of the HTML that the plugin will use to display your list of related posts.

For the widget code above to work, you’ll have to create a new template file and name it: yarpp-template-widget.php. The file should exist with the rest of YARPP template files, which is in the main folder of your theme.

The content of my yarpp-template-widget.php look like this:

<?php /*
Example template
Author: mitcho (Michael Yoshitaka Erlewine)
*/
?>
<?php if ($related_query->have_posts()):?>

<h2 class="widgettitle">Other Interesting Posts</h2>
<ul>
	<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
		<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><!-- (<?php the_score(); ?>)--></li>
	<?php endwhile; ?>
</ul>
<?php endif; ?>

You’ll need to know some HTML and PHP to modify the template.

But with this file in place, you can now simply go to the Widgets panel in WordPress admin area, and you’ll see “Related Posts Widget”, which you can add to any sidebar!

I hope you found this tutorial helpful. If you have any questions, comments or suggestions, post them below

Related posts:

1. Clean Your WordPress Sidebar to Improve Navigation and SEO!
2. Give Posts Their Own Sidebar in WordPress
3. Sensible Use of “Tags” in a WordPress Blog

The end results will be something like this. To link to an Amazon product, you would simply put

http://yourdomainname.com/amazon/[ASIN]

And this unique link of yours would forward to Amazon’s product and credit you for any sales. As you should’ve guessed, to link to a different product in Amazon’s catalog, you just change the ASIN number in the link above.

This should make it very convenient for you not only to link to Amazon, but also cloak your links effectively.

So, let me show you how to set this up…

First, you need to install the plugin Redirection. Through this plugin, you can setup automatic URL redirects.

Now, in your WordPress admin area, go to “Tools” and then “Redirection”.

You’ll see a section with the heading Add new redirection. Enter the following values in the form below it:

• In Source URL, enter /amazon/([^/]*)
• In Target URL, enter http://www.amazon.com/dp/$1/[Your Amazon Associate ID]
• Make sure that you check the box that says Regular Expression
• Click save, and you’re done!

Now, your blog will automatically direct visitors to Amazon products. All you have to do is supply the ASIN number like in the example above.

If you want more details or if you want to know how to do the same for your ClickBank links, check out my earlier article.

If you have any questions or if anything isn’t clear, feel free to ask in the comments.

I may create a WordPress plugin to make this even easier. Stay tuned for that.

Related posts:

1. Best Way to Organize and Cloak Affiliate Links in WordPress
2. Turn Keywords into Links with Word 2 Cash
3. Squeezing the SEO Juice Out of Your Affiliates

After reading some explanations, I still wasn’t satisfied. I couldn’t find a logical distinction between categories and tags.

So here’s what I decided to do…

Why it’s enough to just use tags and ignore categories

Categories and tags are essentially the same thing. Using both to organize posts is an overkill. Just use one — the more versatile. That would be tags. As for the categories, I’m letting all my posts fall under Uncategorized.

Tags are more concise and descriptive than categories. And after some time, the tag cloud gives very accurate visual depiction of the topics covered on a blog. The tag cloud tells what a blog is (mostly) about.

But to get the most out of tags and the tag cloud, some customization is required.

Theme customization

Themes come pre-equipped to handle categories. The theme I use on this website, showed the categories under each post. It showed the tags at the top (for SEO purposes, supposedly). I removed the categories and brought the tags to the bottom, where categories were. I renamed tags to Topics, as you can see at the end of each post.

Obviously, this required editing of the theme files.

Creating a Usable Tag Cloud Widget

The default WordPress tag cloud is ugly. That’s why very few websites use it. That’s a shame because like a said, a tag cloud can be very useful. That’s why I took some time to fix the tag cloud on this website and make a real use of it.

Here’s a sample of what I created

Custom WordPress Tag Cloud

Most popular topics appear first and with the largest font size. Then topics that are not covered as much appear later in the list and with smaller font size. Of course, this tag cloud changes as the variation of topics on the blog changes. After all, that’s the nature of a tag cloud.

One would think creating a tag cloud like that should be simple, right? Well, not if you want the topics to be comma-separated like mine are.

My custom made tag cloud widget

This tag cloud has the following features:

• Tags are comma separated
• Most popular tags appear first in the list

Here’s the code for the widget:

aadd_action('widgets_init', create_function('', 'register_widget("MX_Tags_Widget");'));
class MX_Tags_Widget extends WP_Widget
{
    function MX_Tags_Widget() {
        parent::WP_Widget(false, $name = 'MX Tag Cloud');
    }

    function widget($args, $instance)
    {
		extract($args);
		extract($instance);

		echo	$before_widget;

		// My widget says, "This Website is (Mostly) About".
		// You can change that to anything you want.
		echo '<h2 class="widgettitle">This Website is (Mostly) About</h2>';

		// You can change the behavior of this tag cloud widget
		// by passing different parameters
		// See a list of possible parameters at
		// http://codex.wordpress.org/Template_Tags/wp_tag_cloud
		$tags = wp_tag_cloud('echo=0&format=array&largest=1.4&smallest=1&unit=em&orderby=count&order=DESC&number=20');

		// This is what separates the tags by commas.
		// You can change the separator to any other character
		// The separater is wrapped in a designated class
		// to make CSS styling possible.
		$tags = implode('<span class="tag-separator">,</span> ', $tags);
		echo $tags;

		echo	$after_widget;
    }

    function update($new_instance, $old_instance)
    {
        return $new_instance;
    }
}

You can simply copy this code to the functions.php file in your theme, and it will create a tag cloud widget which you can add to your sidebar from WordPress’s widgets menu.

Make sure that you read the comments within the code. They provide more tips on customization.

More to come…

I think this tag cloud is already better than a simple list of categories, especially for a personal blog like this. But it could be improved even further.

For example, now users can click on a tag and see all the posts which belong to that tag. Wouldn’t be cool if they can select more than one tag and pull all posts that belong to the selected tags? That would require more customization and coding. I’ll post about it if I ever get to it

Related posts:

1. Clean Your WordPress Sidebar to Improve Navigation and SEO!
2. Fix Yet Another Related Posts Plugin (YARPP) Widget and Add it to the Sidebar
3. Give Posts Their Own Sidebar in WordPress

If you currently have or plan to have plenty of affiliate links on your WordPress based website, you should have a way to easily track and manage these affiliate links. You want to know how many clicks each link received and you want to be able to edit and change the affiliate link without having to revisit and change old content.

And to keep your website clean and organized in the eyes of search engines, there are a few things that will need tweaking.

Here’s how I create, manage and cloak my affiliate links.

Using Redirection

Redirection is a WordPress plugin that is made by John Godley, who works for Automattic, the company behind WordPress. Redirection helps you manage your blog URLs. Using Redirection, you could create a link like http://msafi.com/gotogoogle/ and set that link to forward to http://google.com. Similarly, you could put all your affiliate forwarders in a virtual directory like:

• http://msafi.com/affiliate/product1/
• http://msafi.com/affiliate/product2/
• http://msafi.com/affiliate/product3/
• and so on…

Most people don’t use affiliate for the directory name, though. They use goto or visit. Or like on this website, I simply use a.

Redirection also allows you to group related URL redirections together. So, you could create a group, name it Affiliate Links and put all your affiliate links there.

Create an affiliate link in Redirection

Once you have Redirection installed

1. Click on Groups in the top left corner
2. At the bottom of the page, you’ll see Add Group. Enter Affiliate Links in the textbox, and click Add.
3. Click on your newly added group, Affiliate Links
4. In the source URL, put something like /visit/product-xyz/ (don’t include your domain name, http://ursite.com)
5. For Match, select URL only
6. For Action, select Redirect to URL
7. Leave Regular expression unchecked
8. In Target URL, put your affiliate link

That’s it. You’ve added your first affiliate link to Redirection.

Now whenever you want to link to Product XYZ, use http://ursite.com/visit/product-xyz/. It’s even easier to remember.

Redirection also gives you the number of hits each link received. So, if you’re putting your links in relevant places and getting huge volumes of clicks but maybe no sales, you’ll know something is going on…

Cool tip: get Redirection to automatically create ClickBank affiliate links for you!

If you promote products for ClickBank, here’s a cool tip that you’ll find very useful.

All of ClickBank’s links have the following structure

http://YourClickBankID.VendorClickBankID.hop.clickbank.net

You can tell Redirection to automatically fill in the VendorClickBankID field for you based on a value that you provide in your URL. Like:

http://ursite.com/cb/vendorx311/

automatically redirects to

http://yourClickBankID.vendorx311.hop.clickbank.net

and

http://ursite.com/cb/sumvendor2/

automatically redirects to

http://yourClickBankID.sumvendor2.hop.clickbank.net

…and so on…

Here’s how you do this in Redirection:

1. In the Source URL, enter /cb/([^/]*)
2. In Target URL, enter http://yourClickBankID.$1.hop.clickbank.net
3. Make sure Regular expression is checked
4. Match should be set to URL only
5. Action should be set to Redirect URL

I have done this on my website here at msafi.com. So, now I can simply give out a link like http://msafi.com/cb/4idiots/. This will redirect to http://mksafi.4idiots.clickbank.net, which is the landing sales page for the product sold by 4idiots ClickBank vendor. You can replace 4idiots with any ClickBank vendor ID and it will still work.

Pretty cool isn’t it?

Perhaps a similar trick can be done to automate link cloaking and management for Amazon and Commission Junction, but I’ll have to look into that.

For now, let’s look into optimizing your affiliate links so that Google will not have trouble with them…

Helping Google not trip over your affiliate links

Now that you have a convenient and easy way to create and organize affiliate links, I’m gonna show you how to make sure that Google will not discriminate against your blog as a result of affiliate links.

First, whenever you add an affiliate link as anchor text make sure that you include a rel=”nofollow” attribute in the anchor tag. That is

Bad: <a href=”http://ursite.com/visit/product-xyz/”>Product XYZ</a>

Good: <a href=”http://ursite.com/visit/product-xyz/” rel=”nofollow”>Product XYZ</a>

If you want to automate the creation of anchor text links in WordPress, check out the plugin I created: Word 2 Cash.

Second, use robots.txt to disallow Google (and other search engines) from accessing your virtual affiliate links URL directories. Your affiliate link directories are /visit/, /cb/ and whatever else you may have created.

In your robots.txt file add lines like:

Disallow: /visit/*
Disallow: /cb/*

Do the same for any other affiliate link directory you have.

This will help Google index your website in a clean way and hopefully minimize discrimination against your outbound links.

That’s all there is to it. You now have a great way to create and manage your affiliate links. Just one last thing before you go.

Reducing Redirection database size

Redirection keeps a record of every redirect it makes. It stores these records in your database. If you’re gonna be using the plugin the way I described in this post, your records can build up and take a lot of space pretty quickly. What you want to do is set the records to expire after some time, say 30 days. To do that:

1. go to Redirection’s admin page
2. Click on Options
3. In the Expire Logs field, enter 30 and click Save.

Aaaaaaand you’re done!

Related posts:

1. Automatically Create and Cloak Amazon Affiliate Links in WordPress
2. Squeezing the SEO Juice Out of Your Affiliates
3. Great Networks for Software Affiliates and Vendors