Como hacer un tema hijo en WordPress

Muchos usuarios de WordPress que se atreven a modificar cualquier plantilla web, lo hacen desconociendo por completo qué son los child-themes o lo que es lo mismo, las plantillas hijo de la plantilla principal. El gran problema del cual se enfrentan estos usuarios, es que al modificar la plantilla principal, si ésta es actualizada por el autor, al realizar la actualización, elimina los cambios o modificaciones realizadas dejando la plantilla en estado puro nuevamente.

Por eso los usuarios no actualizan sus respectivas plantillas web por el miedo a perder las modificaciones realizadas. Para evitar perder las modificaciones realizadas, la solución es la plantilla hijo (child-theme), que es un tema que hereda la funcionalidad de otro tema principal llamado “tema padre”. Con los temas hijos podemos modificar y añadir nuevas funcionalidades del tema principal (padre). O sea, en vez de modificar el tema principal, creamos un tema hijo que prevalecerá sobre el tema principal. Además, cada vez que se actualice el tema padre, el hijo adquiere nuevas características sin perder las modificaciones.

Como hacer un tema hijo en wordpress

En este  tutorial vamos a proceder a la creación de un tema hijo partiendo de nuestra plantilla web Athenea. Para ello, si no tienes la plantilla padre Athenea, la puedes descargar directamente desde el repertorio de WordPress o desde nuestra página web en: https://ibermega.com/themes/ y la instalas en el directorio de tu wordpress en la ubicación: /wp-content/themes/ desde el instalador de temas en Apariencia del menú de administración. Si tienes otros temas en este directorio y si accedes por FTP para verlos, puedes comprobar que tendrás una estructura más o menos como mostramos a continuación y con el tema Athenea ya instalado:

twentyeleven
twentyfourteen
athenea

Simplemente en ese directorio añadiremos una nueva carpeta que llamaremos athenea-child y que será nuestra plantilla web hijo de la plantilla principal Athenea. Además, incluiremos dentro una hoja de estilo con el nombre de style.css. Ojo, si nombras la hoja de estilo por otro cualquiera, simplemente no funcionará el tema hijo:

twentyeleven
twentyfourteen
athenea
athenea-child/
              style.css

Con un editor de texto editamos style.css, insertamos las siguientes líneas y lo subimos por FTP dentro de la carpeta athenea-child. Las líneas Template: athenea y Text Domain: athenea-child nunca deben de ser modificadas puesto que, Template nos dice cual es el tema padre y Text Domain se refiere a la carpeta del tema hijo. Todos los demás podrá editarlos a tu gusto respetando la primera palabra en el idioma inglés tal y como está, puesto que WordPress se fijará ahí para reconocer a la nueva plantilla hijo y sus referencias.

/*
 Theme Name:   Athenea Child
 Theme URI:    http://www.ibermega.com/themes/athenea
 Description:  Este es mi primer tema hijo de Athenea
 Author:       Mi nombre completo
 Author URI:   http://ejemplo.com
 Template:     athenea
 Version:      1.0.0
 Tags:         two-columns, custom-background, custom-header, threaded-comments, sticky-post, translation-ready
 Text Domain:  athenea-child
*/

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

/* =Aquí podemos personalizar tu nuevo tema
-------------------------------------------------------------- */

Si has seguido todos los pasos señalados, enhorabuena! ya tienes tu primera plantilla web hijo del tema Athenea. Para comprobarlo, entra en Apariencia -> Temas -> y ahí tendrás Athenea Child para activar. La verás sin ninguna imagen de captura de pantalla ya que solo hemos puesto dentro del directorio athenea-child la hoja de estilo.

A partir de ahora ¿cómo funciona el tema hijo?

Tu nueva plantilla web Athenea Child o como le hayas llamado, adquiere de forma automática todas, absolutamente todas las características del tema padre principal y solo es posible realizar modificaciones si insertamos en la plantilla hijo el archivo exacto de la plantilla padre.

