Custom Colors in WordPress

Create a Custom Color in WordPress

Buying WordPress themes is great because you are getting a half-finished product when looking to make a website. But then, you decide to make the site your own. If you are anything like me, the first thing that you want to do it change the color of your website.

Maybe you are an expressive blogger who simply wants the color that hits the sweet spot. Perhaps you are a business that is trying to match the color of your brand and logo with the color on the theme you just purchased because theme “looked cool.” The fact is, sometimes code needs to be tweaked to change color and sometimes it doesn’t.

This article will go over CSS custom colors, the theme customizer, and how our themes are very easy to edit with your own look and color.

Use CSS to implement a custom color on WordPress

Note: Want the easy way out with implementing your own custom color on WordPress? Click here to navigate to the section about the WordPress Theme Customizer.

The first and most global way to edit colors is by using CSS in the editor of WordPress by navigating to Appearance > Editor on WordPress and modifying the style.css file.

Make sure that you create a child theme first in WordPress before you make any changes. Slocum Themes makes it very easy to create a child theme by simply navigating to our theme options section and selecting “One-Click Child Themes”.

Create a child theme css

Once you have created a child theme, it is time to modify the CSS to change the color of the different elements of a website. The way you do that in WordPress is by again going to Appearance > Editor. From there, you will find the section of the style.css file that has the color you want to modify in the parent theme. You will copy this file, without removing it or editing it on the parent theme.

WordPress Editor CSS

Once you have copied the area you want to edit, you are going to want to paste the content in the child theme in the WordPress editor. Once you have pasted this content into the editor, you will select the elements that you would like to tweak and tweak those elements only, leaving out the others.

Child Theme CSS WordPress

Here is a resource to find the color code you are looking for when applying a new color to an object in the stylesheet.

A Note about some WordPress Install

Not every WordPress install will give you access to the editor or access to save the editor.

It is possible that you will be restricted from editing a CSS stylesheet on WordPress because of the way permissions have been set up in your FTP with your WordPress files. You might have to adjust those permissions first.

You can also edit the colors using the CSS stylesheet while in the FTP, but be careful when you do this as to not tamper with important material or make a change that you can’t easily change.

Change the color of content in WordPress

There is also a theme customizer that was introduced in WordPress 3.4 that allows the user to live edit whatever color they would like on their WordPress theme.

WordPress theme color customizer

To get here, all you have to do is go to Appearance > Customize and tweak the color section. These color customizers will typically allow you to modify the colors of the content, the menus, submenus, links, and other aspects of a website.

Please note that many WordPress themes do not truly work with the customizer, as the theme developer has to code this specific ability into their themes.

That being said, here are…

WordPress themes that work with the Theme Customizer.

Here are some themes that work beautifully with the Theme Customizer and allow the user to manage colors in a way that is fitting to the theme.

Try the Free Versions of Our Themes First, Before you Buy!

How about a professional WordPress opinion?

Do you want us to use our keen design eye and create a good custom color? We offer our services in our full-service theme install, where we take one of our themes and implement a custom color, install your logo, and install our favorite plugins to get your website looking better than ever.

Contact us for more information.

We hope that you enjoy our content. If you decide to make a purchase after clicking on one of our affiliate links, we’ll earn a small commission at no extra cost to you. Thanks for reading! View our Affiliate Disclosure

Leave a Comment

Your email address will not be published. Required fields are marked *