Cacher is the code snippet organizer for pro developers

//* How to Properly Enqueue Styles

//* Just like scripts, you can also enqueue your stylesheets. Look at the example below:


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' );  

//* Notice that we have used wp_enqueue_scripts action hook for both styles and scripts. Despite the name, this function works for both.
In the examples above we have used plugins_url to point to the location of the script or style we wanted to enqueue. However, if you are using the enqueue scripts function in your theme, then simply use get_template_directory_uri() instead. If you are working with a child theme, then use get_stylesheet_directory_uri(). Below is an example code:


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' );  

Explanation:
We started by registering our script through the wp_register_script() function. This function accepts 5 parameters:

$handle – Handle is the unique name of your script. Ours is called “my_amazing_script”

$src – src is the location of your script. We are using the plugins_url function to get the proper URL of our plugins folder. Once WordPress finds that, then it will look for our filename amazing_script.js in that folder.

$deps – deps is for dependency. Since our script uses jQuery, we have added jQuery in the dependency area. WordPress will automatically load jQuery if it is not being loaded already on the site.

$ver – This is the version number of our script. This parameter is not required.

$in_footer – We want to load our script in the footer, so we have set the value to be true. If you want to load the script in the header, then you would say false.

After providing all the parameters in wp_register_script, we can just call the script in wp_enqueue_script() which makes everything happen.
Now some might wonder why are we going the extra step to register the script first and then enqueuing it? Well, this allows others the site owner to deregister your script if they want to without modifying the core code of your plugin.

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' );  

http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/

Why Enqueue Scripts in WordPress?

WordPress has a strong developer community. Thousands of people around the world design themes and write plugins for WordPress. To make sure that everything works properly and no one is stepping on another’s toe, WordPress has an enqueue script function. This function provides a systematic way of loading JavaScripts and styles. By using wp_enqueue_script function, you tell WordPress when to load a script, where to load it, and what are it’s dependencies.
This allows everyone to utilize the built-in JavaScript libraries that comes bundled with WordPress rather than loading the same third-party script multiple times. It also helps reduce page load time and avoid conflicts with other themes and plugins.

How to Properly Enqueue Scripts in WordPress

Loading the scripts properly in WordPress is very easy. 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.