How to add Javascript and stylesheet properly on wordpress

Do you want to know how to add JavaScript and stylesheet properly on a WordPress site? In this article, we will learn how to do this. This article will be helpful for those who started WordPress theme and plugin development recently or anyone who wants to add additional JavaScript and stylesheet.

Common Mistakes when you want to add JavaScript and stylesheet to your WordPress

Many beginner WordPress theme and plugin developer do this common mistakes when they try to add JavaScript and stylesheet directly.

They do this mistake with wp_head functions too.

This code looks easy but it’s a wrong way to add script on WordPress. For this you will face struggle in future.

Suppose, you loaded a jQuery manually. On the other side, a plugin is loading the jQuery properly. It will load the jQuery twice and effects your WordPress speed.

Without this, it can conflict WordPress for two versions of the script.

So let’s check how to add script and stylesheet properly.

WordPress has a strong developer community. People from all around the world doing the job of WordPress theme and plugin development.

To identify which are working correctly and which are creating noise WordPress has a unique system. This system has a programmable way to load JavaScript and stylesheet.

By using this wp_enqueue_script and wp_enqueue_style function you order WordPress to load a file when and where. Also, it allows the developer to use built-in JavaScript library. It reduces load time and saves from conflicting your theme and plugins from other.

How to add JavaScript and stylesheet to WordPress?

It is easy to load JavaScript on WordPress. There is an example code which will help you to load scripts properly by adding to function.php files of themes or plugin.

?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:

wp_register_script() function. With this we registered our script. This function accepts 5 parameter.
$handle: handle is your javascripts unique name and this is script location “my_amazing_script”$src। src

We used plugins url function to find the correct url of plugin folder.

Deps is for dependency. When we use jQuery to our scripts it will jQuery to dependency area. WordPress will load jQuery automatically. If don’t, it already loaded before.

.$ver – is our script version

$in_footer –if we want to run a script on footer we need to set true value.

After providing all parameter at inwp_register_script we can call this script wp_enqueue_script which runs everything.

At final, we need to use wp_enqueue_scriptsaction hook to load our script. Although it’s an example, we need to use right value in every step.

If you want to add this code to your themes and plugins you can use this action hook to the proper area. It will reduce your plugins memory footprint.

Many of you getting surprised why we are registering script first then adding code in line. Well, by doing this other site owner can deregister script without modifying your core code.

Adding stylesheet properly

You can add stylesheet like the JavaScript. Check this example.

We used wp_enqueue_style replacing wp_enqueue_script to add stylesheet.

Look it. We used wp_enqueue_scripts action hook in both cases and it works in both.

In this example, we used plugin URL to point the stylesheet location

We can run this for the theme in the same way.

useget_template_directory_uri()instead. and
useget_stylesheet_directory_uri(). For child themes.

This is the example code

Hope this article will help you loading or adding JavaScript and stylesheet properly on WordPress.