Styling Widgets Based on Their Position in a Widget Area

Say you want to have your first widget in your sidebar to have a different style from the rest of your sidebar’s widgets. Sound impossible? Not with this code!

Just copy and paste the snippet below into your functions.php file and it’ll add a wrapper div around your widgets and apply ‘widget-1st’, ‘widget-2nd’ class names to them. Now, you can target that widget in your CSS: #mysidebar .widget-1st { background: red }. Sweet!

Comments  Leave a Reply

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!