The new WordPress default theme Twenty Fourteen was released with WordPress 3.8 on Dec 12, 2013. That very same day, a new plugin developed to easily re-color the Twenty Fourteen theme appeared in the WordPress Plugin Directory.
I realized about the existence of this plugin when, a few days after the WordPress 3.8 release, it was detected on a site by our WordPress Theme Detector tool. The name of the plugin caught my attention so I looked for it in the Plugin Directory. I found the Fourteen Colors plugin interesting enough so I thought I´d share it with our readers as soon as I had a little time to write this post.
Changing the default colors with the Theme Customizer
If you try to customize the colors of your site with the Twenty Fourteen theme default options, you will find that by using the WordPress Theme Customizer (Appearance > Themes > Customize) you will only be able to modify the Site title Color and the Background Color:
So, if you wanted to give your theme a further color twist, for example if you wanted to change the header or the sidebar colors, you would need to modify the styles of those elements by CSS editing (if you are going to do so, please create a child theme first as I always recommend).
But if you just want to change your color scheme in an easy, quick way, there is this plugin that will do that for you on the fly:
Changing colors with the Fourteen Colors plugin
The Fourteen Colors plugin allows you to change the look of your site by means of two new color options, each with its own color picker. These options take care of controlling the colors of a lot of elements such as the header, sidebar and footer backgrounds, the links, the featured content background, the navigation menu hover color and many more.
It is a very easy to use plugin. All you have to do is install it, activate it, and you will be able to see your new color options waiting for you on the Theme Customizer:
In addition to Site Title Color and Background Color, you will find these two new options:
- Accent Color: It is the color used for links, highlighting, menu elements hover or for the search icon shown at the top right corner of your site.
- Contrast color: It is the background color that will be used for your header, sidebar or footer, and on some other elements such as the audio/video player.
According to Nick Halsey, the author of this plugin, the Accent Color feature was originally developed in Twenty Fourteen core, but it was removed near the end of the development cycle due to a variety of concerns. He says this plugin addresses those concerns and adds the contrast color feature to enable a broad range of custom color schemes.
If you wanted to modify the color of some elements independently (for instance if you wanted your footer to have a background color different from the colors used on the rest of your site), then you would need to tweak your CSS.
But if all you want is to be able to modify colors in a general and readable fashion, this plugin provides an efficient way for easily changing your site´s color scheme.