Creating a Child Theme in WordPress

I keep forgetting how to do this .. so here is my aide-memoire.

A child theme is configured like a theme, which means a theme directory, and a style.css file in it.  Template files and functions.php are not required in this directory, as they will be picked up from the parent theme.  The one distinguishing line in style.css is the “Template: parent-theme” line.

As an example let us create a child of the “Twenty Ten” theme.

/*
Theme Name: Twenty Ten - NutSEx
Theme URI: https://www.drmagu.com
Description: Based upon Twenty Ten
Version: 0.1
Author: Dr Magu
Author URI: https://www.drmagu.com
Template: twentyten
*/

The only required lines are the Theme Name, and the Template lines. The Template is the directory name of the parent theme. In this case, the parent theme is the Twenty Ten theme, so the Template is twentyten, which is the name of the directory where the Twenty Ten theme resides.

So we create the twentyten-nutsex directory, and plop the above style.css in it. To keep things looking pretty, we add a screenshot.png image as well.  Typically we copy the screenshot from the parent theme.

And yes, the theme now shows in the admin panel, but when we activate it, we seem to have lost all styling, menu settings etc.  So we now import all the styles from the parent.

/* Import parent styling. */
@import url('../twentyten/style.css');

The site now shows (kinda) correct, except, the menus don’t.  For the Twenty Ten theme, the menus need to be wiped & reset in the child theme.

Styles can be overwritten in style.css.   We are also free to replace or add template files.

As a simple example, we replaced the standard WordPress credit in the footer area.

So, we copied the footer.php template file and edited the site-generator div as follows:

<div id="site-generator">
<?php do_action( 'twentyten_credits' ); ?>
<span style="color: #993300;"><strong> <a title="M3PCS Web Design" href="http://www.m3pcs.com">M3PCS Web Design</a> </strong></span></div>
<!-- #site-generator -->

And we added the following style to the style.css file:

#site-generator a {
 background: url("images/m3pcs.png") center left no-repeat;
 color: #666;
 display: inline-block;
 line-height: 16px;
 padding-left: 20px;
 text-decoration: none;
}

And the result is …  

The site which implements this child theme is Nutrition Supplements Exercise, aka NutSEx.

More info at the WordPress Codex.