Creating a dynamic WordPress sidebar

I recently finished the redesign of my blog, The Humanaught, and as these things tend to – it came with a few forehead slapping mind scratchers.

The key one being that the design utilized the post’s footer to store comments. On many posts you wouldn’t even know there was a problem, however when I – on occasion – veer from my usual rambling and only write a tiny little blurb, the issue is evident.

Take, for example, a standard page layout. On one side (in my case, the left) you have your content, on the other you have your sidebar, and hanging out at the bottom you’ve your footer (fig. 1). If your content and your sidebar have a roughly equal amount of doodats in them, you’re golden – but when you short change your comment box, your sidebar extends its full length and makes everything look goofy (fig. 2).

custsb01.png custsb02.png

Not just goofy, but in my case, lacking functionality. As I want my readers to have quick access to the comments on each post, I needed to come up with a solution to this.

The Idea

Basically, the logic behind this is that depending on the length of the content I will either show or not show various elements in my sidebar. So, for example, if my post is rather long, I’ll display everything – recent comments, recent posts, blogroll, ads, etc. However, if my post is short, I bring out the axe.

We also need to take into account that the index.php (or Home page) should be immune to this process – as the page is generally long enough to accommodate even the most well-endowed sidebars.

Getting Started

The first thing I did was sat down with a pen and paper. I made a list of all the “elements” of my sidebar and then prioritized them.

One thing I tried to take into account is that on short posts I’d want to provide readers with a place to go to next, and preferring that it be on my site, I put things like Recent Posts and Recent Comments at the top of the list, with the the Blogroll and various badges near the bottom.

This isn’t about positioning, remember, just about prioritizing what bits are most important and should be displayed more frequently.

The Method

Digging into my WordPress template, I needed a dynamic way of determining the size of the content box. For this I threw the following code just above The Loop of my single.php and page.php pages.

I come out of that with a variable ($contlen) that gives me the character count of my content. Now all I needed to do was pass that variable to my sidebar and use some conditionals (IF bla bla bla) to decide what should be displayed and what should be cut.

The problem with the standard WordPress template is that the <?php get_sidebar(); ?> that WordPress uses by default to load all the goodies in sidebar.php doesn’t pass variables defined in other areas of the template.

To fix this we change:

to

Now any variables you set in single.php/page.php will carry over to sidebar.php.

Next up, we need to attribute some values to that prioritized list we made a bit earlier. We need to decide after what character count certain sidebar elements will be displayed. As this is all very much a “give or take” solution, figures will vary depending on things like font-size, the size of elements in the sidebar, etc. However, let’s use my numbers for the sake of … well… just because.

  • All – Search Box, Recent Posts
  • >1,000 – Badges
  • >3,500 – Recent Comments
  • >5,000 – Blogroll

To implement this, we just wrap the sidebar elements in IF statements:

 3500) { ?>
	

Recent Comments

The IF statement simply says if it is the home/index.php (is_home()) or (||) our content’s length ($contlen) is greater than 3500, display this crap – otherwise, move along.

That about does it, but for the sake of re-illustration, here’s the conditional to display the blogroll:

 5000) { ?>
	

Blogroll

What this doesn’t take into account are pages that display things like search results, particularly if those results are few to none. But with some simple modifications, I’m sure you can adjust this method to suit your blog’s particular needs.

16 thoughts on Creating a dynamic WordPress sidebar

  1. This is just what i was looking for. I tried to put de content words counter as you said. Also i have put the conditional tags in my isdebar, but it seems that the variable $xxx is not being received in my sidebar.

    here is my code :

    single.php

    <div class=”post” id=”post-“>

    <a href=”” rel=”bookmark” title=””>

    categoria: |

    main_right_home.php (sidebar)

     

    3500) { ?>

    <img src=”/images/masleidos.jpg” alt=”” />

    <img src=”/images/artnuevos.jpg” alt=”” />

    <img src=”/images/side-top-bot.jpg” alt=”” />

    <?php if (is_home() || $contlen
    <img src=”/images/artnuevos.jpg” alt=”” />

    <img src=”/images/side-top-bot.jpg” alt=”” />

    Can you helpme to resolve this?

    Thanks in advance.

  2. Hey Alex, make sure you change the code for where your main template calls the sidebar. By default WP uses its own built-in function to load the sidebar.php file. Because of this variables set in the main files (index.php, single.php, page.php, etc.) don’t carry over to the sidebar.

    You need to change it to:
    [?php include (TEMPLATEPATH . ‘/sidebar.php’); ?]

    (obviously changing the square brackets for their sharper cousins).

    Let me know if that works for you.

  3. Many thanks for this information. I have just been implementing a dynamic sidebar for one of our sites but was struggling passing the variables through. Your example of changing the method of including sidebar.php made all the difference.

    Thanks,

    Derek.

  4. Pingback: How to make the most out of your sidebar — WPCandy — WordPress Themes, Plugins, Tips, and Tricks
  5. Pingback: How to make the most out of your sidebar « Internet Turnkey Websites
  6. Hi, this sounds like it has great possibilities. forgive my ignorance, but would this work with wordpress.COM or only .ORG?

  7. I’ve no experience developing themes for WP.com, but if they let you use PHP just as you can with self-hosted WP, then yes it should.

  8. Fantastic tip, Ryan!
    This has bugged me about sidebars from day one and I just assumed it was impossible for the post section to talk to the sidebar section
    I thought about using javascript to peel things out after the fact if the sidebar was too tall. Your way is so much simpler…

  9. I tried this and it works but I’m also getting the page ID showing up on the page above the sidebar.

    Anyone else having this probelm or know of a solution for it?

  10. This editorial was very attractive to understand, I was pleased with it completely. I’m going now to mail it to my collegues to let all of them examine this too. Thank you completely.

  11. This seems to be the one and only place on the net where this extremely important topic is adressed. I dont get why there is no dynamic sidebar plugin / extension that takes care of exactly that – I mean this should be a basic feature of any WordPress sidebar, period

    Thanks alot for sharing! – You posted my prize for 3 hours worth of gooogling 🙂

  12. Hi, this is exactly, what I was looking for. But I have problem to understand your instruction.
    1) How do you change to what? Im missing outcome.
    2) where put 3500) { ?>
    – file
    – place

    Thank you if you can help me

    • Hi Josef, this post is largely obsolete now, as most WordPress themes now utilize widgets. I’ll do a post soon on how to best create a dynamic sidebar using widgets.

  13. Hi Ryan, obsolete or not, this is exactly what im been browsing the ´net for the last hour. Genius .Would you be able to post a codsnippet with the if statement and more so i can understand it a little bit beter and tweak it towards my site? Would greatly appreciate it.

Say something...

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Return to Top ▲Return to Top ▲