I noticed that some of our theme buyers are customize WordPress themes for their own clients based on a premium theme. They often leave me message with start as “Just a idiot question…”, and then they may be ask me how to change the font color, how to ugrade the theme without lose their custom code and so on. Of course I’m pleased to help them fix these simple issues soon, but if you guys knows the following two important and useful tips to customize a WordPress theme, they will save much your time and improve efficiency.
Create A Child Theme
Why you should use Child Theme for your custom works? Let’s me quote the explanation from codex.wordpress.org
- If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
- Using a child theme can speed up development time.
- Using a child theme is a great way to learn about WordPress theme development.
Some buyers asked me how to ugrade the theme without lose their custom changes, but unfortunately they modified the parent theme directly, and the worst is that they forgot which files they modified, I had to tell them “Regrettably, you can’t ugrade your theme smoothly anymore, unless you make those changes one more time.” I absolutely understand their feeling after they received my reply, that’s why I alway strongly recommend to use Child Theme for the secondary development in each theme documentation.
So, how to create a child theme? That’s very easy. Just getting started with the following steps.
First, create a new folder under /wp-content/themes, whatever the folder name, let’s say “citynews-child”, and the folder name of parent theme is “citynews”.
Next, create a empty style.css file and place the following comments at top of the file.
/* Theme Name: CityNews Child Theme URI: https://www.themevan.com/main/item/citynews Description: The Modified version of CityNews theme. Author: ThemeVan Author URI: http://themevan.com Template: citynews Version: 1.0.0 */
You can replace the child theme information to what you like, but the important is “Template: citynews”, please make sure you wrote a correct folder name of parent theme .
If you like, just create a png screenshot for the child theme, it will appeared in the “Apperance” page like below.
Just activate it, that’s it.
Now, you can put all your custom CSS into style.css of child theme, they will overwrite the original styles of parent theme. If you want to modify a template, copy the template file from parent theme to the child theme folder, just change it without worry about lose the custom codes when you upgrade the parent theme!
For overwrite the php functions, you should know the WordPress hook usage, like add_action() or add_filter(), just learn more it in the documentation.
Find CSS selector With Chrome Developer Tools
Sometimes, you only want to fine-tune the layout, font color, a section color, etc. But, it’s hard to find the CSS selectors from those CSS files, right? Chrome Developer tools or Firebug is useful for you! Just watch the following video tutorial.
After you associated the style with element, copy the CSS selector name to the CSS file or insert into “Appearance > Edit CSS”(WordPress Jetpack plugin required) and redefine the properties.
Anyway, in a word, you’d better don’t modify the parent theme directly, just put all your custom changes into the child theme or insert the custom CSS or JS into the header or footer through wp_head() and wp_footer().