{"id":133549,"date":"2014-10-31T08:00:00","date_gmt":"2014-10-31T12:00:00","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=133549"},"modified":"2022-02-23T02:37:11","modified_gmt":"2022-02-23T02:37:11","slug":"adding-scripts-and-styles-wordpress-enqueueing","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/adding-scripts-and-styles-wordpress-enqueueing\/","title":{"rendered":"Adding Scripts and Styles to WordPress Correctly with Enqueueing"},"content":{"rendered":"<p>Many of us use styles to alter the look of our website, and scripts to enhance 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. Instead of plopping them into the header or footer file we need to use WordPress&#8217; enqueue functionality.<\/p>\n<p>In this article, I&#8217;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.<\/p>\n<p>We&#8217;ll cover:<\/p>\n<ul>\n<li><a href=\"#what-is-enqueuing\">What is Enqueuing<\/a><\/li>\n<li><a href=\"#enqueuing-bottom-line\">Enqueuing: The Bottom Line<\/a><\/li>\n<li><a href=\"#enqueuing-assets\">Enqueuing Assets Correctly<\/a><\/li>\n<li><a href=\"#enqueuing-detail\">Enqueuing in Detail<\/a><\/li>\n<li><a href=\"#asset-registration\">Asset Registration<\/a><\/li>\n<li><a href=\"#removing-scripts\">Removing Scripts and Styles<\/a><\/li>\n<\/ul>\n<h2 id=\"what-is-enqueuing\">What is Enqueueing?<\/h2>\n<p>Enqueueing is a CMS-friendly way of adding scripts and styles to WordPress websites. Multiple plugins you have may use jQuery and other shared scripts. If each plugin linked to these assets separately, chaos would ensue and all your JavaScript could stop working.<\/p>\n<p>By 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. You can even specify the dependencies of your scripts and styles and WordPress will add them in the correct order.<\/p>\n<p>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.<\/p>\n<h2 id=\"enqueuing-bottom-line\">Enqueuing: The Bottom Line<\/h2>\n<p>No matter how you attach your assets, the end result will be a <code>&lt;script&gt;<\/code> or a <code>&lt;link&gt;<\/code> tag somewhere in your website&#8217;s HTML. The example below shows three scripts and two styles loaded on a website:<\/p>\n<div class=\"gist\" data-gist=\"37363697ded3703b37c38c13dcb26a7b\" data-gist-file=\"enqueues-skeleton.html\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/37363697ded3703b37c38c13dcb26a7b.js?file=enqueues-skeleton.html\">Loading gist 37363697ded3703b37c38c13dcb26a7b<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Functionality-wise, this is perfectly fine ,but let&#8217;s not forget that WordPress is tasked with a bit more than what I&#8217;ve shown above. There may be a few other scripts and styles hanging around. Since the order you include scripts and styles in matters a lot, if you just start putting them in your theme&#8217;s header or footer you may get lost very soon.<\/p>\n<p>In addition, the majority of these scripts are not visible in the your theme&#8217;s PHP code. All the scripts WordPress and other plugins need are added via the <code>wp_head()<\/code> and <code>wp_footer()<\/code> functions.<\/p>\n<h2 id=\"enqueuing-assets\">Enqueueing Assets Correctly<\/h2>\n<p>Enqueueing is a way to let WordPress know about your scripts and their\u00a0dependencies. Based on this, WordPress works out the placement of the script for you. Since this is all done by code you won&#8217;t have to worry about rearranging scripts when you need to add a new one. Let&#8217;s go through the scripts in the previous section, adding them by enqueueing:<\/p>\n<div class=\"gist\" data-gist=\"5eba5ee051046813680204a397a4949a\" data-gist-file=\"enqueue-simple.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/5eba5ee051046813680204a397a4949a.js?file=enqueue-simple.php\">Loading gist 5eba5ee051046813680204a397a4949a<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>This code should be placed in the <code>functions.php<\/code> file of our theme, child theme, or in a plugin file. Note that both scripts and styles are enqueued by attaching a function to the <code>wp_enqueue_scripts<\/code> hook.<\/p>\n<p>The first two things I enqueued were our styles. I defined our theme style first, even though it depends on the reset style. This is not a problem since I defined this dependency in the third parameter. The first parameter is the unique name of the asset, the second is its location.<\/p>\n<p>The third asset I&#8217;ve added is the excellent <a href=\"https:\/\/owlcarousel2.github.io\/OwlCarousel2\/\" target=\"_blank\">Owl Carousel<\/a>. In the third parameter I&#8217;ve specified jQuery as a dependency. I do not need to enqueue this myself because it is built into WordPress. Take a look at the <a href=\"http:\/\/codex.wordpress.org\/Function_Reference\/wp_enqueue_script#Handles_and_Their_Script_Paths_Registered_by_WordPress\" target=\"_blank\">WordPress Codex<\/a> for a list of included scripts.<\/p>\n<p>Finally, I include the theme script. Our script depends on jQuery and Owl Carousel. In reality you could get away with just defining Owl Carousel as the dependency. Since jQuery is a dependency for Owl Carousel it would be included before it in any case. That said, I like to state my dependencies fully, it gives me more information when looking at the code.<\/p>\n<p>The last piece of the puzzle is making sure that our theme script is loaded in the footer. This can be done by defining the fifth parameter as <code>true<\/code>. The fourth parameter is an optional version number which I&#8217;ve set to 1.0.<\/p>\n<h2 id=\"enqueuing-detail\">Enqueueing in Detail<\/h2>\n<p>Now that you&#8217;ve seen an example, let&#8217;s get our hands dirty and look at all the functions and parameters available to us.<\/p>\n<p>We used two functions: <code>wp_enqueue_script()<\/code> and <code>wp_enqueue_style()<\/code>. They both take five parameters, sharing the first four:<\/p>\n<div class=\"gist\" data-gist=\"915b8254122a3e704612867f8e1f1379\" data-gist-file=\"enqueues-functions.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/915b8254122a3e704612867f8e1f1379.js?file=enqueues-functions.php\">Loading gist 915b8254122a3e704612867f8e1f1379<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<ul>\n<li><strong>handle:\u00a0<\/strong>This is the name of your script or style. It is best to use only lowercase letters and dashes here, and make sure to use a unique name.<\/li>\n<li><strong>source:\u00a0<\/strong>The URL of your script or style. Make sure to use functions like\u00a0get_template_directory_uri()\u00a0or plugins_uri().<\/li>\n<li><strong>dependencies:\u00a0<\/strong>An array of handles to assets which your script or style depends on. These will be loaded before your enqueued script.<\/li>\n<li><strong>version:\u00a0<\/strong>A version number which will be appended to the query. This ensures that the user receives the correct version, regardless of caching.<\/li>\n<li><strong>in_footer:\u00a0<\/strong>This parameter is only available for scripts. If set to true the script is loaded through\u00a0wp_footer()\u00a0at the bottom of your page.<\/li>\n<li><strong>media:\u00a0<\/strong>This parameter is for styles, it allows you to specify the type of media the style should be displayed for. For example: screen, print, handheld, etc.<\/li>\n<\/ul>\n<p>Hopefully the explanation of the parameters made our example in the previous section that much clearer. You can now start playing around with your own styles and scripts.<\/p>\n<h2 id=\"asset-registration\">Asset Registration<\/h2>\n<p>There are actually two steps to adding an asset, but the enqueueing function can get it done in one go. Technically scripts and styles are first registered and then enqueued. Registration lets WordPress know about your assets, while enqueuing actually adds them to the page. Here&#8217;s an alternative way to add our Owl Carousel:<\/p>\n<div class=\"gist\" data-gist=\"a5eaebbbb15320a1c7de7716ec02a3b9\" data-gist-file=\"enqueue-register.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/a5eaebbbb15320a1c7de7716ec02a3b9.js?file=enqueue-register.php\">Loading gist a5eaebbbb15320a1c7de7716ec02a3b9<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>So why do this in two steps when one is enough? The answer is that in some cases you don&#8217;t register the script in the same place you enqueue it. A good example is shortcodes. Suppose a shortcode you create requires some Javascript. If you enqueue it by attaching it to <code>wp_enqueue_scripts<\/code> hook it will be loaded on every request, even if the shortcode isn&#8217;t used.<\/p>\n<p>The answer is to register the script using the <code>wp_enqueue_scripts<\/code> hook, but enqueue it in the shortcode function. This will load it only when the shortcode is actually used. If the shortcode is used multiple times the script will only be included once so we&#8217;ve covered all the bases.<\/p>\n<p>The <code>wp_register_scripts()<\/code> and <code>wp_register_styles()<\/code> functions share the same parameters as their enqueuing brethren. The only difference is the the enqueue functions allow you to specify only the handle as long as that handle has been registered.<\/p>\n<h2 id=\"removing-scripts\">Removing Scripts And Styles<\/h2>\n<p>WordPress provides dequeueing and deregistering functions for both scripts and styles.<\/p>\n<ul>\n<li><code>wp_deregister_script()<\/code><\/li>\n<li><code>wp_deregister_style()<\/code><\/li>\n<li><code>wp_dequeue_script()<\/code><\/li>\n<li><code>wp_dequeue_style()<\/code><\/li>\n<\/ul>\n<p>These function allow us to remove assets modularly. The following example shows how jQuery can easily be removed and replaced by a more recent version.<\/p>\n<div class=\"gist\" data-gist=\"702c31353253e89913a7a42b4b2a59f8\" data-gist-file=\"enqueues-jquery.html\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/702c31353253e89913a7a42b4b2a59f8.js?file=enqueues-jquery.html\">Loading gist 702c31353253e89913a7a42b4b2a59f8<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>That being said, it is almost never a good idea to replace jQuery with a new version. WordPress is built to work as smoothly as possible with the version added to it by default. Replacing it should not be taken lightly.<\/p>\n<h2>Summing Up<\/h2>\n<p>Hopefully, you now see why enqueueing is such an important process. It takes the burden of dependency maintenance off your shoulders and allows you to add your scripts in a modular and manageable way.<\/p>\n<p>Enqueueing is required for all WordPress plugins and themes. Your product (free or premium) will not be accepted into the WordPress repository and many premium marketplaces without it. It forms the basis of &#8220;playing nice with others&#8221; and should be followed by every developer.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Many of us use styles to alter the look of our website, and scripts to enhance 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. Instead of plopping them into the header or footer file we need to [&hellip;]<\/p>\n","protected":false},"author":344049,"featured_media":162911,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[],"tutorials_categories":[],"class_list":["post-133549","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/133549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344049"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=133549"}],"version-history":[{"count":9,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/133549\/revisions"}],"predecessor-version":[{"id":222634,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/133549\/revisions\/222634"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/162911"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=133549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=133549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=133549"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=133549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}