The MD Scripts Manager makes it easy to optimize your most important pages by removing extra scripts and styles Plugin’s tend to load all over your website.

Using the md_filter_dequeue_scripts filter, you can add the names of the scripts and styles enqueued from Plugins and MD will hook into the WordPress enqueue system to give you an easy admin setting for disabling those scripts on individual posts, pages, and categories.

For example, once you activate the WooCommerce integration you will see a new option in the Scripts Manager (from the post editor) that allows you to remove all of the WooCommerce and scripts and styles on the entire page!

Why is this useful? Some of your most important pages may be loading scripts and styles by other Plugin’s that are not needed, causing many areas of your website to load slower than they should.

The MD Scripts Manager tackles this by hooking into the WordPress enqueue system to dequeue bad Plugins that load uncontrollably around your website.

Since there are so many Plugins in the world, MD simply cannot support them all. This filter has been created so you can add the Plugin’s you use to the Scripts Manager right from your child theme.

Extending the Scripts Manager

Take the code snippet from the top of this page and paste it into your child theme’s functions.php file, or any other file you may use for MD filters.

You will see the example has scripts and style names taken from WooCommerce, and this is the structure you can follow for adding the names of scripts and styles from other Plugin’s.

Note: Scripts (.js files) and Styles (.css files) require slightly different mechanisms to load, so always be sure to keep them separate in the Filter array.

How to use md_filter_dequeue_scripts

Time to go under-the-hood to find which scripts and styles we are looking for. Think about this like you are opening the hood of a card to fix the engine, except your website’s engine is a lot easier to work on:

1. Search the document (press cmd or ctrl + F) and type in keywords that may match the Plugin, like woocommerce for example which finds the following:

(click image for a larger size if needed)

2. Note that any script or style that is properly loaded into the WordPress enqueue system (if it’s not, you should report that as a bug to the developer) will register with a name for the script and a direct link to the .css/.js file.

You need to remember the Plugin folder name and use that in the filter, as well as copy each script name (or id from the screenshot) into the list of files.

3. The screenshot has four Stylesheets (.css) file names: wc-block-style, woocommerce-layout, woocommerce-smallscreen, woocommerce-general.

Note I ommitted the “-css” at the end of each file name as WordPress automatically adds that suffix to the end. For this filter to work, make sure you do not include the “-css” suffix in the filter unless you are sure that it is really part of the name.

Now to plug that into the blank filter as shown above will look like this:

/**
 * Remove extra scripts loaded by Plugins from the MD Scripts Manager.
 *
 * @since 4.9.4
 */ 
 function md_child_plugin_scripts( $scripts ) {
     $scripts['woocommerce'] = array(
         'label' => __( 'Remove WooCommerce scripts and styles', 'md' ),
         'styles' => array(
             'woocommerce-layout', 'woocommerce-smallscreen', 'woocommerce-general', 'wc-block-style'
         ),
         'scripts' => array(
             'wc-add-to-cart', 'jquery-blockui', 'jquery-placeholder', 'woocommerce', 'jquery-cookie', 'wc-cart-fragments'
         )
     );
     return $scripts;
 }
 add_action( 'md_filter_dequeue_scripts', 'md_child_plugin_scripts' );

To find the scripts is the same exact process, just plug the scripts name into the scripts section of the Filter.

How can you tell the difference behind a script and a style?

A script will always:

• Load with the <script src="">
• End the file extension as .js

A style will always:

• Load with the <link href="">
• End the file extension as .css

Use those two huge tells to quickly tell the difference between a script and style file.

Removing Scripts From Pages

Now that you have plugged in the correct file names and saved the filter to your child theme, let’s go test it out!

Go edit and post, page, or category and look for the Scripts Manager setting in the meta boxes section.

At the very bottom you will see the Scripts Optimization section, and your new custom option!

Simply enable the option(s) to remove the Plugin’s script you don’t want, save the page, and go see if the page has responded.

It’s worth repeating that the Plugin must be using the WordPress enqueue system to load its scripts and styles because otherwise MD will not be able to remove anything. It is seen as a bug if a Plugin’s scripts are not enqueued, and worth reporting to the Plugin developer (it would seem, amongst other things).

This functionality expands to all Posts, Pages, Categories, and even Custom Post Types and Archives that add MD’s meta boxes.

By following this guide you will learn how to install any MD Dropin to your child theme in a few simple steps. Installing Dropins requires basic experience with FTP program and easy to understand PHP code.

Continue reading →