Styling The Same Widgets Differently

You can style your widgets simply by grabbing the widget class using a Web Development browser extension named Firebug.

And you can grab the widget class from your source code and add it to a new CSS rule.

But what if you want to style the same widget differently on a specific page or widget area?

If you use the widget class, it will be styled the same way on your entire site regardless of which widget area’s you display it in.

The easiest way to style your widgets differently on specific pages is to add a custom class and i.d to each widget.

Widget CSS Classes Plugin

And the easiest way to add a custom class to any widget is to install the Widget CSS Classes plugin.

Here’s some FAQ that may interest you depending on your themes coding.

Once you install the plugin, simply add a new class to the widgets you want to style.

You’ll now find the HTML source code WordPress generates using your code will include a custom class.

Then you simply add your styling using the custom class as your new selector by adding properties with different values (declarations).

Add CSS To Your Widgets Custom Class

Lets take a look at a real example you can use to style one specific widget on your site.

Name your class anything you like.

In this example i used cat-widget as the new class for styling the Category widget.

Then create a new CSS rule by adding declarations to your custom class selector.

.cat-widget h3 {
background: #349734;
color: #fff;
padding: 10px 10px;
}

Add the CSS code to your child themes style.css file and your category widget will display a colored background for the title.

This code styles the widgets title by adding a background color to the title and changing the font color to with with 10px of padding.

Padding

You can also add the padding properties each on a single line rather than the same line and change the values to your needs:

padding-top:10px;
padding-bottom:10px;
padding-right:20px;
padding-left:20px;

And here’s an example of how the CSS code changes the background color and titles font color of the categories widget.

You could easily add a background color or background image, change the font style and make any other styling changes you want simply by creating new CSS rules using your custom class selector.

Here’s some more code you can use to style your widgets background, widget titles font color, padding on all sides and border.

//add padding to all sides and a border around the entire widget
.cat-widget {
 padding: 20px 20px 20px 20px;
 border: orange solid 2px;
}
// styles the widget titles font color, titles background color and adds 20px padding to the titles background.
.cat-widget h4 {
 color: white;
 background: #2B2B2B;
 padding: 20px 20px 20px 20px;
}

Style Widget Title Background

This code will add double lines above and below your widget titles.

.widget-area h4 {
    border-bottom: 5px double #cccddd;
    border-top: 5px double #cccddd;
    font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.625), 20px);
}

Displaying Widgets

You could also install the widget logic plugin if you only want the styled widget to display based on conditions.

Another option is to install a custom sidebar plugin.

Other Options

• Style Widgets Individually – Beginners Guide