Imtiaz Rayhan

How to Add Scripts and Stylesheets in WordPress

·

Imtiaz Rayhan

WordPress provides wp_enqueue_script and wp_enqueue_style function to add Scripts and Stylesheets in a systematic way.

If you’re wondering why you should use these functions when you can simply load them in header or footer, here’s why – by adding JavaScripts that way, you increase the chance of conflicting with other scripts.

Also, If we add our script directly to header, then it will load on every page, even if we don’t need it to. That’ll cause slow page loading.

By using wp_enqueue_script function we can tell WordPress when to load a script, where to load it and what are its dependencies. We can even determine whether the scripts should load in footer or header.

How to Enqueue Scripts in WordPress

Now, let’s see how to use wp_enqueue_script to add scripts in WordPress. Check the following code.

<?php

function script_register () {

//Enqueuing scripts
 wp_enqueue_script('jquery');
 wp_enqueue_script('mycustom-js', get_template_directory_uri() . '/js/script.js', 
 array(jquery), '1.2', true);

}
//Adding scripts
 add_action ('wp_enqueue_scripts', 'script_register');

?>

Let me explain this to you. wp_enqueue_script accepts five parameters. These are –

  • $handle – This is the name of your script. You can use anything you like. But you must use something.
  • $src – The source path of your script, where it is located. Here, we used get_template_directory_uri() function to get the template directory path. Once WordPress finds that, it will look for script.js file inside the ‘js’ folder.
  • $deps – This is an array and this handles the dependency of your script.  Here, our script needs jQuery to run, this will associate our script with the jQuery library. You can use ‘false’ if you don’t want to use this parameter.
  • $ver – The version of the script. It can be a number or ‘false’ or ‘NULL’.
  • $in_footer – This determines the placement of your script. By default, value is ‘false’. If you put ‘true’, then it will load your scripts in the footer. Here, we want to load our script in the footer so we used ‘true’.

Then, We used the wp_enqueue_scripts action hook to add the script to WordPress. If you don’t know add_action() function, here the first parameter is the action and the second parameter is the function to which the action is added.

How to Enqueue Stylesheets in WordPress

Now let’s check how we can enqueue our stylesheets in WordPress using the wp_enqueue_style function. Check the following code.

<?php

function stylesheet_register () {

//Enqueueing stylesheet
  wp_enqueue_style('mystyle', get_stylesheet_uri());
  wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', 
  array('mystyle'), '1.2', 'all');

}

//Adding Stylesheet
  add_action('wp_enqueue_scripts', 'stylesheet_register');

?>

This is similar to the wp_enqueue_script function. wp_enqueue_style also accepts five parameters.

  • $handle – This is the name of your stylesheet. You can use anything you like. This is required.
  • $src – The source path of your stylesheet, where it is located. Here, we used get_stylesheet_uri() function to get the default stylesheet of our theme. We used get_template_directory_uri() function on the second one to get the template directory url.
  • $deps – This is an array and this determines whether your stylesheet is dependant on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first. Here, our second stylesheet is dependent on the default stylesheet of our theme.
  • $ver – The version of the stylesheet. It can be a number or ‘false’ or ‘NULL’.
  • $media – This determines the type of media to load this stylesheet in, you can use ‘all’, ‘screen’, ‘print’ or ‘handheld.’

Just like before, we used wp_enqueue_scripts action hook to load our stylesheet.

Notice, how we used wp_enqueue_scripts action hook for both scripts and stylesheets. Despite the name, it works for both.

How To Enqueue Stylesheets and Scripts in WordPress Admin

Adding stylesheets and scripts to WP admin pages is almost same. Only difference is the hook used. Previously, we used wp_enqueue_scripts hook. Now we will use admin_enqueue_scripts hook.

<?php

function script_register () {

 wp_enqueue_script('jquery');
 wp_enqueue_script('mycustom-js', get_template_directory_uri() . '/js/script.js', 
 array(jquery), '1.2', true);

}

add_action ('admin_enqueue_scripts', 'script_register');

?>

I hope this post helped you to understand how to add your scripts and stylesheets in WordPress. If you have any queries, let me know through comments.

In:

,