por

A veces, al crear un “tema hijo” o “child theme” en WordPress, nos encontramos que, o bien no se aplica el CSS del tema padre, o bien el CSS del tema hijo no sobreescribe los estilos del padre.

Os voy a explicar la forma rápida, y que en principio no tiene que daros ningún problema, de crear un tema hijo que dependa de un tema padre:

Lo primero de todo es ir a la carpeta wp-content/themes y crear la subcarpeta que contendrá al tema hijo. Por convención se suele poner el mismo nombre que la carpeta del tema padre, añadiéndole el sufijo “-child”. Por ejemplo, si la carpeta del tema padre es “temapadre”, la carpeta para el tema hijo sería “temapadre-child”. No es algo obligado, pero ya sabemos que la buena legibilidad es importante.

Luego, en la carpeta de nuestro tema hijo, crearemos un fichero con el nombre style.css , al que añadiremos el siguiente código CSS:

/*
* Theme Name: Temapadre Child
* Template: temapadre
*/

@import url("../temapadre/style.css");

Tendremos que sustituir los valores por los que correspondan en cada caso. Debajo de la etiqueta @import ya incluiríamos el CSS que sobreescribiría al tema padre.

Y en principio, siguiendo estas pautas tan sencillas al pie de la letra, no tenéis por qué tener ningún problema a la hora de crear un tema hijo que aplique correctamente los estilos CSS, tanto los suyos propios como los heredados del tema padre.

No es necesario incluir nada más (para que funcione) en la cabecera, aunque existen una serie de campos opcionales que ofrecen una metainformación útil, aunque como digo de manera opcional. En la documentación del Codex de WordPress encontrarás cómo sería una cabecera más extensa, para poder incluir más información sobre nuestro tema hijo (como digo información opcional). Sería algo como esto:

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/