Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

Child Themes in WordPress

Like regular Word Press themes, a child theme needs to reside in a directory inside the /wp-content/themes directory. The first step to creating a child theme is to add the directory that will hold it. For this example, create a new twentythirteen-child directory inside the /wp-content/themes directory.

To register the twentythirteen-child directory as a theme and to make it a child of the Twenty Thirteen theme, create a style.css file and add the appropriate theme headers. To do this, type the following code into your favorite code or plain text editor, such as Notepad (Windows) or TextMate (Mac), and save the file as style.css:

/*
Theme Name: TwentyThirteen Child
Description: my fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentythirteen
*/

Typically, you find the following headers in a WordPress theme:

  • Theme Name: The theme user sees this name in the back end of WordPress.

  • Description: This header provides the user any additional information about the theme. Currently, this header appears only on the Manage Themes page (choose Appearance→Themes).

  • Author: This header lists one or more theme authors. Currently, this header is shown only on the Manage Themes page (choose Appearance→Themes).

  • Version: The version number is very useful for keeping track of outdated versions of the theme. Updating the version number when modifying a theme is always a good idea.

  • Template: This header changes a theme into a child theme. The value of this header tells WordPress the directory name of the parent theme. Because your example child theme uses Twenty Thirteen as the parent, your style.css needs to have a Template header with a value of twentythirteen (the directory name of the Twenty Thirteen theme).

Activate the new TwentyThirteen Child theme as your active theme.

image0.jpg

The new theme doesn’t look quite right. The problem is the new child theme replaced the style.css file of the parent theme, yet the new child theme’s style.css file is empty. You could just copy and paste the contents of the parent theme’s style.css file, but that’d waste some of the potential of child themes. Instead, you want to tweak only those styles and/or features that you want to modify.

One of the great things about Cascading Style Sheets (CSS) is how rules can override one another. If you list the same rule twice in your CSS, the rule that comes last takes precedence.

For example:

a {
color: blue;
}
a {
color: red;
}

This example is overly simple, but it’s a good example. The first rule says that all links (a tags) should be blue, whereas the second one says that links should be red. Because CSS says that the last instruction takes precedence, the links will be red.

Using this feature of CSS, you can inherit all the styling of the parent theme and selectively modify it by overriding the rules of the parent theme. But how can you load the child theme’s style.css file so that it inherits the parent theme’s styling?

Fortunately, CSS has another great feature that helps you do this with ease. Just add one line to the TwentyThirteen Child theme’s style.css file at the end of the following listing:

/*
Theme Name: TwentyThirteen Child
Description: my fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentythirteen
*/
@import url('../twentythirteen/style.css');

A number of things are going on here, so let’s break it down piece by piece:

  • @import: This tells the browser to load another stylesheet. Using this allows you to pull in the parent stylesheet quickly and easily.

  • url('...'): This indicates that the value is a location and not a normal value.

  • (‘../twentythirteen/style.css’);: This is the location of the parent stylesheet. Notice the /twentythirteen directory name. This needs to be changed to match the Template: value in the header of the CSS so that the appropriate stylesheet is loaded.

After you refresh your site, you see that the child theme’s design and layout match the original Twenty Thirteen theme.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!