Cómo crear un Tema Hijo en WordPress (Child Theme)

Categorias: Wordpress

Cómo crear un Tema Hijo en WordPress (Child Theme)

Cuando se trabaja con WordPress, una de las cosas que se hace al principio de crear un nuevo proyecto o web, es elegir el theme o tema que será la base del diseño del sitio.

Un theme es una plantilla que cambia la apariencia de WordPress de cara a los visitantes. Los cambios no afectan al panel de administración de WordPress.

Existen miles de themes distintos, no todos gratuitos, pero muchísimos disponibles de manera libre para cualquiera que quiera usarlos.

Cuando se elige un theme, se suele modificar algún aspecto del mismo. Colores, la imagen de cabecera, el fondo, etc…

Todos estos cambios son relativamente sencillos de realizar y se tiene acceso desde el propio panel de administración de WordPress, pero en ocasiones hay que tocar código PHP o la hoja de estilos CSS.

Para modificar PHP o CSS se requieren ciertos conocimientos, aunque muchos usuarios se atreven a modificar estos archivos con el manido método de prueba y error, previa copia de seguridad de los archivos que se vayan a modificar.

Uno de los problemas en los que se pueden encontrar un administrador de WordPress después de modificar el theme en profundidad, es que si aparece alguna actualización del theme, los cambios realizados se perderán al actualizarlo.

Así que, para no tener que repetir los cambios en el theme, se opta por no actualizar, con los problemas de seguridad que pueden traer esta situación.

Pero existe una opción para poder realizar cambios en cualquier theme de WordPress y que estos no se pierdan al actualizarlo. Se trata de hacer un Tema Hijo o Child Themeen inglés.

Qué es un Tema Hijo o Child Theme

Un tema hijo se trata de una característica de WordPress, aunque no exclusivamente de WordPress, que se basa en permitir la modificación del theme sin que estas modificaciones afecten al theme original.

Se le llama tema hijo porque adquiere las características del tema padre, tanto en funcionalidades como en apariencia, sin embargo, las modificaciones realizadas en el tema hijo no afectan al tema padre.

De esta forma se pueden realizar los cambios necesarios en en los archivos de WordPress, sin perder los cambios al actualizar el theme.

Cómo se Crea un Tema Hijo o Child Theme en WordPress

Para crear un tema hijo, lo primer que se necesita es saber cuál es el theme que se va a usar como ”padre”.

Si en algún momento se cambia de theme, habrá que crear otro tema hijo, ya que como decimos, está relacionado con el theme principal.

Para crear el tema hijo hay que acceder a los archivos de WordPress desde un cliente FTP o desde el Administrador de Archivos de cPanel.

Para crear el tema hijo hay que crear una carpeta dentro de la carpeta themes de la instalación de WordPress.

La ruta para encontrar la carpeta themes, será la siguiente, salvo que WordPress no esté instalado en public_html~:

public_html/wp-content/themes/

Dentro de la carpeta themes se guarda todos los themes que tengamos disponibles en nuestra instalación de WordPress.

Por defecto, se instalan los populares Twenty…, en nuestro caso vamos a crear un child theme de Twenty Seventeen.

Recordad que hay que hacerlo del theme que se esté usado.

La carpeta que tenemos que crear debe de tener el mismo nombre que la carpeta del theme original, aunque es habitual añadir -hijoo -child al final para poder diferenciarlos.

Así pues, si queremos crear el tema hijo para Twenty Seventeen, tendremos que crear una carpeta llamada twentyseventeen-child.

 carpeta tema hijo administrador de archivos cPanel   

Una vez creada la carpeta, hay que añadir dentro un archivo llamado style.css.

crear archivo style tema hijo

 

Una vez creado el archivo style.css, pulsamos con el botón derecho sobre el archivo y seleccionamos Edit.

editar archivo style tema hijo

Ahora hay que pegar el siguiente texto:

/*
 Theme Name:   Twenty Seventeen
 Theme URI:    http://MiDominio.info/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       Nombre de Autor
 Author URI:   http://MiDominio.info
 Template:     twentyseventeen
 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:  twentyseventeen-child
*/
/* =Aquí empieza la personalización de tu tema
-------------------------------------------------------------- */

En este código hemos tomado como base el theme Twenty Seventeen, pero habrá que realizar las modificaciones tomando en cuenta el theme original, sobre todo la linea Template, en la que debe aparecer en nombre exacto de la carpeta del theme.

Una vez añadido el encabezado en en archivos, hay que guardar los cambios.
 

Cómo Activar el Tema Hijo en WordPress

Con el archivo que hemos creado, el tema hijo ya puede ser activado.

Debemos ir al panel de administración de WordPress y dirigirnos a Apariencia > Temas.

Si todo ha ido bien, veremos el theme que tenemos activado y el tema hijo que acabamos de crear.

tema hijo creado en wordpress

Para activarlo, solo debemos hacer lo mismo que haríamos para activar cualquier otro theme, pulsar en Activar.

activar tema hijo en WordPress

Una vez activado, podemos visitar la página para ver si ha funcionado. Como no hemos añadido ningún CSS, deberíamos ver el nuestro sitio sin ningún tipo de estilo.

A partir de aquí ya podemos empezar a editar sin miedo los archivos que añadamos en la carpeta del tema hijo, ya que los archivos originales del theme no serán modificados.

Por ejemplo, si queremos editar el archivo header.php, solo debemos copiarlo del theme original, a la carpeta del tema hijo respetando la ruta, ya que los archivos que añadamos sustituyen a los originales.

El archivo functions.php es la excepción, ya que no sustituye al original, sólo añade funcionalidades al archivo original.

Por este motivo no hay que copiarlo a la carpeta del tema hijo, sólo hay que crearlo y añadir lo que se necesite, ya que se añadirá al archivo original.

Si en algún momento se quiere volver el theme original, únicamente hay activarlo de nuevo desde WordPress.

Para más información sobre los chils themes, WordPress.com ofrece esta página en español.
 

Recuerda…

En Hostinet podemos ofrecerte un hosting WordPress con todas las garantías y con la mejor relación calidad/precio:

Hosting WordPress