How to Add JavaScripts and Styles in WordPress


When you are creating a Theme or Plugin, you may want to add stylesheet and scripts files so that you can easily customize your theme or plugin. To work everything harmoniously, it is important that styles and scripts load using the standard method of WordPress. It will increase your site performance. To load the scripts and styles efficiently, we should enqueue files by creating a function and then use a hook to call your scripts and styles.

When we enqueueing files, WordPress creates a handle or path to find your file and then use a hook to load your styles and scripts. Many developers make the mistake by directly adding a script or inline CSS into their plugins or themes. This makes your theme or plugin more complicated and also reduce website speed and performance.
 

What is Enqueueing?

Enqueueing is basically, a way to load scripts and styles of a theme or plugin by the best method of WordPress. You are using a number of plugins on your website. If each plugin is related to the assets separately, then it will take more time to load the asset which in turn affects your website performance.

By enqueueing, WordPress takes care of the assets and load them in best manner when needed. This system provides a programmable way to load scripts and styles.
 

Common Mistake

WordPress use wp_head() function and wp_head hook to load the styles and scripts. This function and hook allow you load anything from the head section of the website. This the one of the way to load scripts and styles in WordPress. Let show you the code for this:
 

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

 
This is the wrong way to load your assets and there will be more chances of conflicts. It will reduce the page or website speed. In this article, we will show how we can enqueue Scripts and Styles in WordPress.
 

Enqueue Scripts in WordPress

Thousands of people all around the world design themes and plugins for WordPress. To ensure everything works properly, the scripts should not conflicts and work independently. WordPress allows you to enqueue the scripts files by using wp_enqueue_script() function. It will load the scripts in the best manner. So increase page speed and performance. Paste the following code into the plugin file or theme’s functions.php file:
 

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

 
Let me define each function:

$handle – This is the unique name of the script. Here it is ‘my_amazing_script‘.

$src – It defines the location of your script. The plugins_url() function defines the location and then WordPress look for filename ‘amazing_script.js‘.

$deps – It refers to dependency. Here it is jquery. So we will define it in dependency area.

$ver – It defines the version of the script. This is an optional function.

$in_footer – If you want to load the script in the footer , then set the value to ‘true‘ and if want to load the script in the header, then set the value to ‘false‘.

The wp_register_script() function will load the script wp_enqueue_script().
 

Enqueue Styles in WordPress

Similarly, we can enqueue styles in WordPress. Paste the following code into the plugin’s file or functions.php file:
 

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

 
Here we use wp_enqueue_style function instead of wp_enqueue_script to load the stylesheet.

The plugins_url function is used to point to the location of script or styles.

However, if you are using the enqueue scripts function in your theme, then use get_template_directory_uri() function to load styles/scripts in your theme. If you are using a child-theme, then use get_stylesheet_directory_uri() function to load your styles/scripts.

Let me Show you an example:
 

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

We hope this article will be useful for you.

You can check how we can Turn Off PHP Errors in WordPress.

Spread the love

Kapil Garg

Kapil Garg has 7 years of experience in building professional websites. He is a leading web developer, web designer and Google adwords certified partner. His passion is to designed and developed most impressive websites.

Leave a Reply

Your email address will not be published. Required fields are marked *