Usted ya lleva bastante tiempo con su sitio de WordPress y ha hecho lo que usted ha querido que haga. Pero ahora, usted ha tomado la decisión de personalizarlo.

O quizás usted está creando un sitio con un tema que ha descargado de un directorio de temas o uno que acaba de comprar y se da cuenta, que no funciona exactamente de la forma en que usted esperaba.

¿Qué hacer ahora?

O puede encontrar un plugin que le dará la personalización que necesita o puede cambiar a un nuevo tema. ¿Pero qué tal si está contento con su tema actual y no puede encontrar un plugin que agregue lo que usted necesita en términos de funcionalidad?

Respuesta: usted necesitará personalizar su tema. Y las mejores prácticas dicen: Usted logrará esto a través de los temas child (WordPress).

En este artículo, le mostraré exactamente como crear un tema child en WordPress, cómo utilizarlo para personalizar su sitio, y cómo funcionan los temas. También le explicaré el concepto de los temas parent (padres) y describiré cómo el tema parent en su sitio interactúa con el tema child:

Antes de adentrarnos a crear un tema child, identifiquemos los 3 métodos que puede utilizar para personalizar su sitio de WordPress.

Si no quiere perder todas sus personalizaciones, los temas child son su mejor elección. 👶 ¡Aprenda como crearlas con nuestra extensa guía!Click to Tweet

Métodos para Personalizar WordPress

Personalizar un tema viene con sus riesgos. Si usted edita el código en un tema externo (siendo este el que haya comprado de un marketplace por ejemplo), entonces cuando usted actualice la próxima vez el tema, todos sus cambios se perderán. Queriendo decir que no sólo su sitio se revertirá a su forma anterior, si no que todo su trabajo se habrá perdido.

Hay tres formas para personalizar su sitio de WordPress:

Demos un vistazo a cada uno de estos.

Editando su Tema

Si su sitio está usando un tema personalizado de WordPress, queriendo decir que ha sido desarrollado específicamente para su sitio, usted tiene la opción de editarlo de forma segura porque no hay un riesgo de perder todas sus configuraciones la próxima vez que el tema sea actualizado.

Pero, si usted o su desarrollador decide hacer cambios en un futuro, es la versión personalizada de ese tema la que estará editando, y no la versión original antes de estos cambios.

Esto no quiere decir que editar su tema no viene con riesgos. Si usted no tiene experiencia programando temas, lo más seguro sería el crear un tema child (veremos como en un minuto). Esto es algo que yo hago: Tengo un tema base que utilizo en todos mis sitios, con un diseño estándar, hooks, y funciones, y luego lo personalizo para cada sitio con un tema child.

Si usted edita su tema directamente, asegúrese de mantener un respaldo del tema original, no edite el tema en el sitio en vivo (mejor utilice un sitio de desarrollo o de prueba) y utilice una versión de control para mantener un registro de sus cambios.

Y si usted está utilizando un tema terciario, usted debería editarlo directamente. Pero mejor, podría utilizar un plugin o crear un tema child.

Agregando un Plugin

La segunda opción para personalizar un tema de WordPress es el de instalar o programar un plugin.

Si las personalizaciones que desea hacer son funcionales en lugar de estar relacionadas al diseño, un plugin es una forma apropiada de hacer esto. Así que si quiere agregar código adicional, lo mejor sería crear un plugin en su lugar.

Los plugins no tienen que ser largos o complejos: si usted necesita agregar código al archivo functions.php en su tema, cree un simple plugin para agregar unas líneas adicionales de código a su sitio. Un buen ejemplo de esto es registrando un tipo de publicación personalizada.

Puede ser tentador agregar código al functions.php de su tema, pero agregar un tipo de publicación es un cambio funcional a su sitio, no de diseño. Si usted fuese a cambiar temas en un futuro, usted no tendría que perder estos tipos de publicaciones y todas las publicaciones que haya creado usando estas. Es por eso que debería instalar o crear un plugin como alternativa.

En algunas ocasiones usted podrá encontrar un plugin existente que hace lo que usted necesita, pero en algunas ocasiones usted podría necesitar programar el plugin por su cuenta.

El Repositorio de WordPress

El Repositorio de WordPress

