Subscribete

Ver articulos del blog

Crear un tema hijo en wordpress

1. Estructura básica de un tema hijo


Deberemos crear el directorio que contendrá el tema hijo en la ruta /wp-content/themes/. Lo usual es que el nombre de dicho directorio sea “nombre_plantilla-child”, pero realmente podemos poner el nombre que nos apetezca.

Dentro de este directorio, crearemos dos ficheros:

  • style.css

  • functions.php


Con esto ya tendremos la estructura básica creada.

2. Hoja de estilos


La cabecera se inserta en forma de comentario y tiene la siguiente estructura:
/*
Theme Name: Nombre de tu tema hijo
Description: Descripción de tu tema hijo.
Author: Tu Nombre
Author URI: http://tu-web.com
Template: nombre_tema_madre
Version: 1.0.0
Text Domain: nombre_tema_hijo
*/

Es importante fijarse en el parámetro Template: es donde se especifica cuál es el tema “Padre” y es la estructura que tomará por defecto el tema hijo.

3. Fichero de funciones


En el fichero functions.php deberemos poner el código inicial para enlazar las hojas de estilo del tema “Padre”. Para ello, añadiremos el siguiente código PHP:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {   
wp_enqueue_style( 'plantilla-padre', get_template_directory_uri() . '/style.css' ); 
}
?>

Donde pone “plantilla-madre” hemos de poner el nombre del directorio que contiene la plantilla “Madre”. Con esto ya tendremos enlazado su fichero de estilos. En otras palabras, si activamos el tema hijo, el fichero style.css del tema “Madre” también se va cargar.

Es posible que el fichero de estilos del tema hijo se cargue automáticamente, pero si ese no es el caso, deberemos sustituir el código anterior por el siguiente:
<?php
function theme_enqueue_styles() {

$parent_style = 'plantilla-padre';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'tema-hijo',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

 

Ahora es momento de añadir estilos en nuestro fichero style.css, que sobrescribirán los estilos del tema original.

Si queremos modificar la estructura de la página que muestra un artículo, deberemos copiar el fichero single.php del tema original en nuestro tema hijo, luego, haremos todas las modificaciones que queramos sobre el fichero copiado.

Si queremos añadir otras funcionalidades, podemos añadir funciones en el fichero functions.php que hemos creado.