How to create an Asset Manager for WordPress Plugins

Working with assets is pretty simple in WordPress. You have two hooks where you call the enqueue functions and that’s it. But what if you want to load the styles or script on just particular pages or only when a widget or shortcode is called? In this tutorial, we will build an asset manager for your WordPress plugin which you can utilize.

In a previous tutorial, I’ve written about how you can achieve a Better WordPress Performance by Controlling Scripts.

Defining Asset Manager

Our Asset Manager will be a single class that will have static methods and attributes which you can access. This will make the methods in our Asset Manager accessible from anywhere.

We will also have to create a way to load styles or scripts even after the enqueue hooks (wp_enqueue_scripts and admin_enqueue_scripts) are executed. When we want to load scripts, we will have to defer them so they’re executed at the end of the page.

When loading styles, we will have to load them using JavaScript by creating a link element and appending it to the head element.

We will also have all the code under our namespace so we can name the class Asset_Manager without conflicting with other existing code. If you’re not familiar with namespaces, you’re welcome to read my other tutorial on How to use PHP Namespaces in WordPress Plugins.

Attributes

Let’s define our attributes.

We are having 4 attributes:

• $version – This will hold our version number and be used when enqueueing scripts,
• $scripts – This will hold the definition of all our registered scripts,
• $styles – This will hold the definition of all our registered styles,
• $loaded_styles – This will hold all the loaded styles with JavaScript so we don’t load them more than once.

You can see that we have defined our namespace YourPlugin. You should use a different namespace of course or rename the class Asset_Manager into a unique one if you wish to ignore namespaces.

We have also defined a constant MY_PLUGIN_URL that will hold the URL to our plugin folder (if this is called in the root file). You might have that defined elsewhere already.

Enqueueing the Assets

Before we start defining methods to handle our assets, we will now hook the method to enqueue all added scripts and styles. We will also have a method to add some default scripts or styles.

In the method enqueue_all we are going through all the registered scripts and enqueue them one by one. Our method for loading default scripts is also called so we can immediately enqueue the needed scripts. You can define what is happening in there for your own needs.

Scripts Methods

So, now that we have to define methods to handle scripts. We will have methods to add the scripts, remove them, enqueue them and also load them when required.

Let’s go over each method now.

The first one is add_script. We are first looking if that script was already added. If not, we will add an array with information about the path to the script, dependencies and if it’s going to be loaded in the footer.

The second one, remove_script, will remove the script if it exists.

The third one, enqueue_script, will check if the script was already enqueued. If not, we will enqueue the script with the registered data.

The last one, load_script, will echo or return the script tag. Since we can call it whenever we need it, we will defer the script so it gets executed only at the end of the page.

Styles Methods

The same thing we did with the script methods, we will also do it for the styles.

Since we have already explained the similar methods, I’ll just go over the load_style.

This method will also echo or return the HTML we have constructed. This will be a script tag in which we get the head element and then create a new link element. We are defining the attributes in the link element and then appending the whole element in the head.

Using the Asset Manager

Ok, now that we have done everything, let’s see how we can use the Asset Manager. In your plugin, you will have to call it so that the __construct method gets called and it registers the hooks. If you’re using the namespace, be sure to call it correctly.

I am calling it within the same file, so I am sure we are under the correct namespace and we don’t have to use the use keyword to define it.

In this example, you can also see how we loaded a style only when adding content within the the_content filter. This will now load our admin.css with JavaScript to defer the CSS.

Code

Here you can download the asset manager and use it straight away within your plugin. There are also some instructions for you.

Conclusion

Having an Asset Manager in your own WordPress Plugin can help you in the long run. This way you won’t need to define how to load JavaScript or CSS. You can just use the Asset Manager and it will do everything for you.

Have you ever tried loading styles and scripts within widgets or shortcodes? Do you have your own asset manager?

Become a Sponsor