Si tiene duda de si debería crear un plugin o personalizar su tema (o tema child) pregúntese a usted mismo esto: si quisiera cambiar el diseño de mi sitio en un futuro e instalar un nuevo tema WordPress, ¿Me gustaría que este cambio se mantuviera? Si la respuesta es si, esto quiere decir que el cambio es funcional y no estético, y debería ir en un plugin.

Creando un Tema Child

La tercera opción para personalizar un tema de WordPress es crear un tema child.

Aquí le dejamos algunos escenarios en los usaría un tema child:

  • Quiere hacer cambios al diseño de su sitio, no a su funcionalidad.
  • Su sitio utiliza un tema terciario o un tema que usted quiere utilizar de nuevo en su estado actual.
  • Usted no quiere editar directamente su tema existente en caso de que este puede causar problemas (quizás usted no es un desarrollador de temas experimentado).
  • Su sitio está utilizando un tema diseñado para ser un tema parent, como lo sería un tema framework. Estos son temas con muchas opciones de personalización, como el poder agregar hooks, diseñados para que usted puede agregar sus propios temas child.

Los temas child por lo tanto son una forma efectiva y segura para agregar personalizaciones a su sitio. Así que demos un vistazo más a detalle.

¿Qué es un Tema Child de WordPress?

Así que, ¿qué es exactamente un tema child en WordPress? ¿Cómo funciona?

Un tema child es un tema que funciona en tándem con otro tema, el cual es referido como tema parent.

Este contiene instrucciones específicas para decirle a WordPress que este es un tema child y cual es el tema parent. WordPress luego utiliza el código del tema parent en la mayoría de las instancias, pero este sobrescribirá esto con código del tema child (si es necesario).

Los Archivos en un Tema Child de WordPress

Cada tema child de WordPress debe tener dos archivos como mínimo: una hoja de estilo y un archivo de funciones. La hoja de estilo contendrá tendrá un comentario en la parte superior diciendo a WordPress que este es un tema child y cual es el tema parent. El archivo de funciones incluirá una función que encola a la hoja de estilo desde el tema parent.

Nota: Usted podría encontrarse con guías que le dirán llamar a la hoja de estilo de su tema parent de la hoja de estilo de su tema child. Esta ya no es la forma correcta de hacerlo, y usted deberá usar encolado en el archivo de funciones en vez de lo anterior. Le mostraré como hacer esto en breve.

Su tema child no debería incluir otros archivos. A diferencia del tema parent, este no necesita un archivo index.php como respaldo si no hay otros archivos específicos en el tema. Esto es porque si una plantilla no existe en el tema child, WordPress utilizará el archivo del tema parent.

Así que, dependiendo de lo que usted quiere que haga su tema child, usted tendrá que agregar código adicional a la hoja de estilo, al archivo de funciones o usted creará archivos adicionales en el tema child para sobrescribir el tema parent. Esto podría incluir uno o más de:

  • Archivos de plantillas para sobrescribir el mismo archivo del tema parent, como el page.php, cuando usted quiere personalizar el diseño de página estáticas.
  • Partes de plantilla como el header.php o footer.php cuando usted quiere personalizar esas partes del diseño del sitio.
  • Partes adicionales de la plantilla que usted llamará de los archivos de plantillas en su tema child. Así que si usted quería personalizar el encabezado cuando las páginas estáticas son mostradas, usted crearía un archivo en su tema child llamado header-page.php, y un archivo de plantilla llamado page.php, el cual sobrescribiría el page.php del tema parent. Este archivo de plantilla sería idéntico al que se encuentra en el tema parent excepto por la llamada por el archivo de encabezado, el cual llamaría en su lugar al header-page.php del header.php.
  • Archivos de inclusión adicionales para funcionalidad. Si usted quiere agregar mucho código funcional y organizarlo, usted podría crear archivos de inclusión para cada conjunto de funciones y llamarlas en el archivo de functions.php de su tema child. Así que, por ejemplo, si usted quería agregar opciones adicionales de Personalización, usted podría incluir un archivo llamado customizer.php en su tema child y luego llamar a ese archivo del archivo de funciones en su tema child.

Pero si usted si agrega archivos y funciones adicionales, ¿WordPress cómo sabrá cuales usar? ¿Los del tema parent o los del tema child? De esto hablaremos ahora.

¿Cómo WordPress Elige los Archivos de Plantilla?

La forma en que WordPress elige los archivos de plantilla de su tema al mostrar contenido en su sitio es por referencia a la jerarquía de la plantilla.

La jerarquía de plantilla de WordPress

La jerarquía de plantilla de WordPress

WordPress utiliza esta jerarquía para funcionar a través de archivos de plantillas en su tema y encontrar la correcta para usar cuando muestran un cierto tipo de contenido. Yo empezaré desde la cima (a mano izquierda en la imagen de arriba) y buscar cada archivo para cada tipo de contenido en turno. Cuando este encuentra un archivo que mostrará ese contenido, este lo usará.

Imagine que su tema tiene un archivo archive.php y un archivo category.php, pero no un archivo tag.php. Cuando se muestra un archivo de categoría, WordPress utilizará el category.php ya que es más específico al tipo de contenido. Al mostrar un archivo de tag, este usará un archive.php en su lugar.

Si WordPress no encuentra un archivo de plantilla para dicho tipo de contenido, por defecto elegirá el archivo index.php, razón por la cual todo tema único (p.e. no un tema child) debe tener un archivo index.php.

Lo mismo aplica para publicaciones y páginas únicas. Digamos que su tema tiene un archivo singular.php, el cual es el hazlo todo para publicaciones únicas de cualquier tipo de publicación (incluyendo páginas y tipos de publicaciones personalizadas). También tiene un archivo page.php. Al mostrar una sola página, este utilizara page.php. Al mostrar una publicación, este utilizará singular.php. Y si usted registra un tipo de publicación personalizada y no agrega un archivo plantilla para este tipo de publicación, este utilizará singular.php de nuevo.

Cuando usted utiliza un tema child, WordPress sigue utilizando la jerarquía de plantilla para decidir que archivo utilizar cuando saca contenido en su sitio. Este ve los archivos en el tema parent y child y utiliza el primer archivo con el que se encuentre.

Así que imagínese que su tema child tiene un sigular.php y un post.php, y su tema parent tiene page.php e index.php. Cuando saca una publicación única, WordPress utilizará post.php del tema child. Cuando saca una página, utilizará page.php del tema parent. Y cuando saca una publicación única de un tipo de publicación personalizada, este utilizará singular.php del tema child.

¿Pero qué tal si su tema child y parent tienen instancias del mismo archivo?

Imaginemos que usted agrega un archivo page.php al tema child en el ejemplo pasado. Ya que ese tema se encuentra dentro del tema child, este sobrescribe el mismo archivo del tema parent. Así que, al mostrar una página única, WordPress usaría el nuevo archivo page.php del tema child.

Es por eso que crear un tema child le permite personalizar el tema parent. Si usted agrega una copia de su archivo plantilla de su tema parent a su tema child y luego lo edita para incluir las personalizaciones que usted quiere hacer, WordPress usaría este nuevo archivo de plantilla en lugar de uno del tema parent. Queriendo decir que sus personalizaciones serán usadas cuando muestren contenido, sin tener que editar al tema parent. ¡Perfecto!

Cómo es que WordPress Utiliza Funciones de los Temas Parent y Child

¿Qué tal si usted no quiere hacer personalizaciones a los archivos plantillas en su tema, si no a las funciones?

Usted también puede hacer esto. Primero, usted necesita entender que la forma correcta de hacer esto es a través de un tema child y no un plugin. Un ejemplo podría ser cuando usted quiere editar una función que ya se encuentra en un tema parent, por ejemplo, la función que saca el colofón en el pie de página.

Usted luego agrega la nueva función(es) al archivo de funciones en su tema child, o a un archivo de inclusión que usted llama de su archivo de funciones.

Para asegurar que su nueva función sobrescribe la funcionalidad de su tema parent, usted necesita entender como sobrescribir funciones. Hay tres formas de hacer esto.

  • Al escribir una nueva función con el mismo nombre como una función conectable en su tema parent.
  • Al desenganchar la función en su tema parent del hook (gancho) al que estaba adjunto y luego escribir una nueva función para reemplazarlo.
  • Al escribir una nueva función con una mayor prioridad que la función original y llamarla a través del mismo hook, queriendo decir que es llamado después de la función original y puede, por lo tanto, sobrescribirla o aumentarla.

