How to Add Custom Styles to Widgets in WordPress Site?

The latest full site editing feature in WordPress offers creating custom page templates for your site. However, using the traditional way of creating content in the editor and adding widgets and menus separately is more convenient for publishing posts. Generally, your theme provides styles for all the elements in the layout including widgets. However, you can easily add custom styles to widgets to make them appealing for your readers.

Widget Styles in WordPress

As far as we have checked, many WordPress themes do not offer options for customizing each widget in the sidebar. Especially, the lightweight themes like Kadence, GeneratePress, Astra, etc. offer plain sidebar widgets with the focus of minimal use. Fortunately, it is easy to customize your widgets with additional styles with the help of Gutenberg widget block editor. If you are still using the old Classic Widgets interface, then you need to do some analysis before applying custom styles.

Latest Posts Widget Example

Let us take an example to explain the concept with Kadence theme. Go to “Appearance > Widgets” and add “Latest Posts” block in the sidebar area. Since latest posts widget comes without any title heading you need to add a heading block and name the widget as “Latest Posts”. Below is how the latest posts widget with a heading block in the sidebar will look on Kadence theme.

As you can see, the widget shows as an unordered list without any background color and borders. Though Kadence offers options to change the colors and typography of entire sidebar, it is not possible to add styles to individual widgets from theme settings.

Now, we will explain how to add your own custom CSS styles to latest posts widget.

Add Custom Styles Using Block Settings

Some of the text based blocks like latest posts in Gutenberg comes with default color options.

• First select the heading and latest posts block, you can do this by holding shift key and select the blocks.
• You will see a pop-up toolbar and click on the “Change type….” Icon showing as two squares in the toolbar.
• Select “Group” option to group your heading and latest posts blocks as a single block widget.

• Now click on the gear icon showing nearer to top right corner to view the block settings.
• You will see lot of options for customizing the layout of your block.

• Click the “Background” option under “Color” section and apply a background color for your widget. You can apply a solid or gradient color as you wish.
• If required change the font size and add padding for your widget. It is possible to apply separate paddings for all four sides by clicking on the “Unlink Sides” icon.

• Click “Update” button to publish your widget and view one of the blog posts to see the styled widget in action.

Add Custom CSS Class to Widget Blocks

Though the above way is super easy, not all blocks offer background color option. In addition, you may want to add styles for borders and border radius which are not possible with the limited options available. You can handle this situation by adding custom CSS class to your blocks.

• You can do this for single block or group the blocks you need to apply custom styles.
• On the sidebar block settings, click “Advanced” section.
• Add your CSS class name under “Additional CSS class(es)” text box. For example, we will add the class name as latestposts in our case.
• Click “Update” button to publish the changes you have done in the widget area.

• Now, you can add any custom CSS style the latestposts class to beautify your widget.
• Let us add the following CSS styles for adding background color, padding, border and border radius to the latest posts widget.

.latestposts {
background: rgb(20 224 20);
padding: 25px;
border: 3px solid rgb(211 211 211);
border-radius: 8px;
}

• You need to add this code under “Appearance > Customize > Additional CSS” section as shown below. Make sure publish the site after adding custom CSS.

Now view your site’s page and you will see the latest posts widget in the sidebar will appear will all your custom styles. You can add any custom style using this method and make sure to use different colors to match with your site’s layout.

Note: Make sure to select “Group” option for grouping blocks and not “Widget Group” option. Though you can add custom CSS class to widget group, it does not seem to work as we have tested. Also, some blocks like image offers “Styles” setting to apply rounded or square corner without adding additional CSS classes.

Add Styles to Widgets in Classic Editor

Unfortunately, you do not have any settings for adding custom styles if you are using Classic Widgets Editor screen. You need to analyze the source code to find the CSS and add styles in the customizer.

• Go to “Appearance > Widgets” section, add a “Recent Posts” widget. Provide the title as “Latest Posts” and click “Save” button. We will explain here with “Recent Posts” widget which is the one available with Classic Widgets Editor screen.

• The appearance on the published site will exactly look like using Gutenberg blocks.
• Right click on the widget title and select “Inspect” option (this is with Google Chrome browser and the option may show as “Inspect Element” in some browsers).

• This will open the developer console in the browser showing the CSS classes linked to the selected widget title. Since we have to customize the entire widget that includes the title and list content, hover over the elements in the console and find the correct CSS class for the widget. In this example, you can see there is a <section> with an id as “recent-posts-2” and class as “widget widget_recent_entries”.

• Class widget is used for all sidebar widgets and hence you can either use the id “recent-posts-2” or “widget_recent_entries” class for adding custom styles.
• Let us use the same CSS styles we have used in the above example. So, add the code under “Appearance > Customize > Additional CSS” section. Make sure to use # when using id and dot when using class. But add only one code and not both as both id and class are attached to the same.

#recent-posts-2 {
background: rgb(20 224 20);
padding: 25px;
border: 3px solid rgb(211 211 211);
border-radius: 8px;
}

.widget_recent_entries {
background: rgb(20 224 20);
padding: 25px;
border: 3px solid rgb(211 211 211);
border-radius: 8px;
}

• It will look like below in the customizer with the CSS .widget_recent_entries class.

• The published post will show the recent posts widget with custom styles as below and you can see the custom styles you have added in the developer console.

Remember, the CSS class may be different in your case and you have to find the correct CSS id or class. In case if you rearrange the order of the widgets in sidebar, make sure to recheck the CSS class and change it in the custom style if required.

Using Plugins to Add Custom Widget Styles

The last option is to use plugins to style your widgets. If you are on Classic Widgets Editor, then try Widget Options plugin. This will add custom options to each widget as shown in the below picture. Click on the gear icon and add your custom CSS class or ID. After that you can add your styles in the customizer section as explained above.

Since the same process works by default with Gutenberg blocks editor, you do not need additional plugin. In fact Widget Options plugin will also only work when you disable Gutenberg widgets block editor from the plugin’s settings page.

Final Words

Gutenberg widgets block editor is the best option for adding custom styles to widgets in WordPress site. You can make use of the default block settings or add custom CSS classes to each widget block as you need. The only difference with Classic Editor is that you need to manually find the CSS class for the widget that you want to add custom styles. In both editors, your CSS styles should go into the customizer section as explained above. When you want to add additional styles, simply go to the “Additional CSS” section and append your code to the existing styles. Alternatively, you can use the plugins to add custom styles for your widgets.