How to Add Custom Styles to WordPress Widgets
WordPress widgets tend to share a very similar default style. This style is sometimes adjusted by themes and plugins, especially in the case of custom widgets. Specific styling rules or even custom stylization options are used to make changes to the widgets’ default style. However, it’s unlikely that you will be able to fully customize the design of your widgets exactly to your needs using only the provided options. As such, you can look to creating custom styles as a way of styling your widgets.
Since widgets are a crucial part of every WordPress website, understanding how to add custom widget styles is extremely useful. In this article, we’ll explain in detail how you can apply a unique style to every WordPress widget. With the knowledge you gain, you’ll be able to improve various aspects of your website, attract more visitors, and grow your WordPress website as a whole. And, to make this topic easier to navigate, we’ve split it into smaller steps:
Qode Themes: Top Picks
View Collection
Before we begin
Changing the stylization of WordPress widgets can be done using one of two ways—with code or with an adequate WordPress plugin. With plugins, the priority lies in balancing the options it offers (such as a visual editing interface) its costs. On the other hand, using code to adjust your widget style lets you focus on tailoring the result to your preferences, and you already have all the resources you need.
In the sections below, we will cover how to create and add CSS code for styling WordPress widgets. We will explain the process using a simple example we created. And you will be able to use the tips we included to stylize any WordPress widget on your site.
As a final piece of advice before diving in, we recommend placing any code you create for styling your widgets under Appearance > Customize > Additional CSS. With that being said, let’s begin.
Knowing how to inspect an HTML element is an essential step when creating any CSS code. It will help you to better understand the structure of the page and create the appropriate CSS selector for your code. Since knowing how to properly inspect a page is vital for this topic, we will first explain how it’s done and then move on to the code snippets.
The widget we decided to use as a showcase for the inspection process is the tag cloud widget. But, you can use the same steps for any other widget as well.
To inspect a widget, open one of the pages from your website that displays that widget and right-click somewhere within the widget’s content. Then, select the Inspect option from the menu that appears. This will open your browser’s developer tools.
Within the developer tools, you will automatically be placed within the Elements tab, which displays the HTML structure of the page. You will be located exactly over the part of the content that you right-clicked to inspect.
You can move up or down the HTML structure until you find the exact element that you wish to style. To help you with this process, every element you hover over in the HTML structure will be highlighted on the page. You will also see the dimensions of that element on the page, alongside any paddings, borders, and margins that it has.
Once you’ve found the element you wish to stylize, you will need to target it with the appropriate CSS code. CSS code is applied in the following manner:
css-selector {
// Insert CSS rules here
}
This means you need to figure out both a unique CSS selector to target that element, as well as the CSS rules you wish to apply to it. To determine your CSS selector, you can start by looking at the ID of the element or its classes.
For example, to stylize the tag cloud widget we inspected above, you could use its ID tag_cloud-2 or its classes widget and widget_tag-cloud.
Apart from that, you will need to be familiar with CSS to be able to add appropriate CSS rules. In our snippets below, we will show a couple of simpler CSS rules to illustrate the process.
Generally, adding custom style to any part of a WordPress website can be done by creating a suitable CSS code. This includes WordPress widgets as well. Changing a widget’s style starts with inspecting the HTML markup of the widget to find a suitable CSS selector. And then applying a suitable set of CSS rules to it that will let you get the design you want.
All this requires a decent understanding of HTML and CSS. We’ll explain using the same tag cloud widget from before.
The first step of this process requires you to inspect the HTML markup of the widget carefully. Once we did so, we noticed that the widget contained two parts. The first is the <h5> title, which has the qodef-widget-title class. And the second is the bottom <div> part that shows the tag links, with the tagcloud class. They are both wrapped with a <div> tag, which has tag_cloud-2 as its ID, and two classes—widget and widget_tag_cloud. Since we didn’t want to apply styles to the inner section with tags, we wrote the CSS to target the wrapping div and its title.
You can see the CSS code we created for this article section below.
#tag_cloud-2 {
text-align: center;
background-color: #f7f5ff;
padding: 20px;
}
#tag_cloud-2 .qodef-widget-title {
color: #000;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 15px !important;
}
This CSS can be broken into two parts. The first part are the rules that apply to the whole tag cloud widget (its wrapping <div> tag) specified with the ID of tag_cloud-2 (#tag_cloud-2). The second part are the rules that apply to the widget’s inner title, specified with the qodef-widget-title class (.qodef-widget-title). The ID and class are also shown below, alongside the look of the widget before we applied the stylization rules.
For this example, we used a couple of simpler CSS rules to showcase how you can style your widgets. We centered the content in the tag cloud widget, gave it a light-toned background color, and adjusted the paddings on all sides. For the widget title, we added the CSS rules that would change its color, font size, and spacing between the letters. Also, we made the title uppercase and adjusted the margin below the title. After adding the CSS, we got the following result.
Now that you’ve seen the process behind creating CSS code for changing the widget style, you will need to create something similar for the widget you plan to stylize. The code we provided as an example isn’t meant to be copy-pasted, rather it’s there as a guideline. You need to find the CSS selectors that correspond to the HTML markup of your widget(s). And, you need to use the CSS rules that would help you realize the widget design you want for your WordPress website.
If you weren’t able to easily customize your WordPress widgets using the method above, which happens if the widget’s HTML markup doesn’t offer clear CSS selectors, then you should consider alternative approaches.
One way of creating the custom code for styling widgets is by adding an ID or additional CSS classes to the widget markup. Doing this will make the process of choosing a CSS selector easier. You can accomplish this with a suitable WordPress plugin or by using custom code. We’ll cover the former first by showcasing the Widget CSS Classes plugin from the WordPress plugin repository.
The Widget CSS Classes plugin is a lightweight plugin made specifically for adding CSS classes to WordPress widgets. Those classes can be predefined (e.g. classes that target the first and last widget within a widget area), or you can insert custom ones. This plugin also allows you to specify a custom ID property you can add to the widget.
To avoid any confusion, we have to emphasize that the Widget CSS Classes plugin wasn’t made for styling widgets directly. After adding the CSS classes or an ID to a specific widget, you will still need to create the CSS code to style that widget.
However, creating the code will be easier once you’re able to utilize the classes or the ID you added. As such, this is an excellent plugin for WordPress users who want to customize their widgets and are already relatively familiar with HTML and CSS. Now, let’s take a look at how the Widget CSS Classes plugin is used.
After installing the plugin, navigate to Settings > Widget CSS Classes, which will place you within the Widget CSS Classes Settings tab. Here you will be able to adjust the options for adding CSS classes to your widgets.
For this article, we left most of the options set to their default values, except for the Show Additional Field for ID option as we wanted to showcase how to add both a custom CSS class and ID. You should examine the options as well and adjust the ones that suit you according to your needs. After you’ve done so, click on the Save Changes button below.
Then, navigate to Appearance > Widgets and locate the widget you wish to edit from its widget area. Open that widget and find the CSS ID and CSS Classes options that were added by the plugin. To use them, insert the ID and class name into the respective fields and press the Save button to update the widget.
After that, open a page that displays that widget and inspect it. You should see a result similar to the one shown below. As the screenshot shows, the plugin inserted the ID and CSS class we added in the widget’s settings to the wrapping <div> tag of the tag cloud widget. And, since we chose to leave the widget number class and widget even/odd class options active, the plugin also added the widget-even and widget-4 classes to the same <div> tag.
You can also see the same classes we used in the previous example (widget and widget_tag_cloud). However, they depend on the theme you are using as some themes opt to add custom classes to the widgets, while others don’t. With the plugin, you don’t have to worry about that as it allows you to consistently target your widgets using the ID or CSS classes of your choice.
When using this plugin and creating CSS code, you should be aware of the difference between the ID and CSS classes. An HTML element can only have one ID, which is used to target that exact element. On the other hand, an HTML element can have a lot of CSS classes, and they are used to target all the elements that share that respective class. While we added both to our widget, we will only use the custom class to add the CSS in our example. Now that you know the difference between the two, you can decide when you need to apply your CSS to the ID instead.
.custom-tags {
background-color: #fff5f5;
padding: 15px 20px;
margin-bottom: 30px !important;
}
.custom-tags .qodef-widget-title {
color: #3F51B5;
font-size: 25px;
font-weight: 600;
}
Let’s examine the composition of this code example. It adjusts the background color and padding values of the tag cloud widget, as well as the margin below it. Furthermore, it changes the color of the widget title, as well as its font size and font weight. You can see the result we got after inserting this CSS code below.
The principle here is the same as for the previous example—you need to apply this information in a way that suits your website. Meaning, you will need to create a comparable CSS code snippet to customize a particular WordPress widget on your end. You can use the CSS class or ID that you added as the CSS selector and apply CSS rules that best suit your website’s design. With that being said, let us proceed to elaborate more on how the widget HTML markup is created and what you can do if the Widget CSS Classes plugin doesn’t work on your end.
As we noted earlier, the ID name and class names that appear in a widget’s HTML structure exist thanks to your theme. When registering a widget area, among other things, the theme author has the option to specify the HTML structure that wraps a widget placed inside that widget area, as well as the HTML structure surrounding its title. This is done using a function called register_sidebar(), with the following properties: before_widget, after_widget, before_title and after_title. You can see an example of this below.
register_sidebar( array( 'id' => 'new-widget-area', 'name' => esc_html__( 'New widget area', 'theme-domain' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</div>' ) );
By using the code above, you will be able to register a custom widget area named New widget area. Thanks to the before_widget and after_widget properties, you can specify the HTML that wraps every widget placed inside that widget area when it’s displayed on the website.
In the code we created, every widget is wrapped with a <div> tag, with the correct ID and two classes assigned to it. Those are the widget’s ID, the widget class, and the correct widget-name class. This is made possible by the %1$s and %2$s values. These values ensured that the tag cloud widget used in the first example would have the tag_cloud-2 ID and the widget and widget_tag-cloud classes.
Furthermore, every widget would have its title wrapped with a <h3> tag with the class widget-title. It corresponds to the <h5> tag with the class qodef-widget-title from the code shown in the previous two sections.
This means that you can create a custom widget area as another way of changing your widget style. In this case, you would also be adding custom IDs or classes to your widgets so you can stylize them later. And you will be able to specify the exact HTML code that wraps the widgets and their title, the way we mentioned above. While we recommend the first two stylization methods (manual and with plugin) as easier to implement, you can try this one if the others don’t work for you. For example, if the Widget CSS Classes plugin isn’t compatible with your theme or other plugins. This happens if your currently active theme has specified the before_widget and after_widget properties to be blank when registering their widget areas.
Final Thoughts
In this article, we discussed how you can create custom stylization code and apply it to specific WordPress widgets to change the widget style. This will make your widgets more visually engaging, potentially eye-catching, and likely to turn visitors into potential customers.
There are two methods we recommend you use—styling your widgets manually with CSS or styling them with a mix of plugin options and CSS. In both cases, we put together CSS code examples that you can use as a starting point. Now you just need to figure out which CSS rules you need to achieve your intended design and apply them in the way we showed you.
