Understand WordPress Child Theme

With version 3.0 of WordPress, the much anticipated feature of Child Themes was integrated or some might say it was improved, since it was actually possible to use it. I like to show you an example based on the new default Theme TwentyTen how you use it. Another example can be found in my WP Basis-Theme (SVN); currently not HTML 5 version.

The function of the Child Themes can be applied basically in every theme and the new features facilitate access and creation of a Child Themes. Before there were also possibilities to change a Theme without changing the actual files of the theme. With the support of Child Themes this is now completely independent and we can use a theme that can be updated without a problem, and you can still realize your own ideas.

Other blogs already mentioned Child Themes but I’ve found so far only posts where they just talking about the activation and modification of the style sheet. Therefore, I would like to comment this subject only briefly, which is quite simple and then show the different possibilities in terms of template files.

Advantages of Child Theme

More or less every administrator is trying to create an individual design for his WordPress system. This does not require to create a special theme from scratch. Very often, a free or commercial Theme is used and then adapted to your needs. Many Themes have different options but are not sufficient for customizing. If you want to adjust the individual design, such as the layout of a category, that requires some changes of the theme. No matter how extensive, an update of a Theme is no longer feasible without problems. Here the Child Themes come into consideration.

With a Child Theme, a Theme can be adjusted or you can use a Theme as a “Framework” and implement completely your own ideas. No matter how extensive, the real Theme remains intact and can undergo an update.

Disadvantages of Child Theme

Often “Framework” Themes are very comprehensive and with many features, sometimes it has a steep learning curve and customizing can cost a lot of effort and time. Even though with Child Themes.
A major disadvantage is also the performance, because WordPress have to look into two areas according to the template and get the according files.
Furthermore style sheets, if you build on them, are usually implemented via @-rule, which has disadvantages in performance.

In all the negative points, it depends on skill and knowledge of the developer and how the Theme or Child Theme is created. Thus you can weaken the negative arguments I pointed out. Important: The new function should be carefully considered before using it. But with Child Themes you don’t have to touch the basic Theme and yet you can make adjustments easily.

Create Child Theme

Enough said, let’s start with the example based on the Theme TwentyTen and create an adjusted Theme – I will call it TwentyTenJump 😉

In the first step, a new folder is created in which we put all the template files, images, scripts and style sheets – what is principally needed for the Child Theme. In this example, the folder is twentytenjump. To create a Child Theme and make this apparent to WordPress, you simply need style.css within the new folder with several strings in a comment.

Within style.css it looks like this.

@charset "UTF-8";

/**
 * Theme Name:     TwentyTenJump
 * Theme URI:      http://bueltge.de/?p=1192
 * Description:    Child theme for the Twenty Ten theme. Realized for a small tutorial to child themes in WordPress.
 * Author:         Frank Bültge
 * Author URI:     http://bueltge.de/
 * Template:       twentyten
 * Version:        0.1.0
 */

@import url('../twentyten/style.css');

Important are the key Theme Name and Template. The key Template points to the folder name of the Theme, which is considered as a basis – in that instance, the Theme Twentyten.

Hint: The source above use the @import rule to import the parent stylesheet. It is much better for the performance to use the functions.php inside the Child Theme. The source below is find to understand the requirements, but the performance is import for live usage. You find a source example for include the Stylesheet about the functions.php in my Basis Child Theme or the Codex.

I now have the following structure within the installation of WordPress.

  • wp-content
    • themes
        • twentyten

      (Basic Theme, including all template files)

        • style.css
        • index.php
      • twentytenjump
        • style.css (must satisfy these name convention: style.css)

Thus, the first requirements are in place and you can select the new Theme in the backend of WordPress.
Note: the reference to the Basic Theme is not very conspicuous, so that you might forget the dependency. So that’s why you should always check before you delete a Theme. On the used Theme, there is no indication that a different Theme as a Child Theme is using this Theme.