Examinaremos como hacer todas estas más adelante en este artículo. Pero primero, veamos todos los escenarios donde usted debería y no debería usar un tema child.

¿Cuándo Utilizar un Tema Child en WordPress (Ventajas)

Usted sabe que son los temas child y como utilizarlos para sobrescribir los archivos de plantillas o funciones en su tema parent.

Como una pequeña recapitulación, usted debería utilizar un tema child si usted está utilizando un tema en su sitio y quiere hacer una o más de las cosas que se encuentran en esta lista:

  • Editar uno o más de los archivos de plantillas.
  • Agregar funciones adicionales que están relacionadas al diseño y no a la funcionalidad.
  • Sobrescribir una o más funciones del tema parent.
  • Agregar archivo(s) de plantillas adicionales.

Estas son algunas de las ventajas:

  • Extensión y personalización sencilla: Algo obvio, es como un tema child extiende la funcionalidad de su tema parent. Usted ya debe tener una plantilla preparada a su servicio en forma de tema parent, y lo único que tiene que hacer es crear un archivo style.css separado para su tema child, y agregar cambios de personalización dependiendo de sus necesidades.
  • Actualizaciones libre de problemas: Mientras va evolucionando WordPress, los temas y plugins necesitan ser actualizados constantemente. Si usted hace cambios de personalización a su tema principal, usted podría terminar perdiendo todos sus cambios si decide actualizar el tema. Por lo tanto, es recomendable hacer dichos cambios a su tema child, así que cuando requiera actualizar el tema parent, no tendrá el temor de perder sus cambios.

¿Y cuándo no debería usar un tema child?

¿Cuándo No Utilizar un Tema Child en WordPress (Desventajas)?

Hay ciertas ocasiones en las que usted no debería utilizar un tema child y debería utilizar otro método para personalizar su sitio. Estos son:

  • Si el tema es uno que usted desarrolló (o alguien más hizo por usted) y no necesita utilizarlo en otro lado. Sólo edite el tema, asegurándose de estar utilizando una versión de control.
  • Si las personalizaciones que desea hacer son funcionales, por ejemplo, agregar un tipo de publicación personalizada, y usted querrá mantenerlas si usted cambia los temas en el futuro. Utilice un plugin en lugar de esto.

Estas son algunas desventajas:

  • Elegir el tema parent ideal: ¡No todos los temas son buenos padres! Ciertos temas de WordPress, por ejemplo, podrían no ser actualizados regularmente por lo tanto carecerán de las funcionalidades más recientes. De forma similar, no todos los temas de WordPress son creados con temas child en mente y por lo tanto, podrían ser malos candidatos para temas parent. Usted necesita elegir el tema parent perfecto para poder extenderlo de forma apropiada y hacer que funciona como una fundación para sus temas child.
  • Esfuerzos de personalización: Un tema child básicamente busca extender y personalizar un diseño de templa existente. Por lo tanto, si usted ya ha creado un sitio web alrededor de su tema parent, es probable que tenga que reconsiderar la personalización de elementos como los menús, opciones de tema, barras laterales, encabezados, etc. Al momento de mover un tema child.

Ahora que ya sabe cuando (y cuando no) utilizar un tema child, es momento de ponerse a trabajar y aprender cómo crear un tema child en WordPress.

¿Cómo Crear un Tema Child de WordPress?

Estableciendo un tema básico child en su WordPress involucra crear dos archivos: la hoja de estilo y el archivo de funciones. Demos un vistazo a ambos.

La Hoja de Estilo (Stylesheet)

Antes de que cree un archivo, usted necesita crear un folder para retener su tema. Esto va en el archivo wp-content/themes de su instalación de WordPress.

Recuerde: no haga esto en su sitio en vivo. Agregue primero el código a un sitio de desarrollo primero y luego póngalo a prueba en su sitio de prueba. Una vez que esté feliz con esto, usted puede transferirlo a su sitio en vivo. Todos los planes de hosting de Kinsta incluyen sitios de pruebas.

En su folder para su nuevo tema, cree un archivo llamado style.css. Agregue lo siguiente a este:

