How to change your Sidebar Color in WordPress [2024]

Are you looking to change the color or background color of your WordPress sidebar? I’ve got you covered.

It is 100% possible to change the appearance and color of your sidebar on any theme. However the correct solution will depend on your theme’s capabilities, and how comfortable you are writing (or just pasting) CSS code.

Here are the methods I recommend (in order):

Check your theme settings
Write Custom CSS
Use a Visual CSS editor

I’ll walk you through each of these options. You can use the links above to skip ahead if you like.

Methods to change your WordPress Sidebar color

1. Theme Customizer Settings

Many themes include a customizer setting that lets you control the basic appearance of your sidebar. This can include controls such as:

Sidebar background color
Widget background color
Widget title color
Widget borders

To be clear, not all themes will offer this feature. But most premium themes do. Most of the better free themes also have sidebar styling settings.

So it’s worth checking your theme settings and customizer controls to see if there are some sidebar color settings. It’s the simplest, easiest solution and sure beats writing CSS.

For example, my theme (GeneratePress) has color settings for sidebar widgets and widget titles (though no background color for the sidebar itself).

2. Use Custom CSS to style sidebar

This method is a bit more advanced, but still manageable as long as you have a very basic grasp of CSS and CSS selectors. If not, I highly recommend the interactive free courses at Codeacademy.

Here’s how it works…

CSS (Cascading Style Sheets) are what control all styles on your website. Your theme loads a CSS file, as do many of your plugins. CSS turns plain HTML into something beautiful by using selectors to target CSS styles to specific elements.

So style your sidebar, all we need to do is find the right selectors to target. To do this, we’ll use the handy ‘inspector’ mode of your web browser. I use chrome, but Firefox and Safari have it as well.

Inspect your front-end code

We need to examine that HTML generated by your theme. On the front end of the site, right-click in the sidebar area and choose ‘inspect’.

We’re looking for the outer-most element with sidebar in the name. When you hover over the HTML element in the inspector it should be highlighted on your page (at least in Chrome browser).

Here’s the sidebar element for my site:

You’re looking for an element that is the at the same hierarchy level as your main content container, and it should have widgets as child elements. Like <aside class="widget"></aside>

As you can see, my sidebar element has a few properties:

id = “right-sidebar”
class = “sidebar is-right-sidebar”

Choosing your CSS Selectors

We can use either of these to target our CSS rule. It depends how specific you want to be. For example, if you want to target CSS rules to all sidebars, you could use the .sidebar class (my theme only). For targeting only the right sidebar, I’d use the unique id “right-sidebar” instead.

Write the CSS

To write your CSS rules, prefix your selector name with a # if it’s an ID, or a . if it’s a class.

So my rules would be:

#right-sidebar {
    background-color: hotpink;
}Code language: CSS (css)

.sidebar {
    background-color: #fafafa;
}Code language: CSS (css)

Additional Customization

You don’t have to stick with just background colors, or the sidebar element itself for that matter.

You can add borders, or even target the widgets inside your sidebar.

For example, here’s some example sidebar styles applied to widgets on my own site. You can click the button below to see the styles applied in realtime.

.sidebar .widget {
    box-shadow: 0 2px 25px rgb(0 0 0 / 20%);
    border: 2px solid #5a4f55;
    border-radius: 4px;
    background-color: #f2fffa;
}

.sidebar .widget-title {
    margin: -40px;
    margin-bottom: 20px;
    text-align: center;
    padding: 10px;
    background-color: #9affd4;
}

Code language: CSS (css)

Use a Visual CSS Editor

Visual CSS Editors like Microthemer are an absolute gamechanger for non-coders.

Microthemer is a visual design plugin that literally writes the CSS for you.

You can choose elements to target with your mouse, and generate CSS with a couple clicks. It’s an amazing tool for non-devs and can speed up your workflow even if you do know CSS.

Changing the text color using Microthemer to generate CSS — Style your sidebar using MicroThemer

How it works

Visual CSS editors work in two phases

Choose a selector
Choose the properties you want to change

You choose your selectors visually, simply by hovering over an element on the canvas. If you need more specificity, click the (+) icon (shown above) to add additional selectors.

Once chosen, you can tweak more than 150 CSS properties covering everything from backgrounds, colors and fonts to more advanced properties like positioning, transforms, and filters.

Without writing a single line of CSS yourself.

Try Microthemer Free

Final Thoughts

When changing the design of your sidebar, here are some good tips to keep in mind:

Less is more: Don’t over-design the sidebar with too many colors or heavy box-shadow. Look to mainstream sites for design inspiration. A subtle background color with a light border is usually enough.
Watch your targeting: If using CSS to style your sidebar, make sure you’ve chosen your selectors carefully. You don’t want to affect non-sidebar widgets, links or text by accident.
Be careful with Widths: Don’t specify exact widths for your sidebar (or child elements). This can cause your design to break if the element becomes wider than its container. Use max-width instead.

Recommended method

Unless you’re comfortable with CSS, I recommend using your theme to design your sidebar. If your theme doesn’t offer that feature, it may be time to upgrade.

How to Change Your Sidebar Color in WordPress