How to add WordPress jQuery library to frontend

Question

I'm using below method inside WordPress admin to use jQuery library and this is working fine and I don't need to add source for jQuery library for this method.

 <script>
        jQuery(document).ready(function(){
            // works inside WordPress admin without source
        }); 
  </script>

But the same method does not work on front end WordPress form and to make it work I've to add source of library?

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
        jQuery(document).ready(function(){
          // need to add jQuery source 
        }); 
  </script>

Why do I need to add source of jQuery library for frontend? How can load WordPress JQuery library to frontend?

Kaloyan · Accepted Answer · 2015-04-26 09:40:06Z

2

It works in the admin, because there are admin scripts that have jQuery as a dependency and WordPress includes jQuery in order for those scripts to work.

You should use wp_enqueue_script() function when adding scripts (not including them in scripts tags). Notice the $deps variable of the function, if you set that to array( 'jquery' ), WordPress will include the library for you, so your script can use it.

If you scroll down the page you can see which libraries are included in WordPress and what handles are used to enqueue them.

answered Apr 26, 2015 at 9:40

Kaloyan

7,3324 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxime · Accepted Answer · 2019-03-18 10:40:26Z

2

You first need to ensure that jQuery is enqueued. it should be but just to ensure it is add the following in the header.php

<?php
function my_jq_queue() {
    wp_enqueue_script( 'jquery' );
}

add_action( 'wp_enqueue_scripts', 'my_jq_queue' );
?>

after that you can add your script as follow

<script type="text/javascript">  
jQuery(document).ready(function($) {
        // add add your function in the format $()

    });
</script>

edited Mar 18, 2019 at 10:40

Maxime

9,0595 gold badges53 silver badges54 bronze badges

answered Apr 26, 2015 at 9:43

ava.to

664 bronze badges

3 Comments

Irfan Over a year ago

I've to add this in plugin. Where do i need to add it to plugin? Is to add in main plugin file?

ava.to Over a year ago

the php function should run as a separate function in the main plugin file. you can add the javascript inline or also enqueue it with a link to the javascript file see the link http://code.tutsplus.com/articles/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins--wp-22509

Irfan Over a year ago

please check my this question stackoverflow.com/questions/29983563/…

Collectives™ on Stack Overflow

How to add WordPress jQuery library to frontend

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related