How to Enqueue Scripts and Styles in WordPress
WordPress has an enqueuing system for adding local/remote scripts along with styles to prevent conflicts with plug-ins. Since most users run WordPress with a theme and several plugins, developers are advised to use the correct method of loading scripts into WordPress.
It is high time to get an overview regarding the best way of enqueuing scripts along with styles in WordPress. This article is useful to any WordPress developer who is creating a WordPress plugin or theme to know what the best practise of enqueuing scripts/styles is.
It is important to enqueue scripts and styles correctly in WordPress.
Most Common Mistake
WordPress has a
wp_head() function with a
wp_head action hook that enables you to load anything into the head section of the website. Guys who are not familiar, simply add their scripts through the following code:
Another common mistake that plugin and theme developers make is that they load their own, custom version of jQuery which is not recommended. WordPress comes packaged with it’s own version of jQuery which should be used. Assuming that other plugins will use this jQuery distributed with WordPress, loading a different, custom version will only result in problems.
Why Enqueue Scripts in WordPress?
With the help of the
Enqueuing scripts in WordPress also ensures that duplicates with the same handle are not loaded twice.
Best Way to Enqueue Scripts in WordPress
It is an easy task to enqueue the scripts in WordPress in a proper manner. You may take into usage the following code for loading of scripts in WordPress:
Let’s go through the code quick. The procedure started by simply registering the script with the help of
wp_register_script() function. This particular function is well known to accept the following parameters:
$handle– It is the unique name provided to script. Here it is “my_amazing_script”.
$src– scr refers to the location of script. The
plugins_url()function is taken into usage to get the proper URL of plugins folder.
$deps– deps refers dependency. Since the script mentioned above uses jQuery, jQuery has been mentioned in the dependency area.
$ver– ver stands for version number of the script. This parameter is optional.
$in_footer– In order to load script into the footer section, it is good to set the value to be true. In case of header, the value must be set to false.
After providing all parameters in
wp_register_script(), call the
wp_enqueue_script() to actually enqueue the registered script by it’s handle. Going with this extra step for registering followed by enqueuing the script will allow other plugins/themes to deregister your script without modifying the core code of plug-in.
Proper Enqueuing of Styles
Similar to scripts, one can easily enqueue stylesheets. You may go through the following sample of code:
You will use the same action hook
wp_enqueue_scripts for registering/enqueueing both styles and scripts.
plugins_url() has been included to point to the location of script or style we desire to enqueue. If you want to get the URL to a script/stylesheet in your theme, simply use
get_template_directory_url(). Or alternatively, you can use
I hope that this has been useful and that you can use this in the development of your plugin or theme for WordPress
Jason is a web development professional with hobbies of innovative and technical writing. Currently, he works for WordSuccor Ltd., providing PSD to WordPress Service to global clients and have successfully delivered many top-grade projects related to it. He has been actively writing blogs and articles about technical stuffs.