How to Add Custom Styles to WordPress Widgets

In this tutorial, I will show you how to add custom Styles to WordPress widgets, without needing to know how to use CSS.

I recently had a support ticket from someone using my Elise theme. Instead of using the Home Page Slider which displays above blog posts on the home page of the Elise theme, she wanted to use three images, linking to other areas of her site. If she added three text widgets to the home slider widget, they displayed stacked, rather than displaying horizontally, so she wanted to know how to display the images horizontally.

Styling Widgets without CSS

We could accomplish this by customizing the CSS of the theme, to allow it to do this, but for someone who doesn’t know much about CSS, there’s a way around it which doesn’t require updating the stylesheet.

1. First thing you need to do is install and activate the Widget CSS Classes plugin.
2. Go to Appearance » Widgets » Home Slider
3. Drag three text widgets from the left to the Home Slider widget
4. Add one image to each of the three widgets
5. In each of the three widgets, add a CSS class. The first one will have a CSS class of one-third first; the next two will have CSS classes of one-third (see screenshot below):

How to Add Custom Styles to WordPress Widgets

 

You’re not confined to just using a text widget with the CSS Classes. You can use it with an image widget, a Featured Page, or Featured Product widget, or any other type of widget you would like to add to any widget location on your website.

Additionally, you’re not restricted to just using CSS Classes of thirds; you can use any number from 1 – 6; the first widget will always have a CSS class which ends in first (for example one-fourth first) and the remainder will have the appropriate width (one-half, one-fourth, one-sixth etc).

Here’s the “before” of the Elise theme:

And here’s the “after”:

 

If you don’t already own the Elise theme, did you know that I offer a FREE theme setup with the purchase of the Elise theme? You can learn more here.

Updated 6/12/18

This tutorial can be used if your theme doesn’t have particular styling added to a given widget. On the Brunch Pro theme by Feast Design company, the Homepage: Above widget is designed to display one widget, set to display three Brunch Pro featured posts. If you wanted to replace that with three widgets, pointing to three different pages of your site, the same principal applies as shown above – add the three featured page widgets, or three text widgets, and add the appropriate CSS classes to the widget.