/*
Theme Name:  My Child Theme. Child for Twenty Nineteen.
Theme URI:  https://rachelmccollin.com
Description:  Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author:  Rachel McCollin
Textdomain:  mccollin
Author URI:  https://rachelmccollin.com/
Template:  twentynineteen
Version:  1.0
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

Este texto es comentado. No es un código que funciona con algo en su sitio o ofrece algún tipo de funcionalidad. En realidad, lo que hace es que le dirá a WordPress sobre el tema. Usted necesitará uno como este en todos sus temas, si no, WordPress no lo reconocería como un tema.

Revisemos cada una de estas líneas para identificar que hacen:

  • Nombre del Tema: El nombre único para su tema.
  • URI del Tema: Donde los usuarios pueden encontrar el código o documentación para el tema.
  • Descripción: Texto descriptivo para ayudarle a los usuarios a entender lo que hace el tema.
  • Autor: Su nombre
  • Textdomain: este es utilizado para internacionalización. Utilice este dominio de texto como el segundo parámetro de cualquier función de internacionalización.
  • URI del Autor: El sitio del autor.
  • Plantilla: El folder donde se encuentra almacenado el tema parent. Utilice el nombre del folder y no el nombre del tema. Sin esta línea, su tema no funcionará como un tema child.
  • Versión: el número de la versión.
  • Licencia: La licencia, la cual debe ser GNU. [enlace]
  • URI de la Licencia: El enlace a la información de la licencia.

La línea más importante para el tema child es la Plantilla: línea. Sin esta, el tema no funcionaría como un tema child. Sólo los temas child incluirán esta línea.

Agregue esta a la hoja de estilo de su tema, editándola para agregar sus propios detalles en lugar de los míos. Usted necesitará editar la Plantilla: línea para agregar el folder al tema existente en donde está almacenado, ya que este será su tema parent.

Ahora guardemos el archivo. Si usted fuese a ver la pantalla de detalles del tema en su sitio ahora, usted vería todo esto plasmado:

La página del tema en WordPress sin foto

La página del tema en WordPress sin foto

Esto no luce brillante porque no hay una imagen. Esta es una imagen que da una idea de como luce el tema. Al menos que su tema luzca muy distinto al tema parent, sólo copie el archivo screenshot.png de su tema parent para su tema child.

La página del tema en WordPress con una imagen

La página del tema en WordPress con una imagen

El Archivo de Funciones

El siguiente paso es agregar un archivo de funciones a su tema child. Usted necesita esto para que usted pueda en encolar la hoja de estilo del tema parent. Sin este, su sitio no tendría estilo, y luciría así:

Nuestra página de inicio sin CSS

Nuestra página de inicio sin CSS

Nada bien, ¡estoy seguro que está de acuerdo con esto! Así que agreguemos estilo a este para que luzca como debería.

En el folder de su tema child, agregue el archivo llamado functions.php. Ábralo y agregue este código:

<?php
/* enqueue script for parent theme stylesheeet */        
function childtheme_parent_styles() {
 
 // enqueue style
 wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );                       
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');

Que utiliza la función wp_enqueue_style() para encolar la hoja de estilo del tema parent, con la función get_template_directory_uri() ubicando donde se encuentra almacenado el archivo. La función se encuentra dentro una función que he creado llamada kinsta_parent_styles(), la cual está enganchada al hook wp_enqueue_scripts.

Usted podría estarse preguntando por qué utiliza una función llamada wp_enqueue_scripts y no wp_enqueue_styles. Esto es porque wp_enqueue_scripts es usada por ambos scripts y estilos y no hay un hook como wp_enqueue_styles.

Siéntase libre de editar mi código para agregar su propio prefijo al nombre de su función. Yo he usado “childtheme” como mi prefijo para asegurarme que mi función no esté en conflicto con cualquier otra función del tema parent o con cualquiera de mis plugins.

Ahora guarde el archivo.

¿Cómo Activar su Tema Child en WordPress?

Una vez que esté listo su tema child, usted necesita activarlo. Si a usted le preocupa que al activarlo el tema child apagará el tema parent, no se asuste: WordPress sabrá como utilizar los archivos del tema parent al menos que usted agregue nuevos archivos a su tema child para sobrescribirlos. Hasta ahora, usted no ha agregado archivos o funciones adicionales al tema child, así que su sitio funcionará exactamente de la misma forma que antes con el tema parent activado.