Working on the style sheet

From now you can put any changes in your style sheet. Also, of course, you can remove the call to the style sheet @import url('../twentyten/style.css'); from the Basic Theme and you can build your own style sheet completely.

You use the template files, the structure and PHP know-how of the Basic Theme, in which case is Twenty Ten. You deal exclusively with the design. For example, this could be the simplest case, a change in color of the background and alternatively a completely separate design will be created.

Replace templates

The functionality of the Child Theme includes more than just changing the appearance. You can replace existing template files of the Basic Themes. WordPress looks first in the Child Theme and then in the Basic Theme for possible templates. WordPress runs through the hierarchy of template files.

At many points in your Theme you can intervene via Hook, which might be not very easy and complicated for some users. Thus not infrequently the output of title in head of a web site will be replaced with own functions or Plugins. You can either edit the title via Hook or control the output of a function. For example, the title should now be displayed with a function of a Plugin. In that case you have to adjust the header.php and so you must proceed as follows, so that the Basic Theme remains intact.

You only have to copy header.php, which is containing the head section of the Theme, into your own Child Theme and here it can be edited as you like. From now on WordPress pulls header.php and not the original file from the basic theme Twenty Ten.

Now you can integrate the mentioned function into the title, an example:


The Basic Theme remains untouched, it can still be kept up to date via updates and from now on WordPress uses the header.php always of the Child Theme. Like this small example you can replace any template and adapt to your own requirements. Nevertheless, you should bear in mind that you replace the template completely – in the example, we would not notice an update of header.php. So it may be helpful to use Hooks in various areas and have their own functions, more about this later. Important: an exception is functions.php, I will talk more about it later.

Expand Templates

In order to meet your own requirements, it may be that you need new templates, template files didn’t exist in the Basic Theme. For the purposes of the hierarchy you can extended forever. For example, Twenty Ten does not have home.php – you can simply place this file in your Child Theme and WordPress will use this file, if the state is_home() is true. Using WordPress 3.0 there is another option outside of the template hierarchy to use your own templates – get_template_part(). This function is used consistently within Twenty Ten – so you don’t have to create own templates for the complete call, but only for the section of the Loop. For example, Twenty Ten uses for displaying the category archives the call get_template_part( 'loop', 'category' );. Thus it is possible to put a template in our Child Theme, which uses this loop. So it’s only necessary to create a file loop-category.php and then save all necessary informations. In the following example, I adjust the loop, if you are in one of the four categories. Other changes are possible, so you will have full control and flexibility.

if ( in_category( array(47, 37, 27, 45) ) ) {
	query_posts( 'cat='.$cat.'&posts_per_page=-1&orderby=title&order=ASC' );
}	else {
	query_posts( 'cat='.$cat.'&posts_per_page=20&paged='.$paged );
}
while ( have_posts() ) : the_post(); ?>

Similarly, you might be able to customize the loop for index.php – Template file loop-index.php would be in the game.

Include Functions

Of course you can also bring in the Child Theme your own functions. If you put an own functions.php in your Child Theme, then it does not replace the functions.php of the Basic Theme!
The functions of the Basic Theme will always be used. You have to disable them via the Hook. The possibility is also explained in a documentation in the functions.php file.

add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
		// We are providing our own filter for excerpt_length (or using the unfiltered value)
		remove_filter( 'excerpt_length', 'twentyten_excerpt_length' );
		...
}

Within the function my_child_theme_setup() you can disable the functions of the Basic Theme and bring in your own functions.

Other features belong into the functions.php of the Child Theme – the Basic Theme always remains untouched. In the following code example I disable the function of the Basic Theme Twenty Ten for the length of the excerpt, and load my own function twentytenjump_excerpt_length() and it includes a Widget.

get_field_name(‘count’); ?>” />

Conclusion

