Custom Website Design

After writing Effective Use of Blog Sidebars a couple of weeks ago I decided to look into the topic of dynamic sidebars. Typically, most blogs will us a standard sidebar for the entire site. WordPress users have a lot of potential functionality that is rarely used in terms of creating various sidebars and displaying them in different situations.

For example, when I was creating the theme for DesignM.ag I needed to have slightly different sidebars according to the category of the post. You can see the differences by looking at a standard blog post, a post in the community news category, and a post in the gallery category. For items in the news category I wanted a brief introductory paragraph with a button to submit news, followed by a list of recently published news items. On posts in the gallery I wanted the same thing, except for the gallery category instead of the news category. Posts in all other categories have a list of categories followed by recent news items. As a result there are three different left sidebars that are shown depending on the category of the post.

Why Would You Want Dynamic Sidebars?

Every blog visitor has different habits, but many tend to ignore sidebars because they are always the same. Mixing things up and keeping the contents of the sidebar relevant to the post can make them a bit more likely to be noticed. In short, blog sidebars are often ineffective because they are:

• Boring
• Outdated content (not changed frequently)
• All the same throughout the blog
• Not relevant to the rest of the page
• Full of too many links with a cluttered appearance

What Can You Do to Fix Ineffective Sidebars?

Dynamic sidebars can improve just about all of the situations mentioned above. They’re not as boring because they change as the visitor moves through the site, they’re more relevant to the content of each page, and they won’t need to be as cluttered because only the relevant information is displayed on each page (as opposed to cramming everything into one generic sidebar).

Dynamic Sidebars in Action

Since I was writing a post about dynamic sidebars I figured I should put them into action on this blog as well. So far I’ve only made two changes to the standard sidebar, but more may be coming.

First, I added a small box of text in the right sidebar on posts in the Social Media category. I have a blog called Traffikd where I write primarily about social media marketing and blogging, so I decided to add a promotional statement for Traffikd on these posts since it’s relevant to most readers within that category (these are mostly older posts before I launched Traffikd). You can visit the post 50+ Designers to Follow On Twitter to see the change in action. The image below shows the block of text, it appears right after the banner ads and before the Popular Posts section in the sidebar.

Second, based on the popularity of the collections of Photoshop tutorials, I decided to link them together in a different way. If you visit 40 Photoshop Tutorials for Lighting and Abstract Effects you’ll see a small list appear, again it’s in the right sidebar between the banners and the Popular Posts. You’ll see the headline “Photoshop Tutorials”, and then it links to all five of the collections of tutorials. You’ll also see a link for the post that you’re viewing because the 5 links are the same on all of the posts. It would be possible to set it up to only include links to the other four posts, but that would take some additional coding and I decided to keep it lighter.

It’s too early to tell if these minor changes have any noticeable effect in terms of click-throughs and enhanced navigation, but this just shows that there are plenty of options for creating your own dynamic sidebars.

Different Strategies for Creating Dynamic Sidebars

With WordPress you have some different options for achieving the end result of improved sidebars. Fortunately there are a number of good tutorials out there for these different techniques (plus the Codex), so I’ll try to point you in the right directions in addition to giving some of my own thoughts.

1. Use a conditional tag and a php include to insert an item.

This is the method that I used for both of the changes to the Vandelay sidebars. Using the first example, the php conditional statement essentially says, “if the post being shown is in the social media category, display the contents of the socialside.php file. If the post is in any other category, ignore this statement and just display the standard sidebar.”

This code is placed in the right sidebar php file exactly where I want the box of text to appear. The socialside.php file contains only one paragraph of text wrapped in paragraph tags and given a CSS class. The class of course is used to style the paragraph with the darker background and the border.

Here’s the code I’m using in my sidebar for this:

<?php if ( in_category(13) ) { include ('socialside.php'); } ?>

You can use this to do any number of different things with your sidebar if you get creative. Of course, you’ll want to change the number in the category to suit your needs. In my situation the social media category is number 13, but you may want to use another number, and you can exchange socialside.php for whatever you want to include.

In the second example that I’m using on this blog, I’m also using a conditional statement but in a different way. I wanted to display the Photoshop links only on 5 specific posts (probably more in the future when they are published). Unfortunately, these posts are not in their own category, they’re in the Design category, which has a ton of other posts where I don’t want these links to appear. This isn’t really a problem though, because you can also use conditional statements for specific posts instead of category. Each post has its own unique number, so it’s almost the same as the previous example.

Here’s the code I’m using:

<?php if ( is_single(324, 299, 279, 275, 242) ) { include ('ps.php'); } ?>

The “is_single” tells WordPress to base the conditional statement on the number of the individual post being displayed. The three-digit numbers are the numbers of the specific posts, and then you have the include for the ps.php file, which simply contains the image for the headline and then the links. I can easily add another post to this statement if I was to publish another collection of tutorials, and I could add the new link in the ps.php file as well.

For more on conditional tags see:

• Conditional Tags - WordPress Codex
• The Ultimate Guide to WordPress Conditional Tags

2. Create separate sidebars for the front page, single posts, pages, archives, etc.

WordPress uses several different files (assuming your theme contains all of these files) based upon the part of the site/blog that is being viewed. The homepage layout is controlled by the index.php file. The layout of a single page is controlled by the single.php file. Layouts of pages (not posts) are controlled by page.php, and so on. Each of these files will likely contain the code to grab the contents of the sidebar. For example, mine uses:

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

If you want a different sidebar to appear on your frontpage as opposed to your individual posts, all you have to do is create a second sidebar file, l_sidebar2.php. Now, if you want that sidebar to appear on individual posts you can use this code in your single.php file:

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

It’s a pretty simple change, but it gives you several different options.

3. Control the Style of the sidebar by switching the stylesheet

It’s also possible to use your stylesheet to give your sidebar different looks for various categories. It’s not an approach that I’ve used before, so I’ll point you to Using WordPress Categories to Style Posts from Lorelle via a guest author.

For lots of great information that can help with dynamic sidebars, see:

• WordPress Theme Hacks from Web Designer Wall.
• Customizing Your Sidebar from the Codex.
• Mastering Your WordPress Theme Hacks and Techniques from Noupe.

Some Ideas for Dynamic Sidebars

There’s really no limit to what you could do with dynamic sidebars. Here are a few of my ideas:

• Show author information
  This wouldn’t require coding strategies listed above, but if you have multiple authors you could include the author bio in the sidebar to change things up a bit from post-to-post.
• Include a relevant ad or affiliate link
  Maybe you have a specific post or category that would be great for promoting a specific affiliate product. You can use the strategy of conditional tags and includes to put it wherever you want.
• Make a series out of your posts
  This is essentially what I’m doing with the Photoshop posts. You could adapt this strategy to fit your own content and funnel traffic through related posts on a specific topic.
• Create a call for subscriptions on high-traffic posts
  Do you have a few specific posts that get a lot of search engine traffic consistently? Why not use a conditional tag and an include to put an extra call for subscriptions in your sidebar? I may try this approach myself.

What Ideas Do You Have?

Are you using dynamic sidebars on your own blog? If so, please share your approach with us. What other ideas do you have for creating dynamic sidebars?