![]() 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. ![]() They both take five parameters, sharing the first four: We used two functions: wp_enqueue_script() and wp_enqueue_style(). Now that you’ve seen an example, let’s get our hands dirty and look at all the functions and parameters available to us. 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. 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. 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.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |