How many times have you wanted to add JavaScript or custom CSS styles in WordPress, and you didn’t know how? Or maybe you have tried to do it, but it didn’t work properly. Well, it is not as complicated as it may sound, and if you follow our tutorial, which includes the best practices on loading JavaScript, you should not have any problems.
WordPress allows users to add external script and styles in order to prevent plugin conflicts. As many WordPress admins have more than one plugin on their website, it is a great idea to add JavaScript or styles without a plugin if you want to reduce the likelihood of generating errors and conflicts. In this article, we will show you exactly how to do it and how to respect the best practices.
A common mistake
You need to know that there is a function in WordPress, wp_head, which allows you to load anything you want in the head section of your website. You can do it very simply and add a script by using this code:
WordPress users like to use this simple way, but pay great attention because this is the wrong way of adding a script to your WordPress site. Do not do it, because you are loading jQuery manually, when another plugin will do it automatically in the proper way. It will cause conflicts.
How to use Scripts in WordPress?
As there are thousands of WordPress developers all around the world, new WordPress themes and plugins are developed every day. However, it is important to check if everything works properly, and for this, WordPress has an enqueue script function. It prevents scripts and plugins from being in conflict, and allows users to use the built-in JavaScript library in WordPress. Even more, this function reduces the page load time.
How to enqueue scripts in WordPress?
It is very easy to load a script properly in WordPress. You can use the example code below and paste it into your plugin files, in order to see if your scripts work correctly:
What does it actually mean?
Start by registering the script in the wp_register_script()function. There are 5 parameters for it:
- $handle – A unique name for a script. We called ours ‘my_script’.
- $src – This is the location of the script. We usually use the plugins_url function for a proper URL. When WordPress finds the file, it will start looking for the ‘my_script’ file in the plugin folder.
- $deps – This is for dependency.
- $ver – The version number of your script, but it is not required.
- $in_footer – You need to set this value True if you want to load the script in the footer. If you want to load it in the header, set it False.
Once you set the parameters, call the script: wp_enqueue_script().
How to enqueue styles in WordPress?
It works just like with the scripts. Use the code below:
You can use the wp_enqueue_script action for both scripts and style, despite its name. It will work for sure.
Conclusion
This is it! If you’ve never dealt with JavaScripts and Styles before, you may find it complicated, but if you follow our steps you should be able to add it properly in WordPress. Hope this guide helped you. Feel free to ask any questions in the comment section.