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.

Filed under: Blogging, Code & Scripts, Design, WordPress | | Written on August 17, 2007

9 Comments »

Comment by
Alex

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.

December 13, 2007 @ 5:45 pm

Comment by
Ryan

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.

December 13, 2007 @ 10:23 pm

Hallo danke fuer die Infos. Wie kann ich in deinem Blog noch weiter stoebern

December 22, 2007 @ 4:33 am

Comment by
Derek Pollard

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.

March 28, 2009 @ 6:42 pm

[...] at Dao By Design came up with a very clever solution for [...]

April 8, 2009 @ 7:00 pm

[...] at Dao By Design came up with a very clever solution for [...]

May 8, 2009 @ 8:23 am

Comment by
andrew

Hi, this sounds like it has great possibilities. forgive my ignorance, but would this work with wordpress.COM or only .ORG?

August 5, 2009 @ 10:40 pm

Comment by
Ryan

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.

August 6, 2009 @ 8:25 am

Comment by
John Sanders

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…

November 12, 2009 @ 2:37 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

PIGEONholed

RECENTLYspoken

  • Matt Said: @Ralph You can use the alpha transparency filter in your style sheet to fix your png problem in IE. Not...
  • jack Said: thanks helped a lot
  • Acez Said: I was having he same problem. Improved it using your tutorial.very helpful!! thanks
  • Media Street Said: Thanks for that. Just added it to my Joomla! site.
  • Ed Said: @bonz there is a timestamp in WP that identifies the times and classifies them as new, newer and newest.

BLOGroll

PASTposts

BADGEpatch

Blog Directory - Blogged Internet Blogs - BlogCatalog Blog Directory
Copyright © 2008 Dao By Design, All Rights Reserved.