Adding JavaScript and Styles in WordPress

Do you wish to discover how to properly add JavaScript and CSS stylesheet in WordPress? Many DIY users make the omission of directly calling their scripts and stylesheet in plugins and themes. In this article, we will show you how to properly add JavaScript and stylesheet in WordPress.

Some Mistakes of Adding JavaScript and Styles in WordPress

The function named as wp_head helps you to load everything in the header section of the website. Add the given lines of code in your script file, and entire thing will show in the header. This is shortcut to add things but it is not the best way. You have to follow proper standard discarding the shortcuts.

<?php

add_action(‘wp_head’, ‘wpb_bad_script’);

function wpb_bad_script() {

echo ‘jQuery goes here’;

}

?>

For example, you load JQuery manually in your plugin and other developer loads the same JQuery manually. If any person has activated both of your plugins then JQuery will be loaded twice in the memory which is a waste.

If JQuery loaded differs in version, then there would be a lot of error in the plugins due to conflicts. You should know how to perfectly add JavaScript and Styles in WordPress before writing any code.

How To Get Rid of Such Mistakes – The Concept Of Enqueue Function?

WordPress developer community is a huge and strong one. There are thousands of developers developing new themes and plugins each day. 

  • This is the function responsible to properly add JavaScript and Styles in WordPress so that there is never any conflict and worthless blocking of memory.
  • It secures a proper way of loading JavaScripts and Styles. The function qp_enquque_function asks Wordless when to load those JavaScripts and Styles, where to load them and under what conditions.
  • Using these you do not have to load JQuery manually and hence, there will never be a circumstances of memory blockage due to the loading of same files repeatedly.
  • The cause for that is the fact that Enqueue function allow you use the built-in libraries that come with WordPress itself. It will also minimize the burden of slow page load time due to the absence of manual loading of JavaScripts.

Steps to properly add JavaScripts and Styles in WordPress-

1. Enqueue Scripts In WordPress

Loading scripts in WordPress is very simple. Given below is an example code that you would paste in your plugins file or in your theme’s functions.php file to perfectly load scripts in 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’ );

?>

Explanation:

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

  • $handle – It  is the unique name of your script.
  • $src – It is the location of your script. We are working with the plugins_url function for getting the proper URL of our plugins folder. Once WordPress locate that, then it will view for our filename amazing_script.js in that folder.
  • $deps – deps stands for dependency. We have added jQuery in the dependency area as our script uses jQuery. WordPress will load jQuery automatically if it is not being loaded previously on the site.
  • $ver – ver is the version number of our script. This parameter is not necessary required.
  • $in_footer – As 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, you would make it false.

After presenting all the parameters in wp_register_script, we can call the script in wp_enqueue_script() which causes everything occurs.

The final step is to use wp_enqueue_scripts action hook to literally load the script. As this is an example code, we have added that right below everything else.

If you were adding this to your theme or plugin, then you can place this action hook where the script is mainly required. This allows you to reduce or minimize the memory footprint of your plugin.

2. Enqueue Styles in WordPress

Like the scripts, you can also enqueue your stylesheet. See the example below:

<?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 wp_enqueue_script, we are using wp_enqueue_style to add our stylesheet. We have used wp_enqueue_scripts action hook for styles and scripts both. Although the name, this function works for both.
  • In the examples shown above, we have used plugins_url function to point to the location of the script or style we wanted to enqueue.
  • In case you are using the enqueue scripts function in your theme, then simply use get_template_directory_uri() instead. If you are functioning with a child theme, then use get_stylesheet_directory_uri().

Below is an example code:

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

?>

WRAPPING UP

We hope that the above article helped you to properly add JavaScript and Styles in WordPress as you can easily add the styles and JavaScript if you follow the above given steps carefully.

You can talk to our WordPress Technical Support Team, dial + 1 844 897 0441(Toll-Free). We have a team of good professional who will help  you to resolve all queries related to WordPress. So, feel free to contact as we will be pleased to help you.

Read More Useful Blogs:



Leave a Reply