How to Add JavaScripts And Styles in WordPress

[easy-social-share counters=0 style="button"]

Just recently we have a code analysis for a plug-in any one of our users written. The plug-in worked well, but then the web developer wasn’t following the correct techniques on loading external JavaScript. Word Press has an enquire method to insert external scripts or styles which will help prevent plug-in situations. Because most people lead one or more plug-in on their website, it will always be best for developers to follow the best practice. In this post, we can allow you to correctly insert Java Scripts or styles in Word Press. This can be certainly helpful for people who are just starting out to study Word Press theme or plug-in development.

The Mistake

WordPress use a wp_head function that will allow you to loading everything in the head part of the website. In case you don’t have a better idea, they easily insert their scripts by using a code like that:

<?php

add_action('wp_head', 'wpb_bad_script');

function wpb_bad_script() {

echo 'jQuery goes here';

}

?>

When the above code is a simple way, this is the incorrect method of inserting scripts in WordPress. For one example, in case you loading jQuery individually or a secondplugin that as well uses jQuery loads it throughout the correct method, after that you have jQuery for being loaded more wisely. It can also be at all possible that the 2 are very different models which can often as well as cause conflicts.
Let’s check out the correct way of like that.

Why Enqueue Scripts in WordPress?

WordPress provides a powerful web developer network. Millions of people all over the world style and design themes or article writer plugins for WordPress. Make sure thatevery thing works correctly with no the first is stepping on another’s toe, WordPress has an enqueue script function. This function provides a step-by-step method of insertingJavaScripts or styles. With the use of wp_enqueue_script function, you say to WordPress when to loading a script, where do you loading it, or what exactly are it’s dependencies.
This provides almost everyone to apply the built in JavaScript libraries coming bundled with WordPress than loading the equal third-party script lots of times. It can also help to reduce pages loading time period or stay away from challenges with different themes or templates or plugins.

How to Properly Enqueue Scripts in WordPress

Loading the scripts carefully in Word Press is simple. Below is for example code which you will paste in your plug-in file folder and in your theme’s functions.php file folder to carefully loading scripts in Word Press.

<?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 set up by signing up our script through the wp_register_script( ) function . This function will accept five guidelines:
$handle – Handle is the unique name of your script. Ours is called “my_amazing_script”
$src – src is the location of your script. We are using the plugins_url function to get the proper URL of our plugins folder. Once WordPress finds that, then it will look for our filename amazing_script.js in that folder.
$deps – deps is for dependency. Since our script uses jQuery, we have added jQuery in the dependency area. WordPress will automatically load jQuery if it is not being loaded already on the site.
$ver – This is the version number of our script. This parameter is not required.
$in_footer – 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, then you would say false.
After providing all of the guidelines in wp_register_script, we can just call the script in wp_enqueue_script( ) which makes everything happen.
Right now some can be wondering so why are we going the more way to sign up the script 1st and enqueuing it? Very well, this allows others the website owner to deregister your script if you want to without adjusting the major code of your plugin.

How to Properly Enqueue Styles

In a similar way to scripts, you will also enqueue your stylesheets. Take a look at the for example below:

<?php

function wpb_adding_styles() {

wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));

wp_enqueue_script('my_stylesheet');

}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );

?>

Note that we certainly have used wp_enqueue_scripts action hook up for both of them styles or scripts Even with the name, this function works well with both of them.
In the some examples above now we have tried plugins_url to point to the area of the script and style we liked to enqueue. Having said that, when you are using the enqueue scripts function in your theme, simply using get_template_directory_uri( ) instead. If your working together with a child theme, and then using get_stylesheet_directory_uri( ). Below is for 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' );

?>

Submit a comment

Pin It on Pinterest