TEST DRIVE TEST LATER
Offer X

Working with Child Themes- Practical Approach

Author
14.February.2014| No Comments

This article explains how you can use child themes to protect your customization on theme files and still have the freedom to update your theme. SketchThemes provides you an easy way to use a child theme as we provide you with a prebuilt child theme for your SketchThemes’ theme. To learn how to install a child theme follow this link.

Playing it safe


If you have previously activated the Parent Theme and made customizations in it. We’d strongly suggest you to take backup of the “Theme Options” (Appearance >> [your theme name] Backup Options)of the parent theme, before you activate the child theme. After you’ve taken the backup of the Theme Options you can activate the Child theme from “Appearance >> your theme name Backup Options”. After activating the child theme you can import the backup of the “Theme Options” and it’ll get applied on the activated Child Options. If you activate the child theme without taking the backup you’ll loose all the customization of the Parent Themes’ Theme Options.

Let’s Roll


Considering that now you have installed and activated the child theme, let’s see a customization demo carried out on our child theme and see how it is reflected on our website. Before we move on to the demo, please note that inside the child theme folder there are only 3 files (style.css, functions.php, screenshot.png) with no code at all. Currently child theme is utilizing all the code of parent theme but the good news is that we can change a particular file and customize it as we want. Following demonstration will show how we can override CSS of the parent theme.

Overridding Style.css


We will use FileZilla (but you are free to use any FTP software of your liking) to navigate to the child themes files. The path will be [website root]/wp-content/themes/invert-child. To demonstrate, we will be changing color of the footer text.

footer_before

 

Open [website root]/wp-content/themes/invert-child/style.css and write the following lines of code:-

[css]
#footer .third_wrapper .copyright {
color: orange;
}
[/css]

 

And hence, the result


footer_after

 

In the above demo we didn’t make changes to the parent theme still we managed to customize it as per our requirements. Now even if we update parent theme these customization will not vanish as we haven’t touched any file in parent theme. This is exactly the reason why child themes are a boon to WordPress users.

COMMENTS

Leave a Reply

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

X

Subscribe Now

Get free download on your email

Send me new freebies, offers & news
X

Subscribe Now

Get free download on your email

Send me new freebies, offers & news