There are many new WordPress users who like to write code and improve the functionality, features, and design of their own site. But they often make the mistake to add JavaScript and Styles in WordPress. Since it can create a lot of conflicts, WordPress has an enqueuing system for adding local/remote scripts. As most users run WordPress with a theme and several plugins, developers also advise using the correct method of loading scripts into WordPress.
In this article, we will show you how to add JavaScript and styles in WordPress. This article is more suitable for developers or WordPress users who wish to enhance existing knowledge. One can easily include required files with those get-it-done approaches and make things work. So, let’s dive into it.
The Mistakes of Adding JavaScripts and Styles in WordPress:
The first thing you need to know is, don’t add JavaScripts and Styles directly to your theme’s header.php file. WordPress has a function called wp_head that helps you to load anything in the header section of the website. All you need to do is to add the following lines of code in your script file, and anything and everything will appear in the header.
<?php
add_action('wp_head', 'wpattire_bad-script');
function wpattire_bad_script() {
echo 'JavaScript goes here';
}
?>
Though, it is not the best way to add scripts in WordPress. In case you load jQuery manually along with another plugin that already uses jQuery, it will be loaded twice, resulting in JavaScript errors.
Another common mistake that plugin and theme developers make is that they load their own, custom version of jQuery which is not recommended. WordPress comes packaged with its own version of jQuery which should be used. Assuming that other plugins will use this jQuery distributed with WordPress, loading a different, custom version will only result in problems.
What Is Enqueueing and Reasons to Enqueuing in WordPress?
Enqueuing is a CMS-friendly, programmable way of loading JavaScripts and CSS stylesheets. The enqueuing helps the user to have full control over their resources in a way that they can choose from where and when to load the resource files on the site and what.
You can even specify the dependencies of your scripts and styles by enqueuing and WordPress will add them in the correct order. 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.
This system also allows developers to utilize the built-in JavaScript libraries that come bundled with WordPress rather than loading the same third-party script multiple times. This reduces page load time and helps avoid conflicts with other themes and plugins. It also ensures that duplicate handles are not loaded twice.
Add JavaScript in WorPress:
It is not a very tough task to enqueue the scripts in WordPress. Just paste the below example code in your plugins file or in your theme’s functions.php file to properly load the scripts in WordPress.
<?php
function wpattire_add_scripts() {
wp_register_script('your_custom_script', './js/custom_script.js', array('jquery'),'1.0', true);
wp_enqueue_script('your_custom_script');
}
add_action( 'wp_enqueue_scripts', 'wpattire_add_scripts' );
?>
Explanation:
Let’s go through the code quickly. The procedure started by simply registering the script with the help of the wp_register_script() function. This particular function is well known to accept the following five parameters. Only the first is mandatory, and it has to be unique.
- $handle – It is a unique name for the script.
- $src – It defines the location of your script. The library function plugins_url fetches the proper URL of your plugin folder. Once it is fetched, it will start looking for amazing_script.js file inside it.
- $deps – It defines dependency. You need to add it when you are asking WordPress to load library script like Jquery. If the scripts are already loaded in the memory, it won’t be loaded again, and new loading will take place. This ensures no conflict, no memory blockage and no waste of time.
- $ver – It defines the version number of the script. It is not mandatory.
- $in_footer – It is used to load the script in the footer. If you want to load the script in the header, you should keep it to false.
The wp_enqueue_script actually enqueues the script file in WordPress. There is a main difference between wp_register_script and wp_enqueue_script. That is, in case, one script is enqueued more than once in different locations on your site, WordPress will only load that script once on the site.
Also, if the above example script is being used as a dependency of some other script, WordPress will only load the example script if that other script is loaded first. The final step is to include the whole function to wp_enqueue_scripts action hook for WordPress to load the script on the site.
Add Styles in WorPress:
Similar to scripts, one can easily enqueue stylesheets. Just instead of using wp_register_script and wp_enqueue_script, WordPress uses wp_register_style and wp_enqueue_style to load and enqueue the CSS files.
<?php
function wpattire_add_styles() {
wp_register_style('your_custom_style', 'plugins_url('your-custom-style.css', __FILE__));
wp_enqueue_style('your_custom_style');
}
add_action( 'wp_enqueue_scripts', 'wpattire_add_style' );
?>
The above codes are suitable while you are creating a plugin. When you are creating a theme, you have to change plugins_url() to get_template_directory_uri(). The rest of the things will remain the exact same.
<?php
function wpattire_add_scripts() {
wp_register_script('your_custom_style', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('your_custom_style');
}
add_action( 'wp_enqueue_scripts', 'wpattire_add_style' );
?>
If you are creating a child theme, then you have to use get_stylesheet_direcroy_uri() instead of get_template_directory_uri(). This is the standard way to properly add JavaScripts and Styles in WordPress. Always follow the standards of coding followed across the world to be on the same page with other successful developers.
That’s all. We hope you will find this post helpful to learn how to add javascript and styles in WordPress. To get more helpful articles like How to Enable HTTPS and How to Track User Activity, don’t forget to check our WordPress Tips section. You can also check our WPDM Blog page.
There are many new WordPress users who like to write code and improve the functionality, features, and design of their own site. But they often make the mistake to add JavaScript and Styles in WordPress. Since it can create a lot of conflicts, WordPress has an enqueuing system for adding local/remote scripts. As most users run WordPress with a theme and several plugins, developers also advise using the correct method of loading scripts into WordPress.
In this article, we will show you how to add JavaScript and styles in WordPress. This article is more suitable for developers or WordPress users who wish to enhance existing knowledge. One can easily include required files with those get-it-done approaches and make things work. So, let’s dive into it.
The Mistakes of Adding JavaScripts and Styles in WordPress:
The first thing you need to know is, don’t add JavaScripts and Styles directly to your theme’s header.php file. WordPress has a function called wp_head that helps you to load anything in the header section of the website. All you need to do is to add the following lines of code in your script file, and anything and everything will appear in the header.
Though, it is not the best way to add scripts in WordPress. In case you load jQuery manually along with another plugin that already uses jQuery, it will be loaded twice, resulting in JavaScript errors.
Another common mistake that plugin and theme developers make is that they load their own, custom version of jQuery which is not recommended. WordPress comes packaged with its own version of jQuery which should be used. Assuming that other plugins will use this jQuery distributed with WordPress, loading a different, custom version will only result in problems.
What Is Enqueueing and Reasons to Enqueuing in WordPress?
Enqueuing is a CMS-friendly, programmable way of loading JavaScripts and CSS stylesheets. The enqueuing helps the user to have full control over their resources in a way that they can choose from where and when to load the resource files on the site and what.
You can even specify the dependencies of your scripts and styles by enqueuing and WordPress will add them in the correct order. 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.
This system also allows developers to utilize the built-in JavaScript libraries that come bundled with WordPress rather than loading the same third-party script multiple times. This reduces page load time and helps avoid conflicts with other themes and plugins. It also ensures that duplicate handles are not loaded twice.
Add JavaScript in WorPress:
It is not a very tough task to enqueue the scripts in WordPress. Just paste the below example code in your plugins file or in your theme’s functions.php file to properly load the scripts in WordPress.
Explanation:
Let’s go through the code quickly. The procedure started by simply registering the script with the help of the wp_register_script() function. This particular function is well known to accept the following five parameters. Only the first is mandatory, and it has to be unique.
The wp_enqueue_script actually enqueues the script file in WordPress. There is a main difference between wp_register_script and wp_enqueue_script. That is, in case, one script is enqueued more than once in different locations on your site, WordPress will only load that script once on the site.
Also, if the above example script is being used as a dependency of some other script, WordPress will only load the example script if that other script is loaded first. The final step is to include the whole function to wp_enqueue_scripts action hook for WordPress to load the script on the site.
Add Styles in WorPress:
Similar to scripts, one can easily enqueue stylesheets. Just instead of using wp_register_script and wp_enqueue_script, WordPress uses wp_register_style and wp_enqueue_style to load and enqueue the CSS files.
The above codes are suitable while you are creating a plugin. When you are creating a theme, you have to change plugins_url() to get_template_directory_uri(). The rest of the things will remain the exact same.
If you are creating a child theme, then you have to use get_stylesheet_direcroy_uri() instead of get_template_directory_uri(). This is the standard way to properly add JavaScripts and Styles in WordPress. Always follow the standards of coding followed across the world to be on the same page with other successful developers.
That’s all. We hope you will find this post helpful to learn how to add javascript and styles in WordPress. To get more helpful articles like How to Enable HTTPS and How to Track User Activity, don’t forget to check our WordPress Tips section. You can also check our WPDM Blog page.
Sidratul Sohrat