Change Default Green Color WP 2014 Theme

I got a question from one of my YouTube video audience, a few months ago, he was asking how we can actually change the default green color of Twenty Fourteen theme.

Now before we do anything further here, I strongly suggest you to create a child theme first, click here to watch or read how I did it.

If you don’t really care about SEO (Search Engine Optimization) point of view, then it’s so easy, install “Fourteen Colors” which is created by Nick Halsey, and you’re done.

However if you want to make the SEO thing a little bit better, then you shouldn’t have a bunch of long code on your header, as Search Engine bots start crawling your page from top to bottom, as far as I know.

Long codes on header

I would clean this.

I didn’t say, it is a bad thing, not at all, but I personally would to have a cleaner header codes. I also have another video tutorial on the same principal here with this theme.

So my method to change green color WP 2014 Theme

Result of changing green color

Result of changing green color

1. Install the plugin, “Fourteen Colors”.

Fourteen colors plugin

Fourteen colors plugin by Nick Halsey

2. Still in dashboard, navigate to “Appearance”, and click on “Customize”. This will bring you to the theme’s customizer. This will bring you to the theme’s customizer. Another tutorial using customizer for the same theme, you can find on my previous post.

Related: How to Remove Twenty Fourteen Author Name or Link

3. Here you will find the “Accent Color”, “Contrast Color”, and “Background color” options.

Fourteen Colors Options

3 Options of the plugin

And to change the green color WP Twenty Fourteen theme, you can click “Accent color” and choose color you like by moving the slider, or choosing the solid provided colours which are already there.

Change green color 2014 theme

Change green to another color in Twenty Fourteen

Click Save&Publish button then “Close”. Refresh your browser, and you should see the changes.

This is the cleaning part begins,

4. Right click anywhere on your page, using Firefox or Chrome browsers, you will see “View Page Source” option, click that.

View Page Source

Right click anywhere – View Page Source

This is what you will see, a long css code on your header. If you want to clean it, copy these code, starting from the /* Custom accent color. */ text until the first </style> code on the bottom.

Then, add these code on child theme’s style.css stylesheet file.

Change the comment to be description that you can remember what the code is for.

For example, I added this line to mine:

/*Twenty Fourteen color change with Fourteen colours plugin – Custom accent color */

Which code to be copied

Which code to be copied

Changing CSS comments - easier to understand

Changing CSS comments – easier to understand

Click “Update File” button.

5. Refresh the blog, you should see the same result, but with a cleaner header code.

What Next?

Now that we are done, you can either keep the plugin or deactivate and delete it. I always think that using less plugin, our admin page will be faster, because it needs less resources to load.

How about if we want to change the color again in the future? You can do the steps above and repeat them. Leave your feedback below if you have any questions or other opinions.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page