Stephanie Leary

Writer and WordPress consultant

  • Books
    • Content Strategy for WordPress (2015)
    • WordPress for Web Developers (2013)
    • Beginning WordPress 3 (2010)
  • Blog
    • Fascism Watch (2016-17)
    • Content Modeling for WordPress series
    • WordPress Hidden Gems series
  • Work
    • Portfolio
    • Services
    • WordPress Plugins
    • WordPress Themes
    • Presentations and Interviews
    • on GitHub →
  • About
    • Press Kit
  • Contact
    • Mailing List

WordPress Hidden Gems: Child Themes

September 29, 2010 Stephanie Leary 3 Comments

Child themes are modifications of other themes. They have their own directories and you upload them just like a separate theme, but they depend on their parent themes, and they won’t work if the parent is not installed. All your modifications to the original theme will take place in the child theme, so the parent theme remains untouched—and you can update it without wiping out your changes.

Creating a child theme is the best way to modify another theme. However, they’re not all that widely known yet, partially because the WordPress Theme Directory doesn’t yet support them.

Child themes must include at least a style.css file. All other files are optional, even index.php. If a required file is not present in the child theme directory, WordPress will look for the file in the parent theme directory. In other words, you need to create files only when you want to override the parent theme’s display.

To demonstrate how child themes work, I’ll go over my own theme, [link id=”2820″]Cub Reporter[/link], a child of the Journalist theme by Lucian E. Marin.

The child theme’s comment block requires one additional line: the Template. This should be the name of the directory containing your parent theme.

/*  
    Theme Name: Cub Reporter
    Theme URI: http://stephanieleary.com
    Description: A child theme for Journalist, by <a href="lucianmarin.com">Lucian E. Marin</a>
    Author: Stephanie Leary
    Author URI: http://stephanieleary.com
    Template: journalist
    Version: 1.0
    License: GPL
*/
@import url(../journalist/style.css);

Child themes’ stylesheets take advantage of the cascade feature of CSS. The first line of your child theme, after the required comment block, should import the parent theme’s stylesheet. If the parent theme contains multiple stylesheets, you should include them all, unless you plan to replace them with your own.
The beauty of the cascade is that any duplicate style declarations occurring later in the stylesheet will override the original declaration. In a child theme, that means that once you’ve imported the parent styles, you can modify them easily by duplicating the selectors and replacing the style declarations.

Aside from style.css, which is required, you may replace as many of the parent theme’s template files as you like—or none at all, if your changes can be accomplished with CSS alone. Be careful with the theme functions file! If you include one in the child theme, both functions.php files will be executed, so be careful not to duplicate any functions from the parent theme, or you’ll see fatal errors. If the functions in the parent theme have been wrapped in if (function_exists(…)) statements, you can safely replace them with your own, since your theme functions file will be called first. For example, Twenty Ten’s header styles function can be overridden.

// in Twenty Ten’s functions.php
if ( ! function_exists( 'twentyten_admin_header_style' ) ) :
function twentyten_admin_header_style() {
?>
<style type="text/css">
#headimg {
	height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
	width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
	display: none;
}
</style>
<?php
}
endif;

// in your child theme’s functions.php
function twentyten_admin_header_style() {
?>
<style type="text/css">
#headimg {
	height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
	width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
	text-indent: -99999px;
}
</style>
<?php
}
&#91;/code&#93;

The <code>bloginfo()</code> function has four possible arguments that will print URLs to the two theme directories. Here's how to get the URLs for parent and child theme stylesheets and directories:


<?php
bloginfo(‘stylesheet_directory’);	// Child theme directory
bloginfo(‘stylesheet_url’); 		// Child theme stylesheet
bloginfo(‘template_directory’);		// Parent theme directory
bloginfo(‘template_url’);		// Parent theme stylesheet
?>

Find all the WordPress Hidden Gems in [link id="2675"]Beginning WordPress 3[/link].

WordPress themes

Comments

  1. Bill Erickson says

    September 29, 2010 at 10:24 am

    What’s the recommended workflow for modifying a child theme? For example, if I’m building a custom theme using Genesis I make a child theme that references Genesis. If I’m buildingn a custom theme using Prose (a child theme of Genesis), do I just edit Prose or do I make my own grandchild theme? Does the Parent/Child relationship extend beyond 2 themes?

    With child themes getting more complex like Prose, it seems like we’ll run into the same issue that we did with standard themes.

    Reply
    • steph says

      September 29, 2010 at 10:34 am

      Grandchild themes don’t work (yet), as far as I know. The developers are aware that people are distributing child themes based on frameworks like Genesis, but they haven’t come up with a solution yet.

      Reply
  2. vdpgo says

    March 11, 2013 at 11:32 am

    Thank you!
    I needed the child directory and I used: bloginfo(‘template_directory’); which didn’t do what I wanted…
    Thanks to you, I now know it’s: bloginfo(‘stylesheet_directory’);
    Thanks,
    Marieke

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Fascism Watch

The Fascism Watch is a daily(ish) news roundup. View all the previous Fascism Watch posts »

Latest WordPress Book

Content Strategy for WordPress

A short book for content strategists and managers on implementing a complete content strategy in WordPress: evaluation, analysis, content modeling, editing and workflows, and long-term planning and maintenance.

Read the sample chapter

Kindle Nook iBooks Kobo Smashwords

WordPress for Web Developers

WordPress for Web Developers (9781430258667)

This is a book for professional web designers and developers who already know HTML and CSS, and want to learn to build sites with WordPress. The book begins with a detailed tour of the administration screens and settings, then digs into server-side topics like performance and security. The second half of the book is devoted to development: learning to build WordPress themes and plugins.

This is the second, much-revised and updated edition of Beginning WordPress 3, with a more accurate title. Everything’s been updated for WordPress 3.6.

WordPress for Web Developers is out now. See what's inside...

The best WordPress features you’ve never noticed

  • WordPress Hidden Gems: Screen Options
  • WordPress Hidden Gems: Bulk Edit
  • WordPress Hidden Gems: Private Status
  • WordPress Hidden Gems: Dashboard Feed Readers
  • WordPress Hidden Gems: Options.php

Content Modeling for WordPress series

  • Content modeling for WordPress, part 1: analyze content
  • Content modeling for WordPress, part 2: functional and organizational requirements
  • Content modeling for WordPress, part 3: a sample content model

This is an excerpt from Content Strategy for WordPress.My latest books are Content Strategy for WordPress (2015) and WordPress for Web Developers (2013). Sign up to be notified when I have a new book for you.

Copyright © 2021 Stephanie Leary