How to find the Handle of a CSS file in wordpress?

Question

I am trying to delay the loading of a css file which is blocking the other resources from loading first during the loading of the website page.

I am supposed to add this code to the functions.php file:

function delay_css_loading() {
    wp_enqueue_style( 'your-css-handle', get_template_directory_uri() . '/path/to/your.css', array(), '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'delay_css_loading', 999 );

For this I have the url of the CSS file but not the handle ('your-css-handle') for the same.

How do I find the Handle of the css file in wordpress?

Tried extracting the id from the url as a the handle, but ir didnt work.

Answer 1

This webpage provides instructions on how to get the handles of the stylesheets running on a WordPress instance.

We can modify it slightly to output both the handle and the source (where available). This shall be the code you need.

function print_stylesheets() {
    // Print all loaded Styles (CSS) and their URL
    global $wp_styles;
    foreach( $wp_styles->queue as $handle ) :
        $style = $wp_styles->registered[$handle];
        if ( $style->src ) {
            echo '<p><strong>' . $handle . '</strong> - ' . $style->src . '</p>';
        } else {
            echo '<p><strong>' . $handle . '</strong></p>';
        }
    endforeach;
}
add_action( 'wp_print_scripts', 'print_stylesheets' );