1

I have a widget sidebar, but I'd like dividers between them. I can achieve this in CSS using boring borders, but I have a png image I'd rather use instead.

Is there a way to insert a divider after each widget item? (apart from the last one of course). I can do this in jQuery quite easily but I'd rather do it in the template file if at all possible

I'm guessing it's something for the functions file or where I register the sidebar?

Thank you

  • I guess I could add code after: 'after_widget' => '</li>' ? Or is there a better way of doing it? – Phill Oct 20 '12 at 0:43
  • The solution for excluding the last widget you can find here: wordpress.org/support/topic/… – user22713 Oct 20 '12 at 18:26
3
'after_widget' => '',

As far as I know, thats the best way to do it

0

You could use the :after CSS pseudo class, it's widely supported now and it accepts image content.

.widget:after{
    content:url(img/divider.png);
}

But I'm afraid that you cannot treat the last widget differently here, or you will have to add a specific class to all the widgets but the last one.

0

You can do it easily by modifying the css of the widget item. You can do more in CSS than the regular borders:

.widget{
background:url('../img/divider.png') no-repeat center bottom;
}

No php or unsupported CSS needed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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