How to make Theme Modifications the correct way

December 24, 2013|

If you plan to customize your theme by making changes to any of the core theme files, even the style.css file, WordPress and Styled Themes recommends you use the Child Theme method instead of directly modifying the actual theme files. If you update a theme and you made modifications, guess what will happen? Your modifications will be totally lost and you will have to do it all over again. However, if you make your modifications using a Child Theme, then your changes will not be affected whenever you update the original theme (often called the Parent Theme).

When to Use a Child Theme?

  • When you need to make a colour change to any element that is not part of the customizer or theme option settings
  • 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 Luminescence Lite Theme also know as the parent Theme, and allows you to modify, or add to, the functionality of parent theme. Another way to describe 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.

Whenever the Luminescence 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 Luminescence Lite which is ready for you to make any changes to your theme. Start by getting the child theme from the Luminescence Lite theme folder where you will find the installable zip file.

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

Installing a Child Theme

Luminescence Lite includes an installable child theme already made for you. You can find it in your theme files within a folder named “child-theme”. Because it’s a zip file, you can install it just like any theme by using the WordPress installer. Once installed, activate it and then you can make your changes to most theme files, including the style.css. Please note that you need the parent theme installed first before installing a child theme. So in this case, you want Luminescence Lite installed first, then you can add the child theme for it.

How to Make a Change to Your Theme

I will give you a nice example here on how to make a change to theme using a Child Theme. If a theme has  this font styling for the body text, but you want to go from PT Sans to Georgia. First, our HTML css looks like this in our style.css file:

html {
	font-size: 100%;
	font-family: "PT Sans", Arial, Helvetica, sans-serif;
	color:#747474;
}

To customize this and to change the font to Georgia, we ill now open the child theme’s style.css file and we will simply create an override style like this:

HTML {
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 (Luminescence Lite) so then what you would be doing is copying the file from the same location in the parent theme of Luminescence lite, then pasting it into the child theme (same location) and then make whatever changes you want.

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.

If You Use the JetPack Plugin

If you are using or plan to use the JetPack plugin, you may not need the child theme. This is because JetPack includes a nice CSS Editor built in that lets you manage a theme’s stylesheet without the need of a child theme. The only caveat of this is that if you plan to modify any of the core theme files, either aside from or including the style.css file, then a child theme will be required. The JetPack plugin only lets you modify the stylesheet only.

Categories: Setup Tutorials for Luminescence Lite

Leave a Reply