Seguro que estás harto de oír hablar de los temas hijos y nunca nadie te ha contado como usarlos. Un problema que hemos tenido todos en algún momento, ya que se ha centrado durante mucho tiempo todo el esfuerzo en el desarrollo y existe todavía muy poca documentación al respecto.

Hoy vamos a intentar aprender a utilizar un tema hijo. ¿Te apuntas?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?

¿Qué es un tema hijo?

Como hemos contado en alguna otra ocasión, es un tema que hereda funciones de un tema padre. Es decir, lee toda la información de un tema existente y modifica ciertas acciones.

¿Por qué usamos temas hijos?

Es sobre todo un tema funcional. Utilizar un tema hijo facilita mucho el trabajo porque hace más simples las actualizaciones. Para entenderlo, vamos a poner un ejemplo.

Imaginemos que tenemos el nuevo tema por defecto de WordPress, Twenty Ten, y queremos hacer modificaciones. Twenty Ten es un tema vivo, es decir, que se actualiza cada vez que actualizamos nuestro WordPress, lo que tiene ventajas e inconvenientes. La ventaja principal es que, al ser un tema vivo, está siempre actualizado con los últimos cambios que se hayan realizado en el core (el núcleo de WordPress). La desventaja, que cualquier cambio que hayamos realizado sobre él se perderá en la actualización.

El tema hijo nos resultará útil como un contenedor para nuestros cambios separado del tema principal, de forma que cuando éste se actualice no perdamos nuestros cambios.

No es necesario que padre e hijo se parezcan ;). El tema hijo puede construirse a partir de cualquier tema ya existente. Una vez hecho, tenemos la seguridad de que será compatible con todas las futuras versiones de WordPress. Empresas como la nuestra son capaces de hacerlo sin mucha dificultad. (Consúltanos si estás interesado).

¿Cómo se utiliza un tema hijo?

Crear un tema hijo es más sencillo de lo que parece. Sólo hay que:

• Crear un directorio nuevo en la carpeta wp-content/themes.
• Crear dentro de él un archivo style.css.
• En el style.css, indicar que es un tema hijo y quién es su padre.

Con esto ya tenemos nuestro tema hijo. Fácil, ¿eh? Vamos a seguir los pasos y a hacer unas pequeñas modificaciones para ver su efecto. Lo primero es indicar que el tema es hijo de su padre.

/*
Theme Name: Tema hijo
Theme URI: http://temahijo.com/
Description: Tema hijo de Twenty Ten para WordPress
Author: Mecus
Author URI: https://mecus.es/
Template: twentyten
Version: 0.1.0
*/

Nótese que template tiene que coincidir con el nombre del directorio del tema padre.

Con este código todo lo que escribamos en el style.css sustituirá a lo indicado en el tema padre.

Probando el tema hijo

Para probar que el tema hijo funciona lo más fácil es cambiar algún color, para ver de forma visual qué está ocurriendo. Lo primero que tendremos que hacer es añadir la plantilla del tema padre. Para eso utilizaremos el siguiente código:

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

Y ahora escribiremos las directivas que queramos modificar. Hay que tener en cuenta aquí, de nuevo, que cualquier cambio sustituirá a las líneas que haya escritas en el tema padre. En nuestro ejemplo modificaremos cómo se muestran los asides (artículos cortos) en Twenty Ten.

Extendiendo el tema hijo

Como hemos visto, un tema hijo necesita únicamente un archivo style.css para funcionar, pero puede utilizar más archivos. El que nos será más útil, sin duda será el functions.php.

El archivo functions.php, a diferencia del archivo style.css, añade funcionalidades al functions.php existente. El sistema utilizará el functions.php de forma automática, por lo que únicamente tendremos que añadir nuestras funciones al archivo.

Sin duda la función más interesante para añadir en nuestro archivo functions.php es el reconocimiento del favicon, del que carece el tema padre.

Para eso, crearemos nuestro archivo functions.php y añadiremos el siguiente código:

<?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');
?>

En nuestro caso hemos alojado el favicon en el directorio /images/ del tema, por lo que lo buscaremos ahí.

Extendiendo (aún más) el tema hijo

¿Eres de los que quieres control total? ¡Estupendo! Sólo tienes que crearte tus propias páginas en el directorio de tu tema hijo y éstas sustituirán a las páginas originales del tema padre. Puedes modificar hasta el index.php y crear páginas que no existan en el tema padre (como tag.php para las etiquetas, caso de que no existiera).

Ya tienes las claves. Ahora toca experimentar 🙂

Para desarrolladores

Recordad el uso de add_action y add_filter en vuestros temas hijos. Twenty Ten tiene 150 filtros y 60 acciones, así que ¡úsalas!

** Información extraída del archivo Child Themes del Codex de WordPress – Autor: Demetris.

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: https://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.