How to Add Scripts and Styles in WordPress?

Custom scripts and stylesheets are inseparable part of any website. They enhance the feature and look of website and make your website outstanding. Although there are multiple ways to add style and script to your website theme, using the right way is very important. The standard and proper way to add style and scripts in WordPress is to use the enqueue method. In this article we will discuss about how to add scripts and styles in WordPress with enqueuing.

Why is it necessary to enqueue styles and scripts?

Enqueuing is the standard way of adding styles and scripts to WordPress. It prevents the plugin conflicts and allows the multiple plugins and themes to run smoothly. Here are few advantages of using enqueue system.

  1. Enqueuing allows developers to take advantage of different JavaScript libraries of WordPress without much complication.
  2. It prevents the duplicate loading of same scripts or styles.
  3. It prevents the conflicts between different plugins running on same page.
  4. Enqueuing method loads the scripts and styles faster than any other method resulting in your website becoming faster and SEO friendly.

How to Add Scripts and Styles in WordPress with enqueuing?

How to Add Scripts and Styles in WordPress?

To enqueue the script and styles we use two basic functions wp_enqueue_script() or wp_enqueue_style()

Adding Stylesheet in WordPress

Stylesheet are used to customize the look of your website. The enqueue function used to load Stylesheet is wp_enqueue_style(). Here is the basic syntax of the function:

wp_enqueue_style( $handle, $source, $dependencies, $ver, $media );

It takes 5 parameters among which first two parameters are compulsory and rests are optional. Here are the explanations of each parameter.

  • $handle is the name of the stylesheet to be loaded.
  • $source is the location of the stylesheet.
  • $dependencies refer to weather your style sheet has dependencies. If you set the dependencies then those dependencies are loaded first before your style sheet is loaded.
  • $version is the place where you can assign the version number.
  • $media defines the type of media where this style sheet will be loaded.

Example:

The default stylesheet for WordPress is style.css which is required in every WordPress theme. To enqueue the default style.css of your WordPress:

wp_enqueue_style( 'style', get_stylesheet_uri() );

Lets assume you want to load stylesheet with name my_style.css present in the ‘CSS’ folder in your root directory. Then the code looks like this.

wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/css/my_style.css',false,'1.1','all');

The final and technically more correct way of adding styles is to first register the style using wp_register_style function and then use the enqueue function. wp_register_style has similar parameters as wp_enqueue_style function. Here is the full code that you can use in the functions.php file of your theme and plugin.

function my_assets(){
                wp_register_style('my-custom-style', get_template_directory_uri() . '/css/my_style.css', false,'1.1','all');
                wp_enqueue_style(' my-custom-style ');
}
add_action('admin_enqueue_scripts', ' my_assets');

Adding Scripts in WordPress

If you want to load any JavaScript files then you should use the wp_enqueue_script function. Here is the basic syntax of the function:

wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer);

Here is the explanation of the parameters.

  • $handle is the name of the script.
  • $source defines where the scripts are to be loaded.
  • $dependencies define the dependencies of the script if there is any.
  • $version defines the version number.
  • $in_footer takes two values true or false. True allows you to place the value in the footer and false allows you to place the script in the header.
Also Read:   How to Add Bootstrap to WordPress Themes

Let’s see an example of the function.


wp_enqueue_script( 'my_script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Here is the alternative and technically more correct way for enqueing scripts. We first register script and then enqueue it. Here is the full code that you can paste in the functions.php file of your theme or plugins.


function my_assets() {
    wp_register_script('my_script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
    wp_enqueue_script( ''my_script' );
}
add_action( 'wp_enqueue_scripts', 'my_assets' );

Final thoughts

Enqueuing is a very important and useful process. It automatically performs the dependency maintenance. The files added with enqueuing are managed and modular. Enqueuing is the standard process for adding scripts and styles to your themes and plugins. If you don’t follow the rule then your themes and plugins will be considered lower standard and may be rejected by WordPress repository. So, make sure from now onward you use this method for adding styles and scripts to your work.

The following two tabs change content below.
Kantiman Bajracharya

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post