How to list enqueued scripts and styles handles in the WordPress frontend

Contents

Build your own WordPress Support Plan

Expert, yet affordable WordPress support & maintenance plans.
View our pricing

It’s well known that WordPress can get pretty bloated when you start adding various plugins and themes, it’s also pretty easy to conditionally dequeue scripts and styles so they only load when they are needed. For example, you may only need the WordPress media embed scripts on your posts so why load it on every page? The only issue with dequeuing styles and scripts is the issue of finding the handles used to enqueue then in the first place.

I wrote this super simple function that lists the enqueued handles and URLs for the scripts and styles in the frontend. Using this function you can quickly see what handles are being used and then use that handle to dequeue that style or script. It isn’t the most elegant but it’s intended for quick inspection of styles and scripts and identifying the handles.

List Enqueued Scripts and Styles Handle, WordPress Function


/**
 * Print enqueued style/script handles
 * https://lakewood.media/list-enqueued-scripts-handle/
 */
function lakewood_print_scripts_styles() {
    if( !is_admin() && is_user_logged_in() && current_user_can( 'manage_options' )) {
        // Print Scripts
        global $wp_scripts;
        foreach( $wp_scripts->queue as $handle ) :
           echo '<div style="margin: 5px 3%; border: 1px solid #eee; padding: 20px;">Script <br />';
           echo "Handle: " . $handle . '<br />';
           echo "URL: " . $wp_scripts->registered[$handle]->src;
           echo '</div>';
        endforeach;
    
        // Print Styles
        global $wp_styles;
        foreach( $wp_styles->queue as $handle ) :
           echo '<div style="margin: 5px 3%; border: 1px solid #eee; padding: 20px; background-color: #e0e0e0;">Style <br />';
           echo "Handle: " . $handle . '<br />';
           echo "URL: " . $wp_styles->registered[$handle]->src;
           echo '</div>';
        endforeach;
    }
}
add_action( 'wp_print_scripts', 'lakewood_print_scripts_styles', 101 );

You can place the above function in your theme functions.php, I have set a few conditionals to ensure that the handles and URLs aren’t shown to public visitors and only for the logged in administrators. You can change these conditionals, you will certainly need to change the admin conditional, I’d suggest something like:

is_super_admin(1)

How is the function useful?

You can now use the handles to dequeue scripts and styles that aren’t needed on that specific page.

For example, you can use a really simple function such as below to dequeue the media embed scripts everywhere apart from single posts. You can also include the Jetpack ‘devicepx’ script from all pages and posts.

This function is also useful with plugins such as Autoptimize where you may need the script handle to make advanced changes.

function lakewood_deregister_scripts() {	
	wp_dequeue_script('devicepx');
	
	if( !is_single() ) {
		wp_dequeue_script('wp-mediaelement');			
	}
}
add_action( 'wp_print_scripts', 'lakewood_deregister_scripts', 10 );

I hope you find this article useful if you have any questions please don’t hesitate to ask in the comments below.

EDIT: Added !is_admin() to the conditional statement to prevent handles being displayed in admin.

Written By
Adam
Founder of WP Helper.
You will also like these articles

Relax Knowing Your WordPress Site Is Secure & Running Smoothly 24/7

Let us manage your WordPress site, everything from security to updates will be taken care of. Support plans also come with dedicated support so we can do anything from adding content to customising your site for you.

Same Day Professional WordPress Support

Get WordPress Support Today

Need help with a single WordPress problem, today? We can help with anything from adding analytics tracking code to site hack recovery. Full money back guarantee on all jobs.

1. Submit a Support Request

Use our support ticket form below to send details of your problem to our developers.

2. Get a Quote

We will review your request and provide a quote within 24 hours (but usually within a few hours).

3. We fix your WordPress problem

Our team will begin fixing your WordPress problem the same day.

4. 100% Money Back Guarantee

If we can’t fix the problem for the amount quoted we will refund you 100%.

  • Do you have a screenshot of the issue or have a copy of the theme or plugin that is at fault? If you want to upload php, html or css please zip first.
    Drop files here or
    Accepted file types: jpg, jpeg, png, pdf, zip, gzip, rar, doc, txt, Max. file size: 15 MB, Max. files: 10.