How to Add JavaScripts and Styles in WordPress?


Many of the times the users makes the mistake of directly calling the scripts and adding the stylesheets in the plugins and the themes. Here it will be shown to you on how to properly add the JavaScripts and the stylesheet in WordPress of your wordpress server hosting package. This is very useful for those who have just begun to learn the WordPress theme and the plugin development.




Some Common Mistakes while Adding the Scripts and Stylesheets in WordPress


There are many wordpress plugins and themes available for the developers where they make the common mistake of adding the scripts or the inline CSS into the plugins and the themes.

There are some who mistakenly use the wp_head function for loading the scripts and the stylesheets.

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

Though this code might seem easier but one must understand that it is the wrong way of adding the scripts in the wordpress and it can lead to more conflicts the near future.

Suppose, once you load the jQuery manually and in another plugin will be loading the jQuery through the paper then the jQuery must have been loaded twice. Hence if it is loaded on each page then it can effect WordPress speed as well as performance.

It is also possible that the two versions which can cause a conflict. Here we will be showing on how the add the scripts properly.


WordPress is having a very strong developer community. Here thousands of people from across the world develop the themes as well as plugins for the WordPress. For making sure that everything is working properly and there is no one who is stepping on another's toes, here the WordPress is having an enquiring system. This type of system provides a programmable way by which one can load the JavaSripts and the CSS stylesheets.

By the usage of wp_enqueue_script and the wp_enqueue_style, you will be telling the WordPress on when to load it as well as its dependencies. Here the system will be allowing the developers in utilizing the built-in JavaScript libraries which comes bundled with the WordPress rather that being loading the third party script several times. This will help in reducing the page loading time and will help in avoiding the conflicts with themes and plugins.


Properly Enqueuing the Scripts in WordPress

Loading the scripts in WordPress is pretty simple. Here is an example code which you can paste in the plugins in the theme's function.php file for properly loading the scripts in the WordPress.


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

Properly Enqueuing the Styles in WordPress

Just like the Scripts you will be able to enqueue the styles as well. Below is is an example code:


<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>

Instead of using the wp_enqueue_script, now the wp_enqueue_style will be used for adding the stylesheets.

One must note that we have used the wp_enqueue_scripts action hook for both the styles as well as scripts. Apart from the name this function works for both.

Here plugins_url function is used to point to the location of the script or the style needed to enqueue.