Por ejemplo, si queremos modificar el pie de página, debemos de incluir en el directorio hijo el archivo footer.php de la plantilla padre. Como Athenea es una plantilla algo compleja al tratarse de un Premium Gratuito, vamos a ir modificando elementos básicos sin tocar los diseños de las hojas de estilo. Más adelante y en posteriores tutoriales lo haremos, pero primero debes de familiarizarte de las modificaciones básicas que todo el mundo hace cuando descarga una nueva plantilla web de WordPress.

Modificar los datos del pie de página

Son muchos los que modifican los datos del pie de página para que no aparezcan los datos de contacto del autor de la plantilla web, para eliminar las referencias a WordPress y evitar así el interés de los hackers o ambas para poner sus propios datos de contacto. Para proceder a modificar dichos datos, copia y pega en el directorio athenea-child el archivo footer.php:

twentyeleven
twentyfourteen
athenea
athenea-child/
              style.css
              footer.php

Con un editor de texto, editamos footer.php que tiene el siguiente código:

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package Athenea
 */
?>
<footer id="colophon" class="site-footer" role="contentinfo">
 <div class="container">
    <div class="site-info">
     <div class="row">
      <div class="col-xs-8">
        <?php do_action( 'athenea_credits' ); ?>
        Copyright &copy; <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?><br>
        <?php printf( __( 'Proudly powered by %s', 'athenea' ), '<a href="http://www.wordpress.org/" title="WordPress"><div alt="f205" class="genericon genericon-wordpress"></div> WordPress</a>' ); ?>
        <span class="sep"> | </span>
        <a href="<?php echo esc_url( __( 'http://www.ibermega.com/', 'athenea' ) ); ?>"><?php _e('Theme designed by','athenea'); ?> <?php _e('IBERMEGA digital','athenea'); ?></a>
      </div>
      <div class="col-xs-4">
      <a href="#toop" class="scroller pull-right" data-section="#page" title="<?php _e( 'Top', 'athenea' ); ?>"><span class="genericon-collapse"></span></a>
      </div>
      </div>
     </div><!-- #row -->
    </div><!-- .site-info -->
 </div><!--/container-->
</footer><!-- #colophon -->
    
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

Si queremos quitar las referencias de WordPress, debemos de eliminar las líneas 17 y 18. Y para cambiar los datos del autor por los tuyos, en la línea 19 cambia la url: http://www.ibermega.com/ por la tuya: http://www.miweb.com/ y el nombre en: IBERMEGA digital por el tuyo: Mi Web. Sin modificar nada más del resto del código, debemos de tener algo parecido como el siguiente código en el footer.php de Athenea Child:

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package Athenea
 */
?>
<footer id="colophon" class="site-footer" role="contentinfo">
 <div class="container">
    <div class="site-info">
     <div class="row">
      <div class="col-xs-8">
        <?php do_action( 'athenea_credits' ); ?>
        Copyright &copy; <?php echo date('Y'); ?> <?php bloginfo( 'name' ); ?><br>
        <a href="<?php echo esc_url( __( 'http://www.miweb.com/', 'athenea' ) ); ?>"><?php _e('Theme designed by','athenea'); ?> <?php _e('Mi Web','athenea'); ?></a>
      </div>
      <div class="col-xs-4">
      <a href="#toop" class="scroller pull-right" data-section="#page" title="<?php _e( 'Top', 'athenea' ); ?>"><span class="genericon-collapse"></span></a>
      </div>
      </div>
     </div><!-- #row -->
    </div><!-- .site-info -->
 </div><!--/container-->
</footer><!-- #colophon -->
    
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

El archivo footer.php con sus modificaciones prevalecerá por encima del archivo original del tema padre mostrando los nuevos datos sin necesidad de modificar nada del tema principal que, cuando haya una nueva actualización no se verá afectado.