Creating WordPress Child Themes

Here are some of the things we will cover in this basic tutorial on creating child themes for WordPress. Since I am a huge fan of the new Builder Theme by iThemes, I will be using the core Builder theme files in the examples.

• Create your own child theme for Builder theme
• Upload the child theme
• Activate the child theme on your site
• Modify the child theme files as desired

Once you have completed these steps and have the child theme activated on your site, instead of the parent theme, you can safely modify the stylesheet, page template, or even theme functions in the child theme without having to redo all these changes once you upgrade the theme.

At the end of this tutorial, you will find a sample of a very basic child theme for the Builder theme. Of course, you could modify it to work with other themes just by changing the reference to the parent theme stylesheet.

Here are things you will need in order to create your child theme:

• Access to your server using FTP so you can upload your child theme to your server
• A basic text editor so you can add the code to create and identify a child theme
• A parent theme, already installed on your site. Many themes, but not all, can act as a parent theme. Most, if not all, iThemes themes are capable of behaving like a parent theme

It should be pointed out that a child theme’s stylesheet replaces the stylesheet of the parent completely. (In other words, the parent’s stylesheet is not loaded at all by WordPress.) So, if all you want is to modify a few small things in the styling and layout of the parent —as opposed to making something new from scratch— you have to import explicitly the stylesheet of the parent, and then add your modifications in your new stylesheet below the @import line.

The following example shows how to use the @import rule to do that. If you want to create a completely new stylesheet for your child theme, and not use any of the parent themes styles, then simply leave the @import line out of your new style.css file.

Step 1…..Create the child theme

All a basic child theme needs is a stylesheet. In this tutorial, we will be creating a child theme for the Builder theme.

Just follow the steps below, and you will have created your first child theme. Bet you didn’t think it could be so easy.

• Create a new folder on your computer, and name it anything that won’t conflict with the name of themes that you already use in your WordPress installation. Keep it simple and don’t use slashes, dots, spaces or any other strange characters in the folder name. We will name ours BuilderChild
• Create a new file, using your text editor, and enter the following at the start of the file:

  /*
  Theme Name:     Builder Theme - Child Theme
  Theme URI:      http://www.yoursite.com
  Description:    Child theme for Builder
  Author:         Your-Name
  Author URI:     http://www.yoursite.com
  Template:       Builder
  */
  
  /* Import Stylesheets, do not remove this line, make sure you use the correct actual folder name.
  -----------------------------------------------------------*/
  @import url("../Builder/style.css");
  

  The most important line here is the reference to the Parent Template, which should be the exact (!) case sensitive name of the path to the parent theme in the wp-content/themes folder. You need to be sure that parent theme AND child theme reside in the same folder, wp-content/themes folder.

  The @import line assures that the parent stylesheet is imported, and that it will be used as the basis for this child theme. Any modifications to the styling can be done in this child stylesheet, and since these modifications will appear in the stylesheet after the original, the child theme stylesheet will overrule the original parents stylesheet.

• Save the file you just created and name it style.css. This is the only correct name to use for WordPress to be able to use the theme as a child theme.
• Copy the following from the original theme to the child theme:
• Copy the images folder from the core Builder theme folder
• Copy screenshot.png. This is so that a preview of the Parent theme shows in the WordPress dashboard

Upload your child theme to your server

Using an FTP program of your choice, upload the folder to your server, in the wp-content/themes/ folder.

Activate your child theme

Login to your WordPress dashboard and activate the child theme just as you would activate any other theme.

Modify your child theme as you wish

The next tutorial in this series will describe in some detail how to modify the appearance and functionality of your site by modifying your child theme.