0

Seriously, I lost my whole day with this... Either I completely missed the point... Or I really cannot find the proper information on the internet...

Everywhere I find they say to load jQuery in the following way, in my main file of my plugin I do the following

This is the wp_enqueue_scripts (with an S) to load the scripts

add_action('wp_enqueue_scripts', 'myplugin_load_jquery');

Then you need the function that calls for jQuery (wp_enqueue_script no S for this one).

function myplugin_load_jquery(){
    wp_enqueue_script('jquery');
};

What am I missing,

After doing that, I'm trying to use the following, and it always gives me the message "Call to undefined function jQuery()"

jQuery(document).ready(function(){
    //Do anything...
});

Can anyone finally tell me how to do that properly? In a clear manner? Or point me somewhere with proper and clear information?

Do I absolutely need to put my scripts inside a .JS file? Or I can run it from the same file?

... Working now... Doing more tests

1

You need specify jquery as a dependency of your custom script, setting the 3rd parameter of wp_enqueue_script() to array('jquery'), like this:

wp_enqueue_script(
    'yourCustomScript',
    plugins_url('js/yourCustomScript.js', __FILE__),
    array('jquery'),
    '1.0.0',
    false
);

Change the path to point to your custom-script file

As to your last question, the answer is affirmative. You need a .js file. Basically WP needs to know what scripts are loading in a page to make sure dependencies are loading first and none gets loaded twice.

Also keep in mind that your usual $() alias will not work unless you wrap your code in:

jQuery(document).ready(function($) {
    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut
});

Refference.

Here's a testing example that should work from inside a custom plugin:

jquery-test.js:

jQuery(document).ready(function($) {
    $('<a/>', {
        id: 'foo',
        href: 'https://www.google.com/webhp?q=jquery+mistakes+you+are+probably+making',
        title: 'bar',
        rel: 'external',
        text: 'jQuery\'s dead! Long live jQuery!',
        style: '' +
            'position: fixed;' +
            'top: 120px; ' +
            'left: 0; ' +
            'padding: 10px 20px; ' +
            'background-color: #369; ' +
            'color: white; ' +
            'z-index: 9999;' +
            'border-radius: 0 6px 6px 0'
        })
    .prependTo('body');
});

Put this file in your plugin's /js folder. In your plugin's main file, add this php:

add_action('wp_enqueue_scripts', 'testing_jquery');
function testing_jquery() {
    if ( ! is_admin()) 
        wp_enqueue_script(
            'testing-jquery',
            plugins_url('js/testing-jquery.js', __FILE__ ),
            ['jquery'],
            true
            );
}

Make sure it's not inside any other function or class.

If you're not adding this via a plugin, but a theme, place the testing-jquery.js file in the theme's /js folder and replace plugins_url('js/testing-jquery.js', __FILE__ ), with get_stylesheet_directory_uri() . '/js/testing-jquery.js',

This should add a blue link to a google search for common mistakes when using jQuery to every frontend page of your website.

  • Hi Andrei, Thanks a lot for your time, could you give me a really simple example that I could run and see the results. I still try everything and cannot get it to work. Maybe it's where I make my enqueue call that am wrong, or the jQuery I do in the JS file that is wrong. if I could just have a quick example, or if you have any plugins that are REALLY simple to read and I could see the result I would be more than happy – pSyToR Jan 25 '15 at 6:46
  • Updated answer with a working example. – Andrei Gheorghiu Jan 25 '15 at 9:47
  • Doing some testing now... Thanks a lot for your time Andrei – pSyToR Jan 25 '15 at 12:58
  • Even though there is no Vote Up for your answers, you have the best answer to my question, and you are the one that spent the most time. I would add in your answer, that to load the jQuery this should be at the beginning of your main file to work properly, because too deep in your files and it might not load. I load both wp_enqueue and admin_enqueue at the beginning and everything seems to be working 100% - Thanks a WHOLE freaking lot for your help Andrei – pSyToR Jan 26 '15 at 4:14
3

You don't have to specifically enqueue jQuery, as you're probably using jQuery in your custom script. You can do:

wp_enqueue_script( 'my-script', plugin_url( 'js/my-script.js', __FILE__ ), array('jquery') );

jQuery(document).ready(function($){
    //Do anything...
});

Notice the $ passed as an arg to the callback, it will make jQuery accessible to your function scope.

  • The jQuery(document).ready(function($) part is going in the JS file? Or can still be inside the PHP? I'm sorry with everything I read I'm so confused now – pSyToR Jan 24 '15 at 19:28
  • Note that it should be js/my-script.js instead of /js/my-script.js because the value returned by plugins_dir_url() already has a trailing slash. – RRikesh Jan 25 '15 at 10:29
  • @pSyToR The document ready should go into the JS file, not the PHP. – RRikesh Jan 25 '15 at 10:30
  • Andrei's answer is better than mine :) – paul Jan 25 '15 at 20:54
-1

You need to make sure jQuery has been loaded, so output your code in a late action, eg for front end you could use 'wp_print_footer_scripts' with a large priority:

add_action( 'wp_print_footer_scripts', function () {
    ?>
    <script>
    jQuery(document).ready(function(){
        //Do anything...
    });
    </script>
    <?php
}, 50 );

Similarly for admin 'admin_print_footer_scripts'.

  • 1
    Why not not add jQuery as a dependency? – RRikesh Jan 24 '15 at 13:50
  • If you've got your code in a .js file then absolutement, that's the way to do it, but if you haven't....?! – bonger Jan 24 '15 at 13:53
  • @RRikesh what do you mean? – pSyToR Jan 24 '15 at 13:54
  • @Bonger no no it's not I was wondering if I had to – pSyToR Jan 24 '15 at 13:55
  • 1
    @bonger why wouldn't you have? It's better to put things in a JS file for caching. – RRikesh Jan 24 '15 at 16:18
-3

Simply follow these steps, in my case my plugin name is awesome social icons.

   //  Step - 1
<?php
  function register_awesome_social_submenu_page()
    {
    add_submenu_page('options-general.php', 'Awesome Social', 'Awesome Social', 'manage_options', 'awesome-social', 'awesome_social_callback');
    }
  ?>
   // Step - 2
<?php
add_action('admin_menu', 'register_awesome_social_submenu_page');
?>
 // Step - 3

<?php 
function awesome_social_callback()
{
        wp_enqueue_script('jquery');
        wp_enqueue_script('jquery-form');
?>
<script>
$j=jQuery.noConflict();

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

// Do what you want :)
});
</script>

<?php

    }

?>
  • You still have to surround the jQuery script call between <script></script> I read everywhere it's not good practice? – pSyToR Jan 24 '15 at 14:26
  • There is noting wrong with practice. – Daniyal Ahmed Jan 24 '15 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.