I want to add different class (css) in widgets in site sidebar .

For example:

First widget in Sidebar -> class=sidebar-top1

Second widget in Sidebar -> class=sidebar-top2

third widget in Sidebar -> class=sidebar-top3

i want to add class in <div> tag.

how i can to do?

2 Answers 2


Check out this post I wrote on the wordpress.org board... it has some functioning code you can work from: http://wordpress.org/support/topic/how-to-first-and-last-css-classes-for-sidebar-widgets

  • Nice! Wish I seen those topics yesterday. :) Anyway I needed to implement grid rows so different classes logic. One note for that code - no need to check for empty sidebar, hook fires per-widget so it simply cannot run when processing empty sidebar.
    – Rarst
    Commented Dec 25, 2010 at 8:00
  • @Rarst Good call! I added a follow-up note with your comment on the original post--the WP board doesn't let you edit stuff.
    – MathSmath
    Commented Dec 25, 2010 at 19:31

What a coincidence, I just spent several hours messing with widget classes. I won't post my resulting code because it does stuff that is more complex and out of context for your question. Here are basics (or maybe "basics"):

  1. Widget is passed through dynamic_sidebar_params hook.
  2. Widget data is $params[0].
  3. Sidebar name is $params[0]['name'].
  4. Opening widget wrapper is $params[0]['before_widget'].

So you can filter this hook, check for sidebar you want to modify, keep track of widget count (likely with static variable), modify wrapper and return modified widget parameters.

I am way to sleepy to write out specific code, leave a comment if you still need help with this and I will get back to it tomorrow.

  • thanks Rarst but i dont understand your Description beacuse i cant use of it but math smath give a url that help me.. Have a good sleep :D
    – mehdi
    Commented Dec 25, 2010 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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