how to include a simple jquery file into a wordpress plugin

Question

ok this is my first time to include jQuery into wordpress and it has taken me the 2 full days trying to figure this out. No matter how many articles I read I cannot find a perfect example.

Ok so this is my plugin file... very simple.

<?php
    /*
    Plugin Name: jQuery Include Test
    Plugin URI: http://jquery.com
    description: A test to include jQuery.
    Author: blah blah
    Author URI: 
    */


// jQuery alert to pop up when the page loads.

    function pop_jquery_test() {
    $src = plugins_url('includes/jquerytest.js', __FILE__);
    wp_register_script( 'jquerytest', $src );
    wp_enqueue_script( 'jquerytest' );
    wp_enqueue_script( 'jquery' );
}
add_action('init','pop_jquery_test');

and this is the jquerytest.js file that

$j=jQuery.noConflict();

$jQuery(document).ready(function(){

 alert('hi there');
});

now the question is how do i get this to work? in the sense when i activate the plugin, it pops-up like the jquery code above says.

I guess it doesn't work because you're queuing jQuery after your own script. Try moving wp_enqueue_script('jquery') to the top. — Rutwick Gangurde
– Rutwick Gangurde, Commented Feb 17, 2012 at 4:01
You can set the variable $j to be jQuery.noConflict(), but then you should use $j instead of how you are using it currently ($jQuery), and as Rutwick Gangurde said, enqueue jQuery before your script. — Jared
– Jared, Commented Feb 17, 2012 at 4:03

mor7ifer · Accepted Answer · 2012-02-17 03:59:30Z

5

Your jQuery is wrong. what you want is jQuery(docu.... not $jQuery(docu....

You should try to make sure the components work individually before you put them together (within reason of course), it will make troubleshooting MUCH easier for you.

answered Feb 17, 2012 at 3:59

mor7ifer

8,6162 gold badges20 silver badges33 bronze badges

Add a comment |

Dipika · Accepted Answer · 2016-05-19 04:36:33Z

1

function pop_jquery_test() {
    wp_enqueue_script( 'jquery' );
    $src = plugins_url('includes/jquerytest.js', __FILE__);
    wp_register_script( 'jquerytest', $src );
    wp_enqueue_script( 'jquerytest' );
}     
add_action('init','pop_jquery_test');

and in jquerytest.js file write code and test it

 jquery(document).ready(function(){
  alert('hi there');
});

Make sure that your file path is correct otherwise jquery is not working.You can use firebug so you can check jquery is included or not in your file or path promblem. Either use $ or jquery or variable but not combine them $jquery in your code.

edited May 19, 2016 at 4:36

answered Mar 25, 2016 at 6:02

Dipika

1051 gold badge1 silver badge9 bronze badges

Please make sure that your post is properly formatted before posting

Pieter Goosen
– Pieter Goosen

2016-03-25 09:59:44 +00:00
Commented Mar 25, 2016 at 9:59

Add a comment |

Stack Exchange Network

how to include a simple jquery file into a wordpress plugin

2 Answers 2

Your Answer

Hot Network Questions

how to include a simple jquery file into a wordpress plugin

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions