how to create a child theme with a theme stylesheet

Here is a really awesome reference for child themes.

In case that link doesn’t work, I’ll summarize:

The theme I’m using for this website is Twenty Eleven.  This is the parent theme.  Whenever the parent theme is updated, I lose all the modifications I made in the files of the parent theme.  The idea is to make the modifications in the child theme so that any update to the parent theme will not affect my modifications.

To create a child theme, open your text editor (I used Notepad) and paste the following:

/*
Theme Name:     Twenty Eleven Child
Theme URI:      http://caroldrive.com/
Description:    Child theme for the Twenty Eleven theme
Author:         Your name here
Author URI:     http://caroldrive.com/
Template:       twentyeleven
Version:        0.1.0
*/

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

Theme Name and Template lines are required.  All the other lines are optional.  Please note: for Template, use the exact name you see in your directory for your parent theme.  It is case sensitive.

In my directory below, my parent theme is highlighted on the right: twentyeleven.

directory

Save this file as style.css on your computer.  You will be uploading it to your directory.

Open your ftp directory.  (I was so confused for the longest time on where to find my directory – I’ll probably do a post about that later). In themes folder, save a new directory for your child theme.  I named mine “twentyeleven – child”.  In the child theme folder, I uploaded the file style.css.

child theme directory

Now you have a child theme in your directory.  Any modification you want to make, you should make it in this file using css, after the line:

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

If you want to make any updates to any of the other files in your parent theme (i.e. function.php), just create another file in your child theme to do so.

Leave a Reply