Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Customize Widget Styles in WordPress

How to Customize Widget Styles in WordPress

Do you want your widgets to stand out from one another? By default, most widgets will look almost identical style-wise, but each widget is unique. Every widget serves its own purpose and they are not all equal. You can customize widgets in WordPress so they stand out from one another using CSS styles.

For example, you might have an email subscription widget and another widget on your sidebar. Building up your email subscribers is one of the most important things for new websites and making that widget stand out can help catch a visitor’s attention. Today, I will demonstrate how to customize widget styles in WordPress using the Widget CSS Classes plugin.

Why Customize Widgets in WordPress

Trying to distinguish your content from your competitors’ is very similar to trying to distinguish your widgets from one another. Think about it, a typical sidebar usually has four or more widgets and they are all competing for the same visitor on the page. Now, think about the importance of each widget on the sidebar. Odds are you could probably list your widgets from most important to least important.

If you can do that, then you probably want to make your most important widget stand out from the rest. Adding styles to your widgets will help you do just that. This can range from changing the background color to adding background images. Styling in WordPress with CSS has a lot of ways and options to choose from.

How to Customize Widget Styles in WordPress

Today, I will demonstrate how to customize widget styles in WordPress using the Widget CSS Classes plugin. This plugin streamlines adding CSS styles to each individual widget on your website. Of course, you do not need to use a plugin to do this, but this plugin will simplify the process for beginners. Every widget will have an option for you to create a CSS class that will style that specific widget only.

Installing Widget CSS Classes

Start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for Widget CSS Classes in the available search box. This will pull up additional plugins that you may find helpful.

Search for Widget CSS Classes in the available search box.

Scroll down until you find the Widget CSS Classes plugin and click on the “Install Now” button and activate the plugin for use.

Click on the "Install Now" button.

On the left-hand admin panel click on Appearance and select the Widgets option. This will pull up the widgets page.

Click on Appearance and select the Widgets option.

Using Widget CSS Classes

This plugin is extremely simple to use. There are no settings to change for the plugin. Every widget will now have a CSS Classes box at the bottom of it for you to directly add a class name to. This plugin will still require you to create code or copy code and modify it for your website.

Before you begin, it is very important to understand the difference between standing out in a good way and being an eyesore. Let’s say you have two widgets on your sidebar. If you use a blue background on your website, give the widget a different color or border around which will make it stand out for sure. At the same time, you could make it really stand out, in a bad way, if your colors don’t go well together. Don’t forget that it needs to look good and be distinguishable from the others.

Expand any of your widgets and at the bottom, you will see the CSS Classes box.

Locate the CSS Classes text box.

You can add the CSS class name in this box and use that name to style that particular widget by adding the code into the stylesheet. It will not affect any other widgets, which is a good and bad thing. This means you will need to apply that design to each widget individually, but this gives you the freedom to change one widget without affecting all of them.

Here is some sample CSS code you can add to change your background color:

.Your_CSS_Class_Name {
background-color: #800000;
color:#FFF;
}

Whatever name you entered into the CSS Classes textbox will replace the “Your_CSS_Class_Name” slot. You can change the background color by changing the color number. If you are unsure how to find hexadecimal color numbers for CSS check here. The color option will change any font color used.

There are tons of premade CSS templates on the Internet to use and modify for your website.

Make Sure Your Website Looks Good

Trying to stand out is important, but you need to make sure your website looks good at the same time. Picking badly matching colors to stand out wil have a negative effect on your website. Have it stand out, but be stylish at the same time. Your website’s design is extremely important. Having a bad appearance may make some visitors think that the content is also bad. Design and content creation are two very different things, but they benefit from each other.

Why do you want to make a widget stand out? Do you find the plugin helpful?

Author: Robert Giaquinto

Robert has been writing tutorials about WordPress and other CMS for over 3 years since joining the GreenGeeks marketing team. Thanks to this, he has had the opportunity to research and master several areas of WordPress including plugin usage, SEO, website design, and social media integration. When he is not creating content for WordPress, Robert is digging up new content ideas for environmental pieces. These range from the pollution in our air to the danger’s wildlife face. And with a bachelor’s degree in electrical engineering, he is always eager to discuss the way our technologies are affecting the environment, especially when it comes to solar energy.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.