Recuerde: Haga esto en su sitio de desarrollo o prueba primero. No active su tema child en su sitio en vivo hasta que lo haya puesto a prueba.

En el admin de WordPress, vaya a Apariencia > Temas. Usted encontrará su tema child enlistado entre los temas instalado en su sitio.

Ponga el cursor sobre el tema y de clic en el botón de Activar. Este activará su tema child. Ahora cuando visite su sitio en vivo, lucirá como lucía antes.

La página de inicio del sitio

La página de inicio del sitio

Luce igual porque usted no ha agregado personalizaciones. Pero ahora usted tiene un tema child funcional. ¡Bien hecho!

Cómo Personalizar su Tema Child en WordPress

Ahora que tiene un tema child funcional para su sitio de WordPress, es momento de agregar personalizaciones. Aquí le mostrará como agregar archivos de plantillas para sobrescribir los que se encuentran en su tema parent, cómo agregar estilo a su tema child, y cómo agregar funciones nuevas.

Empecemos con los archivos de plantilla.

Cómo Agregar Archivos de Plantilla a su Tema Child de WordPress

Ya hemos visto como WordPress elige que archivos de plantilla utilizar cuando muestra contenido en su sitio. Hay dos cosas a recordar:

¿Cansado de tener problemas con WordPress y de tener un host tan lento? Nosotros le ofrecemos soporte de clase mundial por parte de expertos de WordPress, disponibles las 24/7 y también contamos con servidores súper rápidos. Cheque nuestros planes.

  • WordPress utilizará el archivo que venga primero en la jerarquía, sea del tema child o del parent.
  • Si un archivo de plantilla (o una parte de plantilla como el header.php) con el mismo nombre existe en el tema parent y child, WordPress utilizará el del tema child.

Para agregar personalizaciones, yo siento que es más sencillo empezar haciendo una copia del archivo relevante del tema parent, agregándolo al tema child y luego editándolo.

Esto aplica si el archivo de su tema child será el mismo archivo con el mismo nombre en el tema parent, o si será un nuevo archivo para mostrar un tipo de contenido diferente, o uno más alto en la jerarquía.

Así que si estoy agregando una nueva versión de page.php a mi tema child, el cual sobrescribirá el page.php en mi tema parent, yo copiare el page.php de mi tema parent a mi tema child y luego lo editaré. Asegúrese de copiar el archivo: no lo mueva, ya que no querrá hacer cambios al tema parent.

Y si quiere una plantilla personalizada en su tema child, por ejemplo, yo copiare el page.php a mi tema child, le cambiaré el nombre y luego editaré eso.

De esta forma, usted podrá asegurará que todos los aspectos del archivo que usted no necesita personalizar aún funcionarán correctamente. Lo mismo aplica para las partes de la plantilla.

Cómo Agregar Estilo a su Tema Child de WordPress

También puede agregar estilo al archivo style.css su tema child, el cual aumentará o sobrescribirá el estilo en la hoja de estilo de su tema parent.

WordPress llamará a la hoja de estilo de su tema padre primero, y luego la hoja de estilo del tema child. Esto quiere decir que si usted agrega estilo al tema child que se enfoca en el mismo elemento(s) que el estilo en el tema parent, este sobrescribirá el estilo del tema parent siempre y cuando utilice el mismo selector(es).

Así que imagínese que usted quiere cambiar el color del título del sitio. En el tema parent, esto podría estar estilizado de esta forma:

h1.site-title {
 color: #000;
}

Para sobrescribir esto en su tema child, usted agregaría esto:

h1.site-title {
 color: #303030;
}

Ya que el navegador se encontrará con esto después del estilo en el tema parent, este lo sobrescribirá y será usado en su lugar.

Cómo Agregar Funciones a su Tema Child en WordPress

Así que usted ha creado un tema child en WordPress no porque haya querido editar ni uno de los archivos de plantilla, si no porque usted quería agregar funcionalidad extra o sobrescribir una o más funciones en el tema parent.

Escribir funciones en su tema child es un poco más complicado que agregar archivos de plantillas, pero es posible.

Si quiere agregar una nueva función que no interactúa con una de las funciones en su tema parent, usted puede seguir adelante y hacer esto. Sólo agregue la función al archivo de functions.php en su tema child, engancharlo a una acción relevante o gancho filtro, y estará listo para continuar.

