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.
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
1. Install the plugin, “Fourteen Colors”.
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.
How to Remove Twenty Fourteen Author Name or Link
3. Here you will find the “Accent Color”, “Contrast Color”, and “Background color” options.
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.
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.
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 */
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.
Good way to change the colour.