We hope this article helped you learn how to properly add jacvascript and styles in WordPress. If you are working with a child theme, then use get_stylesheet_directory_uri(). However, if you are using the enqueue scripts function in your theme, then simply use get_template_directory_uri() instead. In the examples above, we have used plugins_url function to point to the location of the script or style we wanted to enqueue.
Despite the name, this function works for both. Notice that we have used wp_enqueue_scripts action hook for both styles and scripts. Instead of using wp_enqueue_script, we are now using wp_enqueue_style to add our stylesheet. Just like scripts, you can also enqueue your stylesheets.
Enqueue scripts wordpress code#
Now some might wonder why are we going the extra step to register the script first and then enqueuing it? Well, this allows other site owners to deregister your script without modifying the core code of your plugin. This allows you to reduce the memory footprint of your plugin. If you were adding this to your theme or plugin, then you can place this action hook where the script is actually required.
Since this is an example code, we have added that right below everything else. The last step is to use wp_enqueue_scripts action hook to actually load the script. If you want to load the script in the header, then you would make it false.Īfter providing all the parameters in wp_register_script, we can just call the script in wp_enqueue_script() which makes everything happen. $in_footer – We want to load our script in the footer, so we have set the value to be true.$ver – This is the version number of our script.WordPress will automatically load jQuery if it is not being loaded already on the site. Since our script uses jQuery, we have added jQuery in the dependency area. Once WordPress finds that, then it will look for our filename amazing_script.js in that folder. We are using the plugins_url function to get the proper URL of our plugins folder. $src – src is the location of your script.$handle – Handle is the unique name of your script.We started by registering our script through the wp_register_script() function. Wp_register_script('my_amazing_script', plugins_url('amazing_script.js', _FILE_), array('jquery'),'1.1', true) Īdd_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ) Below is an example code that you would paste in your plugins file or in your theme’s functions.php file to properly load scripts in WordPress. Loading scripts properly in WordPress is very easy. How to Properly Enqueue Scripts in WordPress? This reduces page load time and helps avoid conflicts with other themes and plugins. This system also allow developers to utilize the built-in JavaScript libraries that come bundled with WordPress rather than loading the same third-party script multiple times. This system provides a programmable way of loading JavaScripts and CSS stylesheets.īy using wp_enqueue_script and wp_enqueue_style functions, you tell WordPress when to load a file, where to load it, and what are its dependencies. To make sure that everything works properly, and no one is stepping on another’s toes, WordPress has an enqueuing system. Thousands of people from around the world develop themes and plugins for WordPress. WordPress has a strong developer community. Why Enqueue Scripts and Styles in WordPress? That being said, let’s take a look at the right way of adding scripts and stylesheets. It is also possible that the two are different versions which can also cause conflicts. If it is loaded on every page, then this will negatively affect WordPress speed and performance. While the above code may seem easier, it is the wrong way of adding scripts in WordPress, and it leads to more conflicts in the future.įor example, if you load jQuery manually and another plugin loads jQuery through the proper method, then you have jQuery being loaded twice. Some mistakenly use the wp_head function to load their scripts and stylesheets. Many new WordPress plugins and theme developers make the mistake of directly adding their scripts or inline CSS into their plugins and themes. This will be particularly useful for those who are just starting to learn WordPress theme and plugin development.Ĭommon Mistake When Adding Scripts and Stylesheets in WordPress In this article, we will show you how to properly add JavaScripts and stylesheet in WordPress. Do you want to learn how to properly add JavaScripts and CSS stylesheets in WordPress? Many DIY users often make the mistake of directly calling their scripts and stylesheets in plugins and themes.
0 kommentar(er)
