Seleccionar página

Seguro que os ha pasado alguna vez. Habeis modificado la cabecera de tu tema para agregar un banner. O en el footer habeis colocado el script correspondiente para Analytics. Luego llega un día en el que nos damos cuenta que hay una nueva actualización de nuestro tema y vamos como locos a darle a actualizar sin pensar en las consecuencias y…

¡¡PERDEMOS TODO EL TRABAJO REALIZADO EN LOS ARCHIVOS PHP!!

Esto es común que nos suela pasar al principio cuando aún somos novatos, y además esto ocurre con la gran mayoría de los temas que hay actualmente en el lider de los CMS, a no ser que tengas algunos temas premium específicos o uno de los dos theme-builder más poderosos que existen (Genesis y Divi) ya que ellos ya traen el child theme integrado en su estructura.
Si no es tu caso, puedo ayudarte a solucionar este problema con este post sobre como crear un tema hijo en WordPress.

CREAR UN TEMA HIJO EN WORDPRESS

PASO 1: CREAR UNA CARPETA EN TU SERVIDOR PARA EL NUEVO TEMA HIJO

Debemos crear una carpeta dentro de wp-contents/themes con el nombre del nuevo tema hijo. Lo habitual es añadirle child al nombre del tema padre. Ejemplo: circumference-lite-child

crear tema hijo en wordpress

PASO 2: CREAR ARCHIVO STYLE.CSS

Dentro de la carpeta anteriormente creada debemos incluir un nuevo archivo css en el que definiremos varios parámetros para que WordPress pueda reconocerlo como que hereda de otro tema padre. Lo primero en la cabecera del archivo es definir lo siguiente:

  • Theme Name: aquí va el nombre del tema hijo que queremos crear
  • Theme URI: la url donde se incluye el tema, por lo general es 3w.tuweb.com/themes
  • Description: una breve descripción sobre este propósito
  • Author: puedes poner tu nombre o lo que quieras
  • Author URI: tu página web
  • Template: el nombre del tema padre
  • Versión: si queremos crear varias versiones del mismo

Realmente los parámetros importantes son Theme Name y Template, cuyos nombres tienen que estar bien escritos y no equivocarse en ninguna letra si queremos que funcione.
Lo siguiente es invocar a la hoja de estilos del tema padre para que lo cargue de forma predefinida. Para ello podemos hacerlo de dos formas (yo recomiendo la segunda, que la veremos en el siguiente paso):

  1. Usando la siguiente línea de código en nuestro nuevo style.css
    @import url(“../tema-padre/style.css”)
  2. Modificando el functions.php

A partir de las siguientes líneas ya podemos escribir reglas CSS a nuestro gusto para modificar el tema sin que las actualizaciones te afecten lo más mínimo.
Aquí un ejemplo de cómo quedaría la cosa:

crear tema hijo wordpress

PASO 3: CREAR UN NUEVO ARCHIVO FUNCTIONS.PHP

El archivo functions.php es un archivo especial, pues es el único que no va a sobreescribir las líneas del tema padre. Es decir, podemos incluir un nuevo archivo functions.php vacío y empezar a desarrollar nuestras funciones propias. Esta funciones se añadirán a las del tema padre, por lo que no hace falta que las invoquemos de nuevo. La otra forma de llamar a los estilos del tema padre es creando esta nueva función e incluirla en functions.php:

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ ); function theme_enqueue_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ ); wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’) ); }

Esta forma de hacerlo es una buena práctica, pero no te olvides de borrar la directiva @import usada anteriormente. Ahora comprueba los cambios y verás que los estilos se siguen cargando perfectamente.

ccrear functions

PASO 4: ACTIVAMOS EL TEMA HIJO EN EL ADMINISTRADOR DE TEMAS DE WORDPRESS

Desde el administrador de temas seleccionamos el nuevo tema hijo (que vendrá sin foto de previsualización). Si queremos añadirle la imagén de preview pues copiamos la del tema padre y listo. En la carpeta del tema padre copias el archivo screenshot.png y lo pegas en la carpeta del tema hijo.

crear child theme wordpress

PASO 5: COPIAR LOS ARCHIVOS PHP ORIGINALES QUE VAMOS A MODIFICAR

En la carpeta del tema hijo también podemos incluir archivos php que queramos modificar. Por ejemplo, si queremos modificar la cabecera de la página lo que debemos hacer es copiar el header.php del tema padre y pegarlo en la carpeta del tema hijo. A partir de entonces iremos modificando el código de la copia que hemos creado y los cambios perdurarán para siempre.

modificar plantilla wordpress
Ahora que ya hemos aprendido a crear un tema hijo en WordPress, podemos utilizar estos sencillos pero útiles cambios podemos hacer modificaciones de nuestro tema principal sin que ninguna actualización pueda hacernos perder nuestro tiempo y trabajo.

 

Título
Título
Crear un tema hijo en WordPress
Descripción
Aprende las técnicas necesarias para crear un tema hijo en wordpress y así evitar que las actualizaciones de tu tema principal afecte al código modificado.
Autor

Pin It on Pinterest

Share This