How to Properly Add JavaScripts and Styles in WordPress

In this article we will see how to properly add JavaScripts and Styles in WordPress.

There are many new WordPress developers who like to write code and develop plugins exclusively for their own websites or to sell them in various marketplaces and get a handsome return.

There are various ways of writing a code but there are only a selected ways to write code efficiently.

If you can write a code in two lines instead of ten, you are saving a lot of processing as well as memory.

If might not matter for a small and lightweight website, but for a heavy website, it could mean a lot.

If you do not write crisp code and use the available resources efficiently, you are going to create a lot of conflicts for other programs.

For example, there are various ways to load external ready-made Javascript in WordPress for your plugin.

But if you do not follow the proper standard, all the activated plugins can get jammed badly.

This article is mainly for new WordPress developers who are willing to develop WordPress themes and plugins.

Unless you code properly, your code will be unprofessional and any product you made, no matter how good the concept is, you are never going to get accepted.

So, it is better to know how to properly add JavaScripts and Styles in WordPress.

The Mistakes Of Adding JavaScript

Some of you may be aware of the fact that 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.

add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}

This is a rather shortcut to add things, but it is not the best way. You have to follow proper standard ditching the shortcuts, and that is the whole point of this illustration.

For example, you load JQuery manually in your plugin, and another developer also loads the same JQuery manually or through the proper standard. If a person has activated both of your plugins, then JQuery will be loaded twice in the memory which is a waste.

Furthermore, if JQuery loaded differs in version, then there would be a lot of glitches in the plugins due to conflicts. You need to know how to properly add JavaScripts and Styles in WordPress before writing any code.

How To Avoid Such Mistakes – The Concept Of Enqueue Function?

As you might know, WordPress developer community is a big and strong one. There literally thousands and thousands of developers developing new themes and plugins every day.

But what they are doing to make sure there is never any conflict with each other’s coding method is by enqueue script function.

This is the function responsible to properly add JavaScripts and Styles in WordPress so that there is never any conflict and unnecessary blocking of memory.

It ensures a systematic way of loading JavaScripts and Styles. The function qp_enquque_function tells Wordless when to load those JavaScripts and Styles, where to load them and especially under what conditions.

With the help of these you do not have to load JQuery and stuff like that manually and hence, there will never be a condition of memory blockage due to the loading of same files again and again.

The reason for that is the fact that Enqueue function lets you use the built-in libraries that come with WordPress itself. It will also reduce the burden of slow page load time due to the absence of manual loading of JavaScripts.

Steps to properly add JavaScripts and Styles in WordPress-

1. Enqueue Scripts In WordPress

The following lines of code load the built-in JavaScript bundle that comes with WordPress. You have to place these lines in plugins file when you are creating plugins or you have to place them in functions.php if you are creating a theme.

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Explanation Of The Code

The script is registered through the function wp_register_script() which has five different parameters.

1. $handle – It is a unique name for the script. Here it is ‘my_amazing_script’.

2. $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.

3. $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.

4. $ver – It defines the version number of the script. It is not mandatory.

5. $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.

Once everything is defined, you just call the script with wp_enqueue_script().

2. Enqueue Styles In WordPress

Just like JavaScript, you have to enqueue stylesheets. Use the following piece of code in your plugin file or functions.php file for theme creation.

function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); 

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(). Rest of the things will remain the exact same.

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

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.

If your plugin or theme is facing any glitches, you should modify the code of them with the above-mentioned lines of code, and maybe the glitches will be solved.

Always follow the standards of coding followed across the world to be on the same page with other successful developers.