How do I set up a child-theme without using @import

Question

The code that is in codex for queuing the style of the parent theme instead of using @import, is not well commented, so i will comment it more, so you have this:

<?php
function my_theme_enqueue_styles() {
    $parent_style="parent-style";
    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');
?>

1.- line:

$parent_style="parent-style";

this is literally a string name that you are giving to the theme stylesheet, it will be the $handle of the stylesheet you are queuing, it can be what you want, by example 'divi-style', in the HTML it will be used as the ID like this <link rel="stylesheet" id="divi-style" ...

2.- line:

wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');

its registering the stylesheet and queuing it, when its registering it, it will use the name of the first parameter in this case it will be 'parent-style', also its using get_template_directory_uri() to get the path to the parent theme stylesheet.

3.- line:

wp_enqueue_style('child-style', 
            get_stylesheet_directory_uri() . '/style.css', 
            array($parent_style), 
            wp_get_theme()->get('Version')
            );

this is registering and queuing the child theme stylesheet (the current theme stylesheet), this is the usual procedure for a theme, each parameter its already explained here, for the example:

'child-style' – this is the name of this stylesheet the $handle
get_stylesheet_directory_uri() . '/style.css' – this is the path to
the stylesheet file.
array($parent_style) – this is the array of stylesheets that we need
to run before our stylesheet runs we cant put actual paths that is
why we name them with a $handle, in this case we need the parent stylesheet to run first (its a dependency)
wp_get_theme()->get('Version') – this is the number version that
will be at the end of the stylesheet URL like this /style.css?ver=1.0, this is for cache purposes, the standard is that you update the version so the latest file is loaded and not a cached version, you dont want to change that number in all the files where you use it right? so use wp_get_theme()->get('Version') it will get the version that is in your style.css file (not the parent one).

so if you want the resumed version it will be like this:

<?php

function my_theme_enqueue_styles() {
    //load the parent stylesheet
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    //load the child stylesheet but after the parent stylesheet
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ));

}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Related Posts: