Enhanced Sidebars with Dynamic Content

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.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

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.

Dynamic 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.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

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:

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:

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?

If you like getting design inspiration by looking at excellent blog designs, you’ll love our new gallery site Blog Design Heroes.

Published July 23rd, 2008 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

66 Responses

Comments are now closed on this post.

  • Janko, July 24, 2008

    What a great article. It made me think about my sidebar… I will have to do something about it

  • Evan Skuthorpe, July 24, 2008

    Varied sidebars are the way to go. It makes sense to have relevant content on your side bar for whatever particular section of the site you’re in.

  • VandelayDesign, July 24, 2008

    Janko and Evan,
    Thanks for your comments.

  • liam, July 24, 2008

    Completely agree, nice tips & Ideas, must admit I’ve neglected my sidebar a little. I wanted it to have complete control over the content so made everything static apart from a few sections, but I may need to take another look into this at some point :)

  • Dwayne Charrington, July 24, 2008

    You know what? This article actually inspired me. Dynamic sidebars are a fantastic idea, and definitely a good way to keep your visitors interested with fresh content.

    Thanks for the inspiration.

    - Dwayne.

  • Sasa Bogdanovic, July 24, 2008

    One thing that bothers me much with WordPress is that category Ids have to be hardcoded, like in

    <code>
    <?php if ( in_category(13) ) { include (‘socialside.php’); } ?>
    <code>

    It is true that changing them is insane as links to the pages of that category would result in 404, but having dependency on meaningless hard-coded values is neither semantic nor sane.
    This also makes the theme practically unusable on other blogs for obvious reason that categories will not be the same.

    Steven, don’t get me wrong, nothing against your example. Sadly, this is the way WordPress works.

  • Vandelay Design, July 24, 2008

    Liam,
    I’m with you. I like control over the sidebar elements so I use mostly static items, plus it’s less strain on the server and the database. Some changes here and there may or may not help. We’ll see.

    Dwayne,
    Good! Thanks for the feedback.

    Sasa,
    No offense taken. The method shown above is what I use, but if I’m not mistaken I think you can also use the slug of the category. Still has some limitations like you mentioned. WP is definitely not perfect, but for a free CMS I think the pros far outweigh the cons (mostly the community and the endless options).

  • Keith Gill, July 26, 2008

    This article actually inspired me. Dynamic sidebars are a fantastic idea, and definitely a good way to keep your visitors interested with fresh content.

  • Anthony, July 27, 2008

    Cheers for the info dude, its really helpful!

  • flisterz, July 27, 2008

    Definitely agree with Sasa. That is the most disappointing part when I’m coding for a WP theme.
    Anyhow, this is a great article. Sidebar should be as dynamic as the main part of the site. :)

  • Jeriko, September 4, 2008

    Since WordPress 2.6, get_sidebar() accepts a sidebar name as parameter, which then looks for a file sidebar-name.php in the theme folder. E.g. get_sidebar(‘singleview’) loads sidebar-singleview.php as a sidebar, with sidebar.php as a fallback if the wanted sidebar isn’t available.

  • Chad, September 22, 2008

    Good stuff. Thanks for the tips and other ideas. I first really delved into using dynamic sidebars for my biz site (click my name). I call different includes depending on the page, or category being viewed. It really does help break the “same old content” feel, that normally sits in a sidebar.

  • Alan, October 5, 2008

    Another alternative – my own plugin to make all widgets appearance conditional

    http://wordpress.org/extend/plugins/widget-logic/

  • EarlMobile, February 22, 2009

    Thank you for the inspiration. I will think about the thing with the linking of posts belonging to the same series.

    Yesterday I dynamised my blog’s sidebar in another way. I felt that when displaying shorter posts or pages it would look better if I would switch to a shorter sidebar in order to avoid big space between the actual content and the footer. I am glad I actually got beware of this terrible design mistake… :P

  • buffo, February 25, 2009

    Can anyone tell me what I have to do to setup this “author information” part? I’d love to put this in the sidebar, with changing information on the corresponding article author.
    I’ve read everything above again and again, but I didn’t get it.
    Anyone? :)

    • Vandelay Design, February 25, 2009

      Buffo,
      You can enter the author information in the “users” section of the dashboard.

  • Chris, March 11, 2009

    Nice, clear post — helped clarify lots of things for me. What I’m wondering, though, is whether it’s possible to create a piece of logic that creates the sidebar on the fly by using the tags ascribed to a post.

    This might be the wrong way to go about it, but here’s what I’m wondering: is it possible to create a piece of code that looks at the tags (one or more) on a particular post, stores that information in a variable and then looks for any other posts with identical tag(s) and displays the title/subtitle/first few lines in the sidebar?

    To take a practical example (close to my own heart…) suppose you had a WordPress-power site for a magazine and you had lots of post with the tag ‘environment’. Is it possible to use that info to display 2 or 3 other articles tagged with ‘environment’?

  • Vandelay Design, March 11, 2009

    Chris,
    I’m not sure if you could do it exactly as you’re describing, but you could list recent posts from a certain category or tag. There are also a lot of related post plugins that you could use.

  • Steven, April 26, 2009

    Lots of potential, hope there’s some good premium plugins that take advantage of it coming up..

  • Connie, April 30, 2009

    Do you think it’s possible to add a unique author bio in the sidebar for every new post? Or would that mean one would have to make a unique php file for each author? It seems like the text widget might be a start, but not sure if it’s possible.

    Thanks.

  • Dynamic Web design, June 8, 2009

    Great information, thanks for these tips.

  • tmanning, July 14, 2009

    Finally, a way to keep the side of my pages from being boring. Just got wordpress and looking into some good themes.

  • Stu McLaren, August 24, 2009

    This was a great post which gave me a few more ideas on different things to display in the sidebar.

    We are essentially doing the same sort of thing using the “Widget Logic” plugin.

    I’ve also heard the “TS Custom Widgets” plugin is good for this sort of thing as well.

    Anyway great stuff!

    Stu

  • SEO Hertfordshire, September 30, 2009

    Annoyingly I still can’t get this to work! My sidebards look like they buildt in the 90′s so hopefully I work out how to do it soon! It’s driving me mad

  • Teen Network, December 2, 2009

    Awesome post thanks for the tips on Dynamic sidebars.

  • Vikky, May 16, 2010

    Thank you such a comprehensive article. I am helping a school create its presence online, and had wanted to have different right sidebars for different pages. Now I know exactly how to efficiently implement the requirements. Thank you.

  • srikar, May 22, 2010

    wow ! I never thought of it, i will try this DYnamic side for sure

  • Rolf, June 27, 2010

    Great Article, thanks for the nice informations

  • Danielle, July 30, 2010

    I’m using different sidebars for different pages on my site… using:

    if(is_page()) {
    if (is_page(‘page’)) {
    get_sidebar(‘page’);
    } elseif (is_page(‘page2′)) {
    get_sidebar(‘page2′);
    } else {
    get_sidebar();
    }};

    Is it possible to assign multiple pages to a sidebar? I’ve tried doing it separated the page names with commas and it didn’t work for me… Thanks! (great article!)

  • Techie Zone, March 8, 2011

    I usually use method 2 as described above as it serves the purpose pretty well with very less modifications and usage of conditional tag.

  • alex, April 10, 2011

    Total Widget Control gives you complete control over widget placement and simplifies working with dynamic sidebars, you should look into it.