Do you want to master how to add jQuery code on WordPress? So continue reading to learn more.

Despite the fact that WordPress has been available for a while, and the addition of theme scripts and plugins has also been around for a while, there is still some confusion over which method to use. use to add scripts on WordPress.

So we will try to clarify things.

Since jQuery is the most widely used JavaScript Framework, we'll show you how to add it to a theme or a WordPress Plugin.

But before, if you have never installed WordPress discover How to install a WordPress blog in 7 steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

JQuery compatibility mode

Before we start adding scripts on WordPress, let's explore the compatibility mode of jQuery. WordPress comes with a copy of jQuery, which you can use with your code. When WordPress jQuery is loaded, it uses compatibility mode, which is a mechanism to avoid conflicts with other libraries.

Find out if he Should jQuery be removed from your themes and plugins WordPress ?

This means that you can not use the dollar sign directly as you would in other projects. When writing jQuery on WordPress, you must use jQuery instead.

Take a look at the code below to see what I mean:

/ * Normal mode * / $ ('. Hideable'). On ('click', function () {$ (this) .hide ();}) / * Compatibility mode * / jQuery ('. Hideable'). On ('click', function () {jQuery (this) .hide ();})

What you need to know is that with a few modifications, you can use the dollar sign again. Using each time "jQuery" on all your code will complicate much writing.

Check out 10 Code Editors for WordPress Developers

Just to recap, if you know jQuery, the $ sign is just an alias for jQuery (), then an alias for a function. The basic syntax is: $ (Selector) .action () :

• A dollar sign to define jQuery
• A (selector) to "find" HTML elements
• A jQuery () action to perform on these elements

If you load your script on the footer, you will be able to wrap your code in an anonymous function. Here's how to do it:

(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

If you want to add your script on the header (what you should avoid if possibleYou can wrap it in a function that runs when the document is ready.

Discover also by the way How to add easily code on WordPress without breaking your website

jQuery (document) .ready (function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})});

How to link your scripts to jQuery

Now that you can write valid jQuery code on WordPress, we will link our work to our website. In WordPress the process is called ' enqueueing "(tail system). For a normal HTML website, we should use the tagscript> to add scripts.

WordPress can do the same thing, but we will use the special features of WordPress to achieve this. In this way, WordPress manages all our dependencies for us.

If you are working on a theme, you can use the function wp_enqueue_script () within your file functions.php file. Here's how you can do it:

function my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

The function takes five arguments. The first you can use to refer to the script, the second is the location of the script file, the third parameter is an array of dependencies.

I added jQuery as a dependency because the script uses it. If you create a script that depends on "my-great-script You need to add it to the dependency list so that WordPress knows which files it needs to load first.

See also How to load JavaScript on WordPress

The fourth parameter is a version number and the fifth allows WordPress to know where to put the script. By default, scripts will be loaded in the header, which is bad practice, as it slows down the loading of your website page (browsers stop all page loading, whenever a block est rencontré). You must load all your scripts into the footer, if possible by making the fifth parameter " true ».

How to add a script to the dashboard

You can also add scripts on the dashboard. The functions used are exactly the same, you just need to use a " hook " different. Take a look at the example below:

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

Instead of using wp_enqueue_scripts we must use admin_enqueue_scripts, and that's all !

The use of conditional tags

Use conditional tags so that you only load your scripts when needed. This is most often used on the dashboard, where you would like to use a script only on a specific page. This saves bandwidth and processing time which means faster load times for your website.

Discover also our 10 WordPress plugins to improve the loading speed of your blog

Take a look at the documentation admin_enqueue_scripts in the WordPress Codex for more information.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Interactive World Maps

Interactive World Maps is a WordPress Plugin which helps you create as many maps as you want, with interactive and colored markers, continents, countries or regions.

It is fully compatible with the new version of WordPress as well as Visual Composer. Thanks to this plugin, you can display several types of regions such as: a map of the whole world, a continent or a subcontinent (Africa, Europe, Americas, Asia, Oceania and all their sub-continents), a country, a country divided by its regions, a state of the United States, the United States divided by metropolitan areas, a state of the United States divided by metropolitan areas.

Download | Demo | Web hosting

2. AJAX Contact Form with Tracking

Ce WordPress Plugin allows you to easily add contact or comment forms to your WordPress blog. It comes with a settings manager which can be directly accessed through the WordPress dashboard.

Its main features are among others: a ffor email, the support of CAPTCHA mathematics on forms, customization and configuration via the WordPress dashboard, the possibility of ddefine a custom autoresponder, support for custom CSS, and more

Download | Demo | Web hosting 

3. PayPal Standard Payment Gateway for Ninja Forms

PayPal Standard Gateway for Ninja Forms allows you to create forms that integrate seamlessly with the PayPal payment gateway. 

You will be able to create personalized order forms and receive payments using standard Paypal accounts. Its main features are: easy and fast integration, IPN integration, the ability to activate / deactivate the PayPal gateway on individual forms, support for regular payments, etc.

Download | Demo |  Web hosting

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

• How to use categories and labels effectively on WordPress
• How to create a responsive menu for mobile WordPress
• How to Create a WordPress Intranet for Your Organization
• How to install a plugin in WordPress

Conclusion

Here ! That's it for this tutorial. Hope you now know how to add script to WordPress. Feel free to share the tip with your friends on your social networks.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

...