Pero si piensa sobrescribir o editar una función en el tema parent, usted necesita entender los métodos que puede utilizar para hacer esto. Hay tres formas en las que puede sobrescribir una función de tema parent en su tema child:

  • Si el tema en el tema parent es conectable, usted simplemente sobrescribe otra función en su tema child con el mismo nombre y WordPress utilizará esa función en lugar de la que viene del tema parent.
  • Si usted quiere parar la función en el tema parent de funcionar del todo, usted puede escribir una función en su tema child que se desengancha del gancho al que está atado.
  • Si quiere aumentar la función, usted puede agregar otra función (con un nombre distinto) en su tema child y asegurarse de que este funciona usando la que se encuentra en el tema parent.

Demos un vistazo más de cerca a como hacer cada una.

Sobrescribiendo una Función Conectable

Una función conectable es identificada por el chequeo condicional del que está atado. Este revisa si hay otra función con el mismo nombre que ya ha sido desplegada. Si es así, este no utiliza la función.

WordPress activará funciones de su tema child antes de los que se encuentran en el tema parent. Si se encuentra con una función conectable y usted ha agregado una función a su tema child con el mismo nombre, la función conectable no correrá.

Un ejemplo es la función que saca el colofón en el tema Storefront para sitios de WooCommerce. Aquí está la función sin sus contenidos:

if ( ! function_exists( 'storefront_credit' ) ) {
 function storefront_credit() {
  // contents for function here
 }
}

Si usted quería sobrescribir esto usted tendría que escribir otra función con el mismo nombre (storefront_credit()) y engancharlo al mismo gancho que en el tema parent.

Desenganchando una Función del Tema Parent

Si la función del tema parent no es conectable, usted aún puede prevenir que este sea activado. Imagine que su tema parent tiene una función llamada parent_function(), la cual está enganchada a un gancho init con una prioridad de 20. Usted quiere prevenir que esta corra para que pueda reemplazarla con una función propia.

Así es como luciría la función del tema parent:

function parent_function() {
 //contents of function here
}
add_action( ‘init’, ‘parent_function’, 20 );

Para desengancharla, usted tendría que programarlo en su tema child:

function remove_parent_function() {
 remove_action( ‘init’, ‘parent_function’, 20 );
}
add_action( ‘wp_head’, ‘remove_parent_function’ );

Desde cuenta que usted engancha su segunda función al gancho wp_head el cual funciona en la parte superior de cada página, y el que tiene que incluir el mismo valor para el parámetro prioritario como en la función original. Si la función original add_action()no tenía prioridad, usted puede omitir eso de la función remove_action() del tema child.

Nota: Si la función original fue enganchada a un gancho filtro en lugar de un gancho acción, usted tendría que usar remove_filter() de la misma forma.

Aumentando una Función con Otra Función

En lugar de sobrescribir o remover una función, probablemente en algunas ocasiones usted podría querer agregarlo. En este caso, usted escribiría una nueva función con un nombre distinto, y adjuntarlo al mismo gancho.

Imaginemos que hay un gancho de acción en el pie de página en su tema parent, llamado parent_footer. Cualquier función que adjunte a ese gancho correrá en el lugar donde está ubicado el gancho.

En el tema parent, ya existe una función llamada parent_footer_content() que ingresa datos al pie de página. ¿Pero qué tal si usted quería agregar código adicional a este?

Así es como podría lucir la función parent_footer_content() en el tema parent:

function parent_footer_content() {
 // content of function here
}
add_action( ‘parent_footer’, ‘parent_footer_content’ );

Ahora si usted quería agregar contenido adicional después de esto, usted crearía una función en su tema child, enganchado al mismo gancho de acción, con una prioridad que significaba que esta correría después de la primera función. Ya que la prioridad no fue establecida para la función del tema padre, por defecto se pone en 10. Así que necesita utilizar un número más alto para que se dispare después de eso.

function child_footer_extra_content() {
 // contents of function here
}
add_action( ‘parent_footer’, ‘child_footer_extra_content’, 20 );

Esto agregaría el código de la función de su tema child después del código de la función de su tema parent.

Cómo Resolver los Problemas de los Temas Child y Parents