I think through the introduction of the new default theme Twenty Ten that some new cool features were added. But I think also that Twenty Ten is very inappropriate to understand the work of WordPress in the area of themes. Especially beginners and PHP newcomers are having a hard time. Yet it creates new opportunities and if you want to use Child Themes in a clean way, then you can not get around it without understanding Hooks in the WordPress API. WordPress takes the idea of the Hooks consistently further, always popular in Plugins, they do get popular in Themes now. Everything has advantages and disadvantages.

But if you use a well-maintained Theme or Framework, then you will appreciate the new possibilities and can always update with no problems. Crucial will be your own knowledge about WordPress – depending on the interest, knowledge and working methods how you create your own themes.

Download and Forking

Please use the repository on Github: github.com/bueltge/TwentyTenJump


Posted

in

by

Comments

9 responses to “Understand WordPress Child Theme”

  1. Bjorn van der Neut Avatar

    Nice article but I have a bug or a question:

    I copied the header.php and also the images/header/ map.
    I switched the names from sunset.jpg and path.jpg

    But I keep seeing the default path.jpg image instead of the sunset.

    In the header.php this code generates the image:
    <img src="" width="" height="" />

    And its generates:

    But this should be:

    Am I missing something?

    Thanks
    Bjorn

  2. Bjorn van der Neut Avatar

    Crap the post is removing my html codes 🙁

    But the function header_image() gives back an url from “twentyten” directory instead of “twentytenjump”.

  3. Andrew Nacin Avatar

    Child themes have been around in some primitive form since the early 2.x versions of WordPress. And while there were some enhancements to the implementation in 3.0, the current situation where template files are first searched for in the child theme directory have been available since 2.7. For a version or two before that, a child theme could have style.css and functions.php.

  4. Frank Avatar

    Hy Andrew,
    thanks for your usefull hints – but i think it is better for our support, when we use functions for a tutorial from 3.0 and set this as default. Yes, it is possible to use child themes before 3.0 – but i think, the people, she use the elementary prerequisite can work without this tutorial. Als we use fucnctions from 3.0 and maybe we will write a second part with language files and more and than is this also only include from 3.0 and above.

  5. Frank Avatar

    @Björn: the path was define via constant HEADER_IMAGE, see the functions.php. When you work with child themes, better ist to use constant STYLESHEETPATH, not TEMPLATEPATH

  6. Stephen Cronin Avatar

    Hi Frank,

    I understand the reasoning you gave Andrew, but when I read the following:

    With version 3.0 of WordPress, the much anticipated feature of Child Themes was integrated

    my first reaction was “That’s bull$hit, they ‘ve been around for ages”. If this had been on another site, I would have dismissed it as being written by someone who is clueless about WordPress, closed the tab and moved on. I only continued reading this because I know WPEngineer really do know their stuff. It may be worth tweaking the wording slightly.

    Also the link to Steve Souders is broken – it has an extra ” has” on the end.

    Apart from those two minor gripes, this is a fantastic post as always, containing information I didn’t know, which is going to save me time figuring this out myself – Thanks!

  7. Alex Avatar

    Thanks Stephen for letting us know about the wrong link. Also I changed the first sentence, I hope that will be fine for everyone. 🙂

  8. Frank Avatar

    @Stephen: thanks for your fine comment and hint ans alsp your tribute to us. Maybe is see the very great functionality in Child Themes and WordPress 3.0, why supportet this now with own language-files and also templates for loop and conditional comments. Maybe – we are all german guys and we write al code for the multilanguage-functionality and this is not so great in WordPress in different points. The child theme fucntion has now a own part for load this and maybe is this the reason for my false words to child theme and WP 3.0. Other sites it is great when the readers give us feedback for the posts and maybe: we write in all posts false content and become so many feedabck 😉 – no fear, we will write also in the feature posts about the possibilities with WordPress

  9. Harris Avatar

    Really useful , I was wondering what was those child theme about !
    Thanks for pointing that out !