Wordpress Plugin development Call to undefined function jQuery()

Question

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

Answer 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.

Answer 2

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.

Answer 3

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'.

Answer 4

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

    }

?>