CHILD THEMES for customizing your theme

December 23, 2013|

If you plan to customize your theme, a Child Theme is highly recommended if you’re doing ANY changes to your Theme design. A child theme will function and look just like the Celestial Lite theme before you make any changes, but allows you to modify almost everything while protecting the official Celestial Lite theme you installed. This means if you update the original theme, any changes you made in the child theme will not be affected.

When to Use a Child Theme?

  • When you need to make a colour change
  • When you want to change a font
  • When you want to change part of the layout
  • When you want to add something of your own
  • ….basically any changes you want to make to the official theme you downloaded

As WordPress states, a Child Theme is a Theme that inherits the functionality of the Celestial Lite Theme also know as the parent Theme, and allows you to modify, or add to, the functionality of parent theme. Another way of describing a Parent/Child theme is:

Basically these are two separate themes, but how it works that the child theme connects to the styles and functions of the parent theme and duplicates the parent theme. Because these are separate themes, when you update the parent theme, the child theme will adopt the new changes, but whatever was changed with the child theme, these won’t get overwritten because again, it’s a separate theme (separate files). Still a bit confusing but it’s why WordPress recommends any core changes to the theme is best done with the child one.

Child Theme needs to be either uploaded via FTP or simply over WordPress dashboard, when the Theme is on your site click activate and that’s it.

Whenever the Celestial Lite theme is upgraded, your Child Theme and all of your modifications will be safe and remain unchanged.

Note: I recommend reading about Child themes from the official WordPress.org website here:

About Child Themes

Getting Started

To help you get started, I’ve made a custom blank child theme for Celestial Lite which is ready for you to make any changes to your theme. You can find this in the folder “child-theme” in your theme files. You can use the Dashboard Theme installer like you would for any theme, then activate the theme.

IMPORTANT: I recommend to ALWAYS backup your theme before making changes, updating, or to simply keep a backup for those unforeseen circumstances.

How to Make a Change to Your Theme

I will give you a nice example here on how to make a change to the Celestial Lite theme using the newly installed Child Theme. We can start with changing the main font of our body text from Arial to Georgia. First, our body css looks like this in our style.css file for Celestial Lite:

body {
font-family: Helvetica, Arial, sans-serif;
line-height: 1;
}

To customize this and to change the font to Georgia, we ill now open the “Celestial Lite Child” style.css file and we will simply create an override style like this:

body {
font-family: Georgia, serif;
}

Info: You may notice that I did not add the line-height to the child theme’s style.css. This is because we are not changing it, so there is no need to add it.

Other Types of Customization

You are not just limited to css, but you can also modify the layout structure of theme files and templates as well. The child theme includes folders which match what the parent theme has (Celestial Lite) so then what you would be doing is copying the file from the same location in the parent theme of Celestial lite, then pasting it into the child theme (same location) and then make whatever changes you want.

Example of Creating a new Page Template

Let’s use the default page template with the right sidebar column in our Celestial Lite theme to begin with:

child-template1

But now we will create a new page template with both the left and right sidebar column, which will add to our Celestial Lite Child theme’s “template” folder. Once done, here is a screenshot of our page using a new template that is added to our child theme:

child-template2

Word of Advice

When making any form of change to your theme using a child theme, always make a backup of your original theme for those unexpected circumstances that sometimes happen and beyond your control. A few other helpful tid-bits:

  1. You should have a basic understanding of HTML and CSS
  2. It is recommended that you also have some understanding of WordPress theme coding
  3. Take things slow and try not to rush
  4. Most IMPORTANT, try to avoid making any changes to the parent theme, and if you have already, try to move those changes to the child theme and then make sure the original theme is back to its original state from when you first installed it. If you keep any modifications in the original parent theme, when you update the theme, your modifications will be lost and you will have to do them over.

 

 

Categories: Setup Tutorials for Celestial Lite

Leave a Reply