How to Print all Loaded JavaScripts and CSS Stylesheets $handle for Your WordPress blog?

WordPress is a very flexible and feature rich blogging platform. Some time back I’ve written few articles on wp_enqueue_script and wp_enqueue_style WordPress APIs like best way to enqueue script in Genesis framework and best way to import fonts in your WordPress blog.

Both functions are very important and vastly used in WordPress Plugins and WordPress Themes. But you need to be little more cautious with these as if you have downloaded a plugin which enqueue’s lots of scripts then it may slow down your blog significantly.

Tips: It’s always good practice to check periodically how many scripts and css files my blog is loading on each page. How to check if a script/style was enqueued/registered? You should always remove unnecessary loaded JS and CSS from blog.

In WordPress speed optimization tutorial I’ve removed total 3 unnecessary files comment-reply.min.js, jquery-migrate.min.js and responsive-menu.js using WordPress hook wp_deregister_script and wp_deregister_style. But before that you need to know $handle for each scripts and styles.

In this tutorial we will go over steps which displays all loaded Java Scripts and Style Sheets CSS.

Step-1

Put below code to your theme’s functions.php file and save it.

function crunchify_print_scripts_styles() {
    // Print all loaded Scripts
    global $wp_scripts;
    foreach( $wp_scripts->queue as $script ) :
        echo $script . '  **  ';
    endforeach;

    // Print all loaded Styles (CSS)
    global $wp_styles;
    foreach( $wp_styles->queue as $style ) :
        echo $style . '  ||  ';
    endforeach;
}

add_action( 'wp_print_scripts', 'crunchify_print_scripts_styles' );

Step-2

Checkout all loaded CSS and JS in WordPress Admin panel. Make sure you use this on your local WordPress Installation or remove function once used.

Step-3

Now visit your blog. In my case it’s http://localhost/crunchify. You should loaded scripts and css at Frontend page.

In WordPress $wp_scripts object holds all loaded scripts and $wp_styles holds all loaded styles in memory. We are just iterating using for loop and it prints our required $handle, which we could use to deregister.