{"id":29471,"date":"2021-09-08T17:00:53","date_gmt":"2021-09-08T15:00:53","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=29471"},"modified":"2022-02-23T09:48:49","modified_gmt":"2022-02-23T08:48:49","slug":"add-custom-widget-style-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-custom-widget-style-in-wordpress\/","title":{"rendered":"How to Add Custom Styles to WordPress Widgets"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-custom-html-page-to-wordpress\/\">custom stylization options<\/a> are used to make changes to the widgets\u2019 default style. However, it\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since widgets are a crucial part of every WordPress website, understanding how to add custom widget styles is extremely useful. In this article, we\u2019ll explain in detail how you can apply a unique style to every WordPress widget. With the knowledge you gain, you\u2019ll 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&#8217;ve split it into smaller steps:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#inspecting-wordpress-widget\">Inspecting a WordPress widget<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#manually-adding-custom-style-to-wordpress-widgets\">Manually adding custom style to WordPress widgets<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-plugin-to-add-id-or-class-to-wordpress-widgets\">Using a plugin to add an ID or class to WordPress widgets<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#additional-tips\">Additional tips<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Before we begin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Changing the stylization of WordPress widgets can be done using one of two ways\u2014with 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As a final piece of advice before diving in, we recommend placing any code you create for styling your widgets under Appearance &gt; Customize &gt; Additional CSS. With that being said, let\u2019s begin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"inspecting-wordpress-widget\"><\/a>Inspecting a WordPress widget<\/h3>\n<p>[\/vc_column_text][vc_column_text]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\u2019s done and then move on to the code snippets.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To inspect a widget, <strong>open one of the pages<\/strong> from your website that displays that widget and <strong>right-click somewhere within the widget\u2019s content<\/strong>. Then, <strong>select the <em>Inspect<\/em> option<\/strong> from the menu that appears. This will open your browser\u2019s developer tools.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"653\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Tags\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-768x518.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-620x418.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Within the developer tools, you will automatically be placed within the <em>Elements<\/em> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"589\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Tags Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-Widget-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-Widget-768x467.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-Widget-620x377.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"482\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-Widget-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Tags Widget Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-Widget-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-Widget-Elements-300x149.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-Widget-Elements-768x382.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Tags-Widget-Elements-620x308.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019ve 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:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">css-selector {\r\n\/\/ Insert CSS rules here\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This means you need to figure out both a unique <a href=\"https:\/\/www.w3schools.com\/cssref\/css_selectors.asp\" target=\"_blank\" rel=\"noopener\">CSS selector<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, to stylize the tag cloud widget we inspected above, you could use its ID <strong>tag_cloud-2<\/strong> or its classes <strong>widget<\/strong> and <strong>widget_tag-cloud<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"489\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Widget-Tag-Cloud.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Widget Tag Cloud\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Widget-Tag-Cloud.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Widget-Tag-Cloud-300x151.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Widget-Tag-Cloud-768x388.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Inspect-Widget-Tag-Cloud-620x313.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"manually-adding-custom-style-to-wordpress-widgets\"><\/a>Manually adding custom style to WordPress widgets<\/h3>\n<p>[\/vc_column_text][vc_column_text]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\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]All this requires a decent understanding of HTML and CSS. We\u2019ll explain using the same tag cloud widget from before.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 &lt;h5&gt; title, which has the <strong>qodef-widget-title<\/strong> class. And the second is the bottom &lt;div&gt; part that shows the tag links, with the <strong>tagcloud<\/strong> class. They are both wrapped with a &lt;div&gt; tag, which has <strong>tag_cloud-2<\/strong> as its ID, and two classes\u2014<strong>widget<\/strong> and <strong>widget_tag_cloud<\/strong>. Since we didn\u2019t want to apply styles to the inner section with tags, we wrote the CSS to target the wrapping div and its title.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"485\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method.jpg\" class=\"attachment-full size-full\" alt=\"Plugin Method\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-768x384.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-620x310.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can see the CSS code we created for this article section below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">#tag_cloud-2 {\r\ntext-align: center;\r\nbackground-color: #f7f5ff;\r\npadding: 20px;\r\n}\r\n#tag_cloud-2 .qodef-widget-title {\r\ncolor: #000;\r\nfont-size: 24px;\r\ntext-transform: uppercase;\r\nletter-spacing: 0.2em;\r\nmargin-bottom: 15px !important;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>This CSS can be broken into two parts.<\/strong> The first part are the rules that apply to the whole tag cloud widget (its wrapping &lt;div&gt; tag) specified with the ID of tag_cloud-2 (<strong>#tag_cloud-2<\/strong>). The second part are the rules that apply to the widget\u2019s inner title, specified with the qodef-widget-title class (<strong>.qodef-widget-title<\/strong>). The ID and class are also shown below, alongside the look of the widget before we applied the stylization rules.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"505\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manual-Method-Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Manual Method Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manual-Method-Inspect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manual-Method-Inspect-300x156.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manual-Method-Inspect-768x400.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manual-Method-Inspect-620x323.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"485\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manual-Method-Inspect-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Manual Method Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manual-Method-Inspect-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manual-Method-Inspect-Elements-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manual-Method-Inspect-Elements-768x384.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manual-Method-Inspect-Elements-620x310.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For this example, <strong>we used a couple of simpler CSS rules to showcase how you can style your widgets<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"521\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manually-Adding-Code-Result.jpg\" class=\"attachment-full size-full\" alt=\"Manually Adding Code Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manually-Adding-Code-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manually-Adding-Code-Result-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manually-Adding-Code-Result-768x413.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Manually-Adding-Code-Result-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now that you\u2019ve 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\u2019t meant to be copy-pasted, rather it\u2019s <strong>there as a guideline<\/strong>. You need to find the CSS selectors that correspond to the HTML markup of your widget(s). And, you need to<strong> use the CSS rules that would help you realize the widget design you want<\/strong> for your WordPress website.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"using-plugin-to-add-id-or-class-to-wordpress-widgets\"><\/a>Using a plugin to add an ID or class to WordPress widgets<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you weren\u2019t able to easily customize your WordPress widgets using the method above, which happens if the widget\u2019s HTML markup doesn\u2019t offer clear CSS selectors, then you should consider alternative approaches.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>One way of creating the custom code<\/strong> for styling widgets<strong> is by adding an ID or additional CSS classes to the widget markup<\/strong>. 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\u2019ll cover the former first by showcasing the Widget CSS Classes plugin from the <a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noopener\">WordPress plugin repository<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/widget-css-classes\/\" target=\"_blank\" rel=\"noopener\">Widget CSS Classes<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To avoid any confusion, we have to emphasize that the Widget CSS Classes plugin wasn\u2019t made for styling widgets directly. <strong>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.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, creating the code will be easier once you\u2019re 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\u2019s take a look at how the Widget CSS Classes plugin is used.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing the plugin<\/a>,<strong> navigate to Settings &gt; Widget CSS Classes<\/strong>, which will place you within the<em> Widget CSS Classes Settings<\/em> tab. Here you will be able to adjust the options for adding CSS classes to your widgets.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For this article, we left most of the options set to their default values, except for the<em> Show Additional Field for ID<\/em> option as we wanted to showcase how to add both a custom CSS class and ID. <strong>You should examine the options as well and adjust the ones that suit you according to your needs. After you\u2019ve done so, click on the <em>Save Changes<\/em> button below.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"670\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Plugin Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Settings-300x207.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Settings-768x531.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Settings-620x429.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>navigate to Appearance &gt; Widgets and locate the widget you wish to edit<\/strong> from its widget area.<strong> Open that widget<\/strong> and<strong> find the CSS ID and CSS Classes options<\/strong> that were added by the plugin. To use them,<strong> insert the ID and class name<\/strong> into the respective fields and <strong>press the <em>Save<\/em> button<\/strong> to update the widget.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Appearance-Widgets.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Widgets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Appearance-Widgets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Appearance-Widgets-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Appearance-Widgets-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/03\/Appearance-Widgets-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Tag-Cloud-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Tag Cloud Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Tag-Cloud-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Tag-Cloud-Widget-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Tag-Cloud-Widget-768x416.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Tag-Cloud-Widget-620x336.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After that, <strong>open a page that displays that widget<\/strong> and <a href=\"#inspecting-wordpress-widget\">inspect it<\/a>. 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\u2019s settings to the wrapping <a href=\"https:\/\/www.w3schools.com\/tags\/tag_div.ASP\" target=\"_blank\" rel=\"noopener\">&lt;div&gt;<\/a> 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 <strong>widget-even<\/strong> and <strong>widget-4<\/strong> classes to the same &lt;div&gt; tag.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"593\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Plugin Method Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Inspect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Inspect-300x184.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Inspect-768x470.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Inspect-620x379.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"426\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Inspect-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Plugin Method Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Inspect-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Inspect-Elements-300x132.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Inspect-Elements-768x338.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Inspect-Elements-620x273.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also see the same classes we used in the previous example (<strong>widget<\/strong> and <strong>widget_tag_cloud<\/strong>). However, they depend on the theme you are using as some themes opt to add custom classes to the widgets, while others don\u2019t.<strong> With the plugin<\/strong>, you don\u2019t have to worry about that as it allows you to <strong>consistently target your widgets using the ID or CSS classes of your choice.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When using this plugin and creating CSS code, you should be aware of<strong> the difference between the ID and CSS classes<\/strong>. An HTML element can only have <strong>one ID, which is used to target that exact element<\/strong>. On the other hand, an HTML element can have <strong>a lot of CSS classes, and they are used to target all the elements that share that respective class<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.custom-tags {\r\nbackground-color: #fff5f5;\r\npadding: 15px 20px;\r\nmargin-bottom: 30px !important;\r\n}\r\n.custom-tags .qodef-widget-title {\r\ncolor: #3F51B5;\r\nfont-size: 25px;\r\nfont-weight: 600;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"521\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Result.jpg\" class=\"attachment-full size-full\" alt=\"Plugin Method Result\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Result.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Result-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Result-768x413.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Plugin-Method-Result-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The principle here is the same as for the previous example\u2014you 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\u2019s 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\u2019t work on your end.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"additional-tips\"><\/a>Additional tips<\/h3>\n<p>[\/vc_column_text][vc_column_text]As we noted earlier, the ID name and class names that appear in a widget\u2019s 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 <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_sidebar\/\" target=\"_blank\" rel=\"noopener\">register_sidebar()<\/a>, with the following properties: <strong>before_widget, after_widget, before_title<\/strong> and <strong>after_title<\/strong>. You can see an example of this below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">register_sidebar(\r\narray(\r\n'id' =&gt; 'new-widget-area',\r\n'name' =&gt; esc_html__( 'New widget area', 'theme-domain' ),\r\n'before_widget' =&gt; '&lt;div id=\"%1$s\" class=\"widget %2$s\"&gt;',\r\n'after_widget' =&gt; '&lt;\/div&gt;',\r\n'before_title' =&gt; '&lt;h3 class=\"widget-title\"&gt;',\r\n'after_title' =&gt; '&lt;\/div&gt;'\r\n)\r\n);<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]By using the code above, you will be able to register a custom widget area named <em>New widget area<\/em>. Thanks to the <strong>before_widget<\/strong> and <strong>after_widget<\/strong> properties, you can specify the HTML that wraps every widget placed inside that widget area when it\u2019s displayed on the website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the code we created, every widget is wrapped with a &lt;div&gt; tag, with the correct ID and two classes assigned to it. Those are the widget\u2019s ID, the <strong>widget<\/strong> class, and the correct <strong>widget-name<\/strong> class. This is made possible by the <strong>%1$s<\/strong> and<strong> %2$s<\/strong> values. These values ensured that the tag cloud widget used in the first example would have the<strong> tag_cloud-2<\/strong> ID and the <strong>widget<\/strong> and <strong>widget_tag-cloud<\/strong> classes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Furthermore, every widget would have its title wrapped with a <strong>&lt;h3&gt;<\/strong> tag with the class <strong>widget-title<\/strong>. It corresponds to the <strong>&lt;h5&gt;<\/strong> tag with the class <strong>qodef-widget-title<\/strong> from the code shown in the previous two sections.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This means that you can <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-widget-area-to-wordpress\/\">create a custom widget area<\/a> 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\u2019t work for you. For example, if the Widget CSS Classes plugin isn\u2019t 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are two methods we recommend you use\u2014styling 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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Ensure your site has a uniform, homogenous look across its pages by creating a custom widget style for all or just specific widgets in your collection.<\/p>\n","protected":false},"author":11229,"featured_media":29506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[135,4,62,13],"class_list":["post-29471","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-customization","tag-tips","tag-widgets","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=29471"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29471\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/29506"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=29471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=29471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=29471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}