Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add Custom Styles to WordPress Widgets

Most sidebar widgets in WordPress usually look the same. It would be fine if all your widgets had the same importance, but the truth is that some widgets are more important for your site’s growth than others. For example, an email list subscription widget is certainly more important than an archives widget. Wouldn’t it be nice if you could easily style important widgets differently? In this article, we will show you how to add custom styles to WordPress widgets.

Using a Plugin to Add Custom Styles to WordPress Widgets

First thing you need to do is install and activate the Widget CSS Classes plugin. Upon activation simply go to Appearance » Widgets and click on any widget in a sidebar to expand.

Adding a CSS class to add custom styles to a WordPress widget

You will notice a new CSS Class field below your widgets, so you can easily define a CSS class for each widget. For example, we added the subscribe class to our subscription form widget.

Now you can go to your theme’s stylesheet and add your style rules there. Like this:

.subscribe { 
background-color: #858585;
color:#FFF;
}

Adding custom styles to WordPress widgets

You can add any custom CSS you want such as add background, change borders, use different colors, etc.

Manually Adding Custom Styles to WordPress Widgets

If you don’t want to use a plugin, then you can manually add custom styles to your WordPress widgets. By default, WordPress adds CSS classes to different elements including widgets.

Each widget in your sidebar has a numbered widget class. Like widget-1, widget-2, widget-3, etc. Using Google Chrome’s Inspect Element tool, you can find the CSS class for the widget you want to customize.

Finding widget class using Chrome's Inspect Element tool

As you can see in the screenshot above, the widget we want to customize has widget-2 class added to it by WordPress. Now go to your theme’s stylesheet and add your custom style rules.

.widget-2 { 
background-color: #858585;
color:#FFF;
}
.widget-2 .widget-title { 
font-weight:bold;
}

That’s all, we hope this article helped you add custom styles to WordPress widgets. Play around with the CSS and experiment with different colors. Use A/B split testing to figure out which custom styles work best for your site.

Also if you want an easier way to highlight your sidebar subscribe form widget, then try out OptinMonster because it offers multiple designs, A/B testing, and much more.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

20 CommentsLeave a Reply

  1. The Plugin was really Great but I had a problem…

    It doesn’t work when i add custom css….

    May be plugin css is overriding my code but.. that really sad…

    Hey Wpbeginner.com Team.. Please leave me a reply,]

    I You can tell me how to fix it…

  2. I love this plugin but every time I activate it, I have trouble with the gallery widget. It works fine with the plugin deactivated, but if I turn on the plugin, the gallery widget won’t save any images. All of the other widgets work fine. Does anyone else have this issue?

  3. Does how to instructional above also also include the ability to customize the font of the widget titles?
    Thanks!

  4. Finally, after failing at trying to decode the jargon I get on inspect, this article told me exactly what I needed.

    Thanks

  5. There is extra white space while creating extra widget area for header. Kindly tell us , how to remove this

  6. Hi, I tried to do it manually, inspected the element and its class but it did not work.

    I am trying to change the style of a WPform.

    Could you help me?

  7. i have added a widget area to my header using the functions.php and header.php files. i can see the widget ive added on my site but i want to put it next to the menu, any idea how to do this please? i want it to sit to the right hand side of the menu.

  8. It’s my first wordpress theme.I was nervous till found your article.It’s done thank you :)

  9. Why does my layout under widget styles only shows the padding option, without the bottom margin, gutter & row layout option.

  10. hallo
    I can not make any changes because it is inactive
    Being processed plugin / css / plugin-front.css (inactive),How can I activate pleas

  11. Hello, my theme doesn’t have a right sidebar, it came with just a footer widget area, can I use the custom css to add a right sidebar? Please help me, thanks

    • No, you will first need to define a widget ready area. Your theme may already have an option to use a sidebar layout. If it doesn’t, then we would recommend you to ask the theme author for support. On the other hand, if you feel confident in your coding skills, then go a head.

      Admin

  12. I want to change them manually. Am I right that by using widget-number class you actually can’t move them up or down in the widgets area, because their id will change, or it works differently?

  13. I was looking for something like this to add some style to my sidebar and stumbled upon the Flexible Posts Widget plugin. I think it’s always nice to have options ;)

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.