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 (
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.
link element and appending it to the
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.
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,
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.
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.
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
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
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
Here you can download the asset manager and use it straight away within your plugin. There are also some instructions for you.
Have you ever tried loading styles and scripts within widgets or shortcodes? Do you have your own asset manager?