You must be bored of reading about child themes, but maybe no one has told you how to use them. We all have had this problem because we have been focused all this time in development, and there’s little documentation about it yet.
Today we are going to learn how to use a child theme. Interested?
What is a Child Theme?
As we have told some times before, a child theme is a theme that inherits functions of a parent theme. It reads all the information about an existing theme and modifies some actions.
Why we use Child Themes?
Because it’s very useful. Using a child theme makes our work easier. To understand it better, let’s see an example.
Suppose that we have the new default WordPress theme, Twenty Ten, and we want to make some modifications. Twenty Ten is an alive theme. It means that every time we update our WordPress the theme is updated too. It has advantages and disadvantages. The main advantage is that being a live theme it’s always updated with the last changes done in the core. The disadvantage is that every change we have done is lost in the update.
The child theme will be useful as a container for our changes being separated of the parent theme, so if it updates we will not lost our changes.
Parent and child do not necessary look alike
. Child theme may be built from any already built. Once it’s properly built, we can be sure our theme will be compatible with all upcoming versions of WordPress. Companies like us can do it for you. Please, contact us if you have any question.
How we use a Child Theme?
Creating a child theme is very easy. Just follow:
- Create a new directory in wp-content/themes.
- Create the file style.css inside it.
- In style.css you must indicate that it’s a child theme and who is his father.
Doing this we have our child theme. Easy, huh? Now let’s change some little things to see how it works. The first we must do is indicate that the child theme is the child of his father
.
/*
Theme Name: Child theme
Theme URI: http://childtheme.com/
Description: Twenty Ten Child Theme for WordPress
Author: Mecus
Author URI: http://mecus.es/
Template: twentyten
Version: 0.1.0
*/
Here, in the header of the style.css file, template must coincide with the name of the directory of the parent theme. Using this code, everything that we write in style.css will replace and override all the things written in the parent style.css.
Testing the Child Theme
To test the child theme changing some colors is the easiest, seeing directly what is happening. First of all, we have to add the parent stylesheet. To do this, we will use this code:
@import url('../twentyten/style.css');
And now we will write all the things that we want to change. We must have in mind that any change will override what is written in the parent theme. In our example we are modifying the asides in Twenty Ten.
Extending the child theme
As we have seen, a child theme only needs a style.css file to work, but we can use more files. The most useful file that we can use here is, without doubt, functions.php.
functions.php file, unlike style.css, adds functionality to the existing functions.php parent file. The system will use the child functions.php automatically, so we only have to add our functions to it.
One of the most interesting things to add to our functions.php is the favicon, who is not in the parent theme. To do this, we will create our functions.php file and will add this code:
<?php
function favicon_link() {
$favicon = get_bloginfo('template_url').'/images/favicon.ico';
echo '<link rel="shortcut icon" type="image/x-icon" href="'.$favicon.'" />' . "\n";
}
add_action('wp_head', 'favicon_link');
?>
In our example we have saved our favicon in the theme /images/ directory.
Extending (more) the child theme
Do you want total control? Great! You only need to create your own pages in the directory of your child theme and they will override the originals in the parent theme. You can modify even index.php file and create nonexistent pages in the parent theme (like tag.php for tags in the themes in which it’s absent).
Now you have the clues. Let’s experiment
Developers info
Remember the use of add_action and add_filter in your child themes. Twenty Ten has 150 filters and 60 actions, so use them!
** Data from Child Themes – WordPress Codex – Author: Demetris.
Artículos relacionados:
- WordCamp Irlanda (2): Rethinking themes
- What You See is What You Really Get
- Algoritmo de Darth Vader

