By default, WordPress does not offer any kind of widget styling other than plain basic looking widgets in a page. Unless a theme provides you with its own custom default styling, we are at the mercy of using a plugin to achieve this — which is actually a good thing.
Widget Styles
I kept the available styles to a minimum because of the design concept of this theme. However, you get to choice of using the default widget styling that comes with WordPress or you can use the custom styles I’ve given you. The list of classes below shows the style you will enter into the CSS Classes field:
- bar
- line
- box
- about
- cta
- custom-menu
Default Widget
Bar Style
Line Style
Box Style
About Style
CTA Style
Custom Menu Style
Note The above styles are the default style for each type, where the line, bar, and box are blue by default.
Install the Widget CSS Classes Plugin
To achieve the style results you see in the screenshot above, we need a plugin called “Widget CSS Classes” which when activated, adds a small text field at the bottom of every widget. In this field which gets labeled as “CSS Class”, we type in any of the classes I listed above in bold.
- Go to Plugins >> Add New
- In the Search field to the right, type in Widget CSS Classes, and then this should show up:
- Click to Install and then activate the plugin
Adding a Style to a Widget
When you activate this plugin, it adds a small field to the bottom of each widget. All you need to do is type in the widget style of your choice, or simply leave it empty if you want to use the default WordPress style.
EXAMPLE: Lets use the “custom-menu” style. When adding classes, make sure you leave a single space between each class.
When you “Save” the above style on the widget, the front-end result will be:
From this first screenshot to the second:
Changing the Default Colours
If you want to change the default colour of the bar, line, and box widget styles, there are colour option settings available to you:
- Go to Appearance >> Customize >> Colours
- Look for the widget colour settings such as:
- Choose your colours for either one and then click “Save & Publish“
NOTE If you want to change the colours of the existing options to something more than what is provided, you can by creating your own styles. This can be done by using a plugin that lets you do just that. Jetpack is one option if you use this already because it has a Custom CSS module you can activate. If you do not use Jetpack, you can use a plugin like “Simple Custom CSS” which is quite popular. Or, if you are using a child theme, you can create your new styles right in the child theme’s style.css file.