#WORDPRESS ENQUEUE SCRIPT HOW TO#
#WORDPRESS ENQUEUE SCRIPT REGISTRATION#
#WORDPRESS ENQUEUE SCRIPT CODE#

#WORDPRESS ENQUEUE SCRIPT REGISTRATION#

Registration lets WordPress know about your assets, while enqueuing actually adds them to the page. Technically scripts and styles are first registered and then enqueued. There are actually two steps to adding an asset, but the enqueueing function can get it done in one go. You can now start playing around with your own styles and scripts. Hopefully the explanation of the parameters made our example in the previous section that much clearer. For example: screen, print, handheld, etc. media: This parameter is for styles, it allows you to specify the type of media the style should be displayed for.If set to true the script is loaded through wp_footer() at the bottom of your page. in_footer: This parameter is only available for scripts.This ensures that the user receives the correct version, regardless of caching. version: A version number which will be appended to the query.These will be loaded before your enqueued script. dependencies: An array of handles to assets which your script or style depends on.Make sure to use functions like get_template_directory_uri() or plugins_uri(). source: The URL of your script or style.It is best to use only lowercase letters and dashes here, and make sure to use a unique name. handle: This is the name of your script or style.The fourth parameter is an optional version number which I’ve set to 1.0. This can be done by defining the fifth parameter as true. The last piece of the puzzle is making sure that our theme script is loaded in the footer. That said, I like to state my dependencies fully, it gives me more information when looking at the code. Since jQuery is a dependency for Owl Carousel it would be included before it in any case. In reality you could get away with just defining Owl Carousel as the dependency. Our script depends on jQuery and Owl Carousel. Take a look at the WordPress Codex for a list of included scripts.įinally, I include the theme script. I do not need to enqueue this myself because it is built into WordPress. In the third parameter I’ve specified jQuery as a dependency. The third asset I’ve added is the excellent Owl Carousel. The first parameter is the unique name of the asset, the second is its location. This is not a problem since I defined this dependency in the third parameter.

I defined our theme style first, even though it depends on the reset style. The first two things I enqueued were our styles. Note that both scripts and styles are enqueued by attaching a function to the wp_enqueue_scripts hook.

#WORDPRESS ENQUEUE SCRIPT CODE#

This code should be placed in the functions.php file of our theme, child theme, or in a plugin file. The example below shows three scripts and two styles loaded on a website: No matter how you attach your assets, the end result will be a or a tag somewhere in your website’s HTML. It takes all the information from what is needed by the core, by your theme and your plugins, creates a list of scripts and styles needed, and outputs them in the correct location. You can even specify the dependencies of your scripts and styles and WordPress will add them in the correct order. If each plugin linked to these assets separately, chaos would ensue and all your JavaScript could stop working.īy enqueueing scripts you are telling WordPress about the assets you want to add and it will take care of actually linking to them in the header and footer. Multiple plugins you have may use jQuery and other shared scripts.

#WORDPRESS ENQUEUE SCRIPT HOW TO#

In this article, I’ll show you how to add scripts and styles to your themes and plugins, whether you are creating something on the front-end or in the backend.Įnqueueing is a CMS-friendly way of adding scripts and styles to WordPress websites. Instead of plopping them into the header or footer file we need to use WordPress’ enqueue functionality. It is important to note however, that the way you add these scripts to WordPress is just as important as the content of these files. Many of us use styles to alter the look of our website, and scripts to enhance functionality.

Wordpress enqueue script