Find a Parent Theme's stylesheet $handle when it registers a stylesheet

Question

I have a child theme where I'm using the old @import to import in the CSS and I know this is no longer best practice. I've seen on the Wordpress codex how to do this properly, which seems straightforward enough, but I need to find the $handle used in the parent theme when it registers its stylesheet.

This is the code they give:

<?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' );
?>

How do I find out the parent theme's style.css $handle so i can swap it for 'parent-style' that is used above? (the theme I'm using is Divi, but I'd like to know how to find this because I do use other themes).

Thanks,

Emily

Answer 1

To clarify this, for anyone using Divi theme (but generally any WP theme), a simple inspection using Dev tools on the "head" for the stylesheet links usually gives a clue about the handle, as Den Isahac mentioned previously (it wasn't clear as he mentioned it can't be found).

Anything before the "-css" on the ID of the link for the stylesheet of the Parent theme is generally that handle.

Example below with Divi, id="divi-style-css" thus $handle = 'divi-style"

Thus for Divi, you would enqueue theme like this:

<?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' );
?>

Little bonus: Browsers have an annoying tendency of caching the child stylesheet depending on its "Version". The drawback is that it prevents you from ever seeing your edits even after refreshing / clearing cache, unless you change the "Version" number in your css file after every edit.

You can change this behavior by swapping wp_get_theme()->get('Version') (the $ver parameter) for the handy filemtime( get_stylesheet_directory() . '/style.css' ) instead, which adds a version number after the stylesheet corresponding to the timestamp from the last time you saved your child stylesheet, instead of the true "Version" declared in that stylesheet. You can eventually revert to the regular function before going live, but it can be extremely helpful during production.

The whole enqueue script for Divi would thus become:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'divi-style'; // This is 'Divi' style referrence for the Divi 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 ),
        filemtime( get_stylesheet_directory() . '/style.css' )
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Answer 2

That is not possible using a theme, you need to do it manually, or you will have to find a plugin that saves that data and in your themes retrieve that data.

The advantage of the plugin is that if the parent themes have a complex structure you will not have to search each file for the wp_enqueue_style and copy paste the handler, you will use either a get_option or a function that the plugin will provide either way you have to go into each child-theme and update that value.

Answer 3

The $handle in this case is just a name to identify the stylesheet that being referenced, and is hardcoded in PHP as a value and cannot be found anywhere.

In fact, the parent-style is going to be the id of the stylesheet being enqueued, and WordPress will generate the following HTML code for you:

<link id="parent-style-css" rel="stylesheet" href="THE PARENT STYLE CSS URL"/>

Noticed the parent-style value being used in the ID and then suffixed with css