WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm building a site which features sidebars next to each post/article displaying random thumbnails linking to other posts.

Each sidebar should never be longer/bigger than the post it's sitting next to. Now of course the height of the posts vary and I want to find out/calculate the height of each post and then generate a sidebar with more or less thumbnails.

What would be the best way to make this happen?

Here's a screenshot of the design/sketch (click to enlarge):
design sketch

Here is a current live version, but a lot is still to be done, work in progress!

share|improve this question
I believe yes, jQuery. But that makes the Question off-topic here, and it's more appropriate at StackOverflow. Here or there, you'll find programming help. So focus your Question on the concrete programming problems you are facing, i.e., with code sample. – brasofilo Dec 6 '12 at 19:03

JavaScript is definitely the way to go. Have a look at jQuery's height() and outerHeight() functions. outerHeight() includes margins and padding, height() doesn't.

To keep this as simple as possible I would render a fixed-height sidebar initially (from WP/PHP) where the height is a sensible estimate of your longest post and then use JavaScript to reduce it in height to suit. If you don't render the longest-possible sidebar first and then cut it to size you are going to have to use Ajax to go back to the server and fetch more sidebar content and that will be slower and result in more visual "pop-up" on the sidebar.

Make sure the sidebar is made up of elements (DIVs or LIs) that can be easily removed with a $().hide();

If you find that cutting the height of the sidebar gives a noticeable/annoying screen update then you could hide the entire scrollbar initially and only show the newly trimmed version - you'd still get a pop-up of sidebar but it would probably look a bit smoother to have nothing pop to a correct size scrollbar than to have a too-long scrollbar pop to a shorter one.

Nice typography on the site by the way. :-)

share|improve this answer
Hi Steve, thanks for your answer. Unfortunately I missed your reply because email notifications were off... Your solution is interesting. But I also have to keep track of which thumbs I display. And I'm not sure, this will be easy, when I initially render them, but then just hide them again. I would prefer to get the exact size of a post and then render the sidebar accordingly. I was thinking of saving a posts length the first time it get's loaded and take that information to render the right sized sidebar. Guess I have to dig into PHP/jQuery stuff a bit. Best, p – peek Jan 16 '13 at 15:52

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.