Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add Custom Styles to WordPress Widgets

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add custom styles to WordPress widgets?

Styling your widgets allows you to keep your branding consistent and highlight important information for your users.

In this article, we’ll show you how to easily add custom styles to WordPress widgets without breaking your website.

Adding custom styles to WordPress widgets

We’ll show you three ways to add custom styles to WordPress widgets. You can pick one that works best for you.

Before we begin, this article requires some CSS knowledge so you can style widgets. You’ll also need to add custom CSS to your WordPress theme.

If you’d prefer a no-code method instead of CSS, you can skip to method 3.

Let’s get started.

Adding Custom Styles to WordPress Widgets using Block Editor

WordPress widgets now use the block editor to add widgets and blocks to widget-ready areas and sidebars.

One of the advantages of using the block editor for widgets is that you can easily add custom CSS classes to each block.

Simply go to the Appearance » Widgets page and click on the widget where you want to add custom styles.

Adding custom CSS class to widgets in Block Editor

Next, you need to scroll down to the Advanced tab under the Block panel. From here, you can add a custom CSS class.

Don’t forget to save your changes by clicking on the Update button.

Now, you can add custom CSS to your WordPress theme targeting that particular CSS class.

Simply go to Appearance » Customize page and switch to the Additional CSS tab. There, you will see a live preview of your website with a box to add your CSS rules.

Add CSS rules

Note: If you can’t see Customize under Appearance Menu, then take a look at our article on how to fix missing theme customizer in WordPress admin or use the WPCode plugin to add your custom CSS.

Here is some basic CSS we used.

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

After adding your custom CSS, you can preview your website to see it in action.

Block widget with custom style preview

The problem with using the block editor widgets is finding the right block to target.

An easier fix would be to add blocks into a Group block to easily style them together. You can read more about grouping blocks in our guide on how to use the WordPress block editor.

Adding Custom Styles to Classic Widgets in WordPress

This method is for you if you use the older classic widgets on your WordPress website.

For this method, you need to install and activate the Widget Options plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Widget Options is a powerful plugin that adds extra options to your WordPress widgets. This includes the ability to show and hide widgets based on the user device, role, and other conditions.

The plugin also adds an option to add custom CSS classes to your WordPress widgets.

Simply go to the Appearance » Widgets page and click on the widget where you want to add the custom style.

In Widget settings, you’ll see an extended range of options. From here, you need to click on the Gear icon to add your custom CSS class.

Adding custom CSS class via Widget Options

Once you are finished, don’t forget to click on the Save button to store your widget settings.

You can now add custom CSS rule to your theme using the CSS class you just entered. For instance, we used the following CSS on our test site.

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

This is how it looked on our test website.

Classic widget preview

Applying Custom Styles to WordPress Widgets With CSS Hero

One problem with the above two methods is that you need to write CSS code. However, not all users know CSS or just don’t want to write code themselves.

In that case, you can use CSS Hero. It is a custom WordPress styling plugin that allows you to add custom CSS to your WordPress theme without writing any code.

First, you need to install and activate the CSS Hero plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item to your WordPress admin toolbar at the top.

Next, you need to visit the page where you can see the widget you want to style and click on the CSS Hero button at the top.

CSS Hero button

This will open the page in CSS Hero editor interface.

It is a live editor where you can simply point and click on any item on your website and change its style.

CSS Hero editor

Simply take your mouse over to the widget that you want to style and click to select it.

After that, you can use the menu on the left to style your widget any way you want.

Select and edit the widget

This includes advanced styling options like gradients, typography, padding, margins, and borders.

Styling options in CSS Hero

Once you are finished, don’t forget to Save button to store your settings.

You can now preview your website to see your changes in action.

Widget preview CSS Hero

We hope this article helped you learn how to add custom styles to WordPress widgets. You may also want to see our pick of the most useful WordPress widgets for all websites or see our guide on creating custom WordPress theme from scratch without writing code.

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

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. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

21 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ankush says

    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…

  3. Rachael says

    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?

  4. Regina says

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

  5. terry says

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

    Thanks

  6. irfan says

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

  7. Thomas says

    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?

  8. daniel says

    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.

  9. Deniz Kumru says

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

  10. ivan says

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

  11. Rimi says

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

  12. Grace says

    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

    • WPBeginner Support says

      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

  13. Mr.T says

    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?

  14. Correen K says

    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 to WPBeginner Support Cancel 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.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.