Creando un child theme en WordPress

En esta sección veremos cómo crear un Child Theme.

Lo primero es encontrar un tema en el que basarnos, no tiene que ser un tema que nos guste sino que cumpla con las funcionalidades que deseamos que nuestro Child Theme tenga.

 

child theme - parent theme
Todos los cambios realizados en el Child Theme permanecerán incluso si el Parent Theme se actualiza.

 

Un child theme tiene al menos 1 directorio y 2 archivos (function.php y style.css).

Como secundario el directorio que creamos debería tener el nombre del tema más -child este debe ir dentro de el directorio wp-content/themes/. El archivo css tiene que decir de quien es el padre.

A continuación un ejemplo con el tema twentyfifteen:

/*
Theme Name:   Twenty Fifteen Child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfifteen
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:  twenty-fifteen-child
*/

Creando el archivo functions.php

Se debe adherir lo que cargara en este caso la dependencia del tema padre

<?php
function my_theme_enqueue_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Además nuestro tema hijo tendrá un estilo css por lo tanto tenemos que adherir el tema padre como dependencia. De esta manera el style.css de nuestro tema hijo se cargue después del style.css que se encuentra en el tema padre.

<?php
function my_theme_enqueue_styles() {
   $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
   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 ),wp_get_theme()->get('Version'));
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Para adherir un javascript.

function my_theme_enqueue_script() {
   wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_script' );

Tenga muy en cuenta el orden de las declaraciones que hace dentro de esta función, el porqué de esto es muy simple si una librería javascript depende de otra es recomendable que la de que depende sea declarada primero.

Si desea saber mas de functions.php dejo este link .

Ayudame: Por favor deja un comentario antes de irte, tu opinión es bienvenida. Si te gusta el contenido comparte.