Así que ahora ya sabe como crear un tema child en WordPress y cómo utilizarlo para sobrescribir archivos de plantillas, para agregar estilos adicionales, y agregar funcionalidad a su sitio.

¿Pero qué tal si su tema child no funciona como usted lo espera? ¿Qué tal si el contenido no es plasmado de la forma que usted esperaba?, ¿o si una función no está siendo activada?

Utilice este checklist para resolver los problemas de su tema child:

  1. Revise que usted tiene activo su tema child y que su tema parent no está corriendo. ¡Es sorprendentemente sencillo olvidarse de este paso!
  2. Refresque el caché de su navegador y el caché creado por cualquier plugin en su sitio.
  3. Configure el wp-debug a verdadero en el archivo wp-config.php de su tema child. Si usted está viendo una pantalla blanca, debería haber un mensaje diciéndole que código ha causado el problema y en que archivo se encuentra. Esto le ayudará a identificar el bug y en que archivo se está usando.
  4. Cheque el código de salida para su página, publicación o archivo. Encuentre el elemento corporal y vea que clases tiene. Esto le dirá que tipo de contenido está viendo en este momento, lo que le ayudará a identificar que archivo de plantilla está siendo usado. En algunas ocasiones no es lo que usted espera. Por ejemplo, la página principal de un blog jamás utiliza archive.php, a pesar de que está mostrando un archivo de sus publicaciones.
  5. Revise que usted les haya puesto los nombres correctos a sus archivos. Utilice la jerarquía de plantilla como referencia para estar seguro de que utilizó la sintaxis correcta.
  6. Si usted duplica un archivo del tema parent y lo agregó a su tema child, revise que haya guardado los cambios.
  7. Si la función de sobrescribir una función conectable no está funcionando, revise que usted reciba exactamente el mismo número que la función conectable y que esa función en el tema parent sea una conectable.
  8. Si sigue funcionando alguna función que usted haya eliminado, revise que usted haya agregado la prioridad correcta y que esté escrito idénticamente a la función y al gancho en el tema parent.
  9. Si usted utiliza prioridad para sobrescribir o aumentar una función, intente incrementar el valor de prioridad, para que esté absolutamente seguro que se active de último. Cheque que no haya otras funciones adjuntas al gancho que están interferidas con su código.

Afortunadamente uno o más de estos pasos le ayudarán a identificar el problema y arreglarlo en su tema child. Recuerde: no edite el tema parent directamente.

Consejos Útiles Cuando Este Trabajando con Temas Child de WordPress

¡Uf! Los temas child son todo un tema y también una función increíblemente valiosa de WordPress. Yo las uso en todos los sitios que construyo.

Para ayudarle a encontrar los métodos que usted necesita para darle el uso más efectivo a los temas child, aquí le dejo mis consejos para ayudarle con esto:

  • Si usted necesita editar un tema terciario, siempre utilice un tema child en su lugar. De esta forma, sus cambios no se perderán al momento de actualizar el tema.
  • Cada tema child necesita una hoja de estilo y un archivo de funciones.
  • WordPress utilizará una jerarquía de plantilla para determinar que archivo de plantilla utilizar cuando saca contenido. Si este encuentra dos archivos con el mismo nombre, este utilizará uno del tema child.
  • Usted puede sobrescribir una función conectable en su tema parent al escribir una función con el mismo nombre en su tema child.
  • Usted puede desenganchar una función del tema parent utilizando una función con remove_action() o remove_filter() en su tema child y luego escribir una nueva función.
  • Usted pude aumentar una función en su tema parent al escribir una función en su tema child y engancharla a la misma acción o gancho filtro.
  • No se olvide de activar su tema child después de subirlo. Y asegúrese de que nadie borre el tema parent de su instalación de WordPress: sin este, el tema child no funcionará.

Resumen

Los temas child son una función útil de WordPress que le permite personalizar un tema sin tener que editar de forma directa su código. Usted puede utilizar uno para agregar funcionalidad adicional al tema, para personalizar el estilo, o para crear/editar archivos de plantilla.

Si usted sigue el consejo anterior, usted podrá crear un tema child en WordPress siguiendo las mejores prácticas y tomar ventaja de estas para una variedad de tareas. Todo sin perder sus cambios y personalizaciones cuando usted actualice el tema parent.


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes