Introduction To Wordpress Child Themes

Introduction To Child Themes.....What They Are and How To Use Them

In the latest versions of Wordpress we now have the ability to use Child themes on our Wordpress websites.

By using Child themes along with your chosen Parent theme, you now have the ability to modify or change the styling provided by a Parent theme.

You now can easily change (override) the settings and rules in the stylesheet, page templates, and functions of the Parent theme without having to worry that all of your modifications will be overwritten when upgrading the Parent theme to a newer version.

That is made possible due to the fact that when you upgrade a theme, only the Parent theme files are changed. Your child theme files do not get changed during the upgrade. As a result, they are able to modify the Parent theme files just as they did before you performed the upgrade.

During this discussion on Child themes it will be assumed that you are somewhat familiar with the Wordpress admin area, and that you have at least a very basic knowledge of editing html, php, and css. In order to edit your theme files, you would login to your admin area, where you would then use the Editor link under the Appearance tab in your Wordpress admin area. You would then be able to choose which theme file to edit.

What Exactly Are Child Themes and How Do They Work?

A Child theme is just a way to modify or add to your Parent theme without actually making any changes to the Parent theme itself. It's really a very simple task to create your own Child theme. A basic Child theme needs it's own folder (name it whatever you want), and a stylesheet. Congrats, you've just created yourself a Child theme. Next step is to upload the folder to your sites theme folder, which is in the wp-content folder.

You are then able to activate the Child theme using the same procedure you would normally use to activate any WordPress theme using the wp-dashboard.

Your Child theme stylesheet must contain a reference to the Parent theme. That reference assures that all of the theme options, settings, widgets, page templates, etc will be a part of the Child theme. The Child theme can now fulfill it's purpose, which is to override or overrule certain aspects of the parent theme.

Taking into account the way that CSS works, and the way in which it's interpreted by the browser, the use of cascading stylesheets (CSS) makes it possible for you to add whatever specifications you want in the Child theme stylesheet, and have those specifications override the specifications in the stylesheet in the Parent theme. Powerful stuff, but simple to do!

Shown below is an example of a very nice looking Wordpress child theme. This particulat theme is Builder -Child-Ionic which is just one of the many themes available at iThemes.com

Here are some examples of using Child themes.....

Keep in mind when dealing with stylesheets that if you have a specification, for instance one defining text color, that appears twice in a stylesheet, the last one listed in the stylesheet prevails over the first one listed.

You can change just one part of a specification, or several parts, as needed. As an example, let's assume that your Parent theme stylesheet uses the following specifications:

body { /* This is where you normally set many of the universal defaults for the theme */
	background: #fff url(images/body-bg.gif) repeat-x;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px;
}

Now, suppose the only thing you wanted to change was the font size, say from 14px to 12px, for your site. No problem. In your Child theme all you have to change is that one specific property (font-size in this case), and let all of the other remaining properties stay as they are.

Here is how you would do it:

body { /* This is where you set many of the universal defaults */
	font-size: 12px;
}

As you can see, the huge advantage of using a Child theme is that you only need to add your desired changes to the Child theme stylesheet, rather than to the Parent theme stylesheet. They will override the Parent theme settings. As a result, once your Child theme is activated, it will behave just like the Parent theme.

Any further modifications can be done in the Child theme, thus leaving the Parent theme unchanged. This makes it easier and simpler to upgrade the theme without losing all of your modifications.

In addition to the required stylesheet, you can also include other theme files (for example an index.php file) to your Child theme, and you are then able to make specific modifications to that file. The theory is that if a file is included in the Child theme, WordPress will use that file. If a particular file is not included in the Child theme, WordPress will revert back to the Parent themes's file.

You are also allowed to add specific functions (this is pretty much for advanced users) by also including a functions.php file in the Child theme folder. Functions included in this file will be processed in addition to the themes default functions.

So. when should you plan to use a Child theme?

If you want to make any modifications to the theme you are using on your site, and if you want to be able to upgrade easily without having to remember which theme files you modified, and reapply your modifications to each of those files, then you definitely should use a Child theme.

Conversely, if you are 100% satisfied with the Parent theme as is, and you have no plans for making any changes, then there is really no need or reason to use a Child theme.

iThemes and Child themes

For several years now, I have been using iTheme Premium Themes on nearly all of my Wordpress websites, and I wholeheartedly recommend them to all of my customers. The next articles in this series on Child themes will be geared towards creating and using Child themes in conjunction with iThemes themes.

Stay tuned to learn more about using Child themes on your Wordpress website to make your theme modifications easier, quicker, and therefore, MORE FUN!