By Amanda Karen | CrunchSum
Child Theme Defined
If you have dabbled around in WordPress at all you may or may not have discovered the importance of having a child theme. The WordPress definition of a child theme: “…a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme”.
Why a Child Theme is Important
For purposes of this tutorial we are using the Twenty Eleven theme as our parent theme. Modify as needed to fit your parent theme folder/file names.
Example: You want to create a new blog or website using the WordPress platform. You choose to use the standard Twenty Eleven theme, but you want to change things like move page elements, modify the colors used for menu bars, changes the header and footer, etc. You make these changes by modifying the Twenty Eleven style.css file.
However, what happens when the Twenty Eleven theme has been updated or there is a WordPress update and you need to apply these updates to your site? You update your Twenty Eleven theme, but all of your custom style changes are removed and replaced with these newly updated files. This is why you need to create a child theme – to preserve all your custom style changes.
In this example the Twenty Eleven theme is referred to as the parent theme and the theme you create is the child theme.
These steps below are specific to those that self-host their WordPress blog or site. Modify as needed.
How to Create a Child Theme
Step 1: Locate your WordPress files
These will be the files that downloaded to your hard drive when you downloaded WordPress. Your WordPress theme files are found in the folders: wp-content, themes.
Step 2: Create a new folder for your child theme
Save your child theme folder in the themes folder, like the one below entitled “twentyeleven-child”.
As you can see, any files that are modified are placed in this folder, ensuring all custom changes will be maintained.
Create New style.css File
Continuing on with our example, if you want to make simple style changes, like altering the colors, fonts, or placement of certain items on your webpage, this is the file that enables you to do this. To create a child style.css file:
Step 1. Create a new file in the text editor you use
Step 2. Fill in new style.css file heading
Referring to the image below, fill in the following fields with your information: Theme Name, Theme URI, Description, Version, Template accordingly.
The important thing is to denote that this is the stylesheet for the child theme.
Step 3. Import existing style to new style.css file
Add @import url(“../twentyeleven/style.css”); to import all of the style data from the parent style sheet (refer to image below).
This will ensure that all of the parent theme styling is still applied to your theme plus whatever you modify in your child theme.
Step 4. Save new style sheet
Save this file as “style.css” in your child theme folder.
Installing Child Theme to WordPress
Step 1. Save child theme folder as .zip file
Once you have completed your customizations and are ready to apply them to WordPress, you need to save your child theme folder as a .zip file in order to install it on your WordPress site.
Step 2. Upload child theme
You install your child theme by uploading your child theme folder to WordPress.
Under Appearance, Themes, select Install Themes, click “upload”, select your child theme folder.
Step 3. Install theme
Once your .zip file has uploaded, click Install Now.
Step 4. Activate theme
Activating your child theme applies it to your website.
You go from this (Twenty Eleven theme):
To this (child theme):
Your child theme is now applied!
Creating and using a child theme can be overwhelming. If you have questions please leave a comment below or send an email to firstname.lastname@example.org.
First time visiting the CrunchSum blog? Subscribe to receive post notifications and follow @CrunchSum on Twitter for more WordPress tips.