Monthly Archives: February 2014

Child Themes in WordPress

If you update a modified WordPress template, for security patches etc.,  then your modifications will be lost as the template files will be overwritten during the update. However, if you create a child theme, you can update the parent theme and keep your changes.

Creating a Child Theme

child-theme-directory-structureTo create a child theme, first create a new directory in your themes directory. The themes directory is located at wp-content/themes. The  directory name should not include any spaces as part of the name and following common practice should preferably use the name of the parent theme folder with “-child” appended to it. For example, if you are making a child of the twentyeleven theme, your folder name would be twentyeleven-child.

A stylesheet file named style.css is then created and saved to the child theme directory. This is the only file required to make a child theme and it must start with the following lines:

/*
 Theme Name:   Twenty Eleven Child
 Theme URI:    http://mydomain.com/twentyeleven-child/
 Description:  Twenty Eleven Child Theme
 Author:       Fred Bloggs
 Author URI:   http://mydomain.com
 Template:     twentyeleven
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/

@import url("../twentyeleven/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

You can change each of these lines to suit your theme. The only required lines are the Theme Name, and the Template. The Template is the directory name of the parent theme. In this case, the parent theme is the TwentyEleven theme, so the Template is twentyeleven.

Because the child theme’s stylesheet is included after the parent theme’s then it’s styles will override those in the parent theme’s stylesheet (which is why they’re called cascading style sheets)

To activate the child theme, log in to your site’s dashboard, and go to Appearance > Themes. Here you will see your child theme listed and you click ‘Activate’ to use it.