How to add javascripts and styles in wordpress?

Want to learn how to properly add JavaScripts and CSS to WordPress? Many novice site-dealers often make a mistake by writing scripts and styles directly into the code of themes and plugins.

Click here : Website Designing Services UAE

In this article I will tell you how to correctly add JavaScripts and styles to WordPress, which is especially useful and you need to know for a beginner.

How to add JavaScripts and styles in WordPress?

Common Mistakes When Adding Scripts and Style Sheets in Wordpress

Many inexperienced site and plugin developers make the mistake of adding embedded CSS or scripts directly to the plugin and theme code.

Some mistakenly use the wp_head function to load their scripts and style sheets.

<?php

add_action('wp_head', 'wpb_bad_script');

function wpb_bad_script() {

echo 'jQuery goes here';

}

?>

1

<?php

add_action('wp_head', 'wpb_bad_script');

function wpb_bad_script() {

echo 'jQuery goes here';

}

?>

And although the above code may seem like a simple and concise solution - it cannot be used to add scripts, because this will lead to more conflicts.

For example, if you download the jQuery library manually, and some plug-in on your site loads it automatically, it turns out that you have two libraries loaded and they may conflict with each other. And if it loads on every page, then this will negatively affect the speed and performance of the site.

It may turn out that the libraries themselves will be different versions, which will also lead to a conflict.

Therefore, it is very important to be able to correctly add style sheets and scripts.

Why Do We Need To Load Scripts and Styles in Wordpress One at A Time

WordPress has a very large and developed community of developers. Thousands of people from all over the world are developing new themes and plugins for WordPress every day. In order for everything to work correctly and no one to step on each other's heels, WordPress introduced a system of sequential loading of Java scripts and style sheets.

Using the wp_enqueue_script and wp_enqueue_style functions , you tell WordPress when and where to upload the file, as well as relationships. This system also allows developers to use the built-in JavaScript libraries that come in the WordPress box, and not download the same third-party script several times. All this reduces page load time and helps to avoid conflicts with other themes and plugins.

How To Load Scripts In Wordpress One By One?

Uploading scripts in WordPress is very easy and simple. Below is an example of the code that you need to insert into your plugins file or into the functions.php theme file in order to properly load scripts into 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' );

?>

1

<?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 started registering our script through the wp_register_script () function, which takes 5 parameters.

$ handle is a unique script name. In our case, it is “my_amazing_script”

$ src is the location of the script. We use the plugins_url function in order to get the correct url of the plugin folder. Knowing him, WordPress will begin to search for our amazing_script.js file in the specified folder.

$ deps - i.e. compatibility. Since our script uses jQuery, we have added this library to this area. WordPress will automatically download jQuery if it is not already on the site.

$ ver is the version number of your script. This parameter is optional.

$ in_footer - if you want to load the script in the footer, then you need to register the value "true". If you want to load in the header, then “false”.

After registering all the parameters in wp_register_script , we can call the script in wp_enqueue_script ( ) , which will make everything work.

And the last thing that remains to be done is to use the activation hook wp_enqueue_scripts, which is needed to actually load the script.

Since this is sample code, we added it at the very end.

If you add it to a theme or plugin, then you can put this activation hook where the script is needed. This will allow you to reduce the memory size of your plugin.

Many may wonder: why do we first register the script, and then put it in the queue? This is done so that other site owners can unregister the script without changing the main code of your plugin.

Properly Queuing Styles in Wordpress

Like scripts, you can also queue a stylesheet. Here is an example:

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

?>

1

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

?>

To add a stylesheet instead of wp_enqueue_script we use wp_enqueue_style .

Please note that we use the wp_enqueue_scripts activation hook for both scripts and styles. Despite the name of the function, it works in both cases.

In the example above, we used the plugins_url function to specify the location of the script or style that we want to queue.

However, if you use the function of alternately loading scripts in your theme, then use get_template_directory_uri ( ) instead . If you are working with a child theme, then use get_stylesheet_directory_uri ( ) .

Here is the 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' );

?>

1

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

?>

I hope this article helped you figure out how to properly add jacvascript and styles in WordPress. You may also be interested in exploring the source code for popular WordPress plugins .

If you liked the article, do not forget to like it.

For more information visit our website Digital Marketing Services in UAE