0

I am working on a project where I need jQuery for. I added this to my functions, and the scripts are loaded in my header if I watch my page source, but jQuery doesn't work. What am I doing wrong?

function stn_script_enqueuer() {

    wp_register_script( 'ajax-vote', get_template_directory_uri() . '/js/ajax-vote.js', array('jquery') );


    $nonce = wp_create_nonce("vote_nonce");
    $stn_vote_data = array(
        'ajaxurl' => admin_url( 'admin-ajax.php'),
        'nonce' => $nonce,
    );
    wp_localize_script( 'ajax-vote', 'stn_vote', $stn_vote_data );


    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'ajax-vote' );

}
add_action( 'init', 'stn_script_enqueuer' );
  • 3
    First of all, you shouldn't hook your function to init but to wp_enqueue_scripts (or admin_enqueue_scripts for the backend). What exactly do you mean by "jQuery doesn't work"? We'll need more information than this to help you. – engelen Apr 8 '14 at 8:03
  • Do I need to hook everything in that hook? Or only the wp_enqueue_script() functions. jQuery doesn't, the code in my included jQuery file does not do his job. – Robbert Apr 8 '14 at 8:13
  • I would venture to guess that HamzStramGram's notion that NoConflict mode messes with a (pasted?) script is correct. Nonetheless, including (a part of) the non-functional JS would confirm said notion. – Johannes Pille Apr 8 '14 at 9:02
  • It is not a pasted script. I have searched for days for examples and in the codex to find out. – Robbert Apr 8 '14 at 9:05
2

Scripts and stylesheets should always be loaded in the head or in the footer via the wp_enqueue_scripts action hook. wp_enqueue_scripts is the proper hook to use when enqueuing items that are meant to appear on the front end

The init hook executes before wp_head which is to early for script to load in the header. The wp_enqueue_scripts action hook is executed right after wp_head, allowing scripts and styles to be loaded properly. This also have the benefit of naming script dependencies and ordering scripts and styles to load properly

2

You should first load your scripts with a hook on wp_enqueue_scripts like this for example :

add_action( 'wp_enqueue_scripts', 'load_my_scripts' );
function load_my_scripts() {
    wp_enqueue_script( 'jquery' );
}

What I like to do is, register my script with a hook on init and then enqueue them with a hook on wp_enqueue_scripts:

// Register Scripts
add_action('init', 'my_register_scripts');
function my_register_scripts() {
    wp_register_script( 'myscript', get_template_directory_uri() . '/js/my.js', array('jquery'));
}

//Enqueue Scripts
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_enqueue_script('myscript');
}

Then, there's something important to remember: Wordpress will load the jQuery in No Conflict mode, it means that you will have to code your jQuery dependant scripts correctly according this.

Example :

jQuery(document).ready(function() {
    /* if you add some code here, you will have to use "jQuery" as a selector */

    jQuery(".mydiv").css('background-color', 'red');
});

Or, you can add "$" as an argument to function() to use the default selector.

jQuery(document).ready(function($) {
    /* if you add some code here, you will have to use "$" as a selector */

    $(".mydiv").css('background-color', 'red');
});

Hope it will help, if not, please detail more your issue.

  • Do you mean wp_enqueue_script() of wp_enqueue_scripts() and do I need to add the register and localize functions also in this hook, or let them outside? – Robbert Apr 8 '14 at 8:21
  • * wp_enqueue_script() or wp_enqueue_scripts() – Robbert Apr 8 '14 at 8:30
  • I meant hook on 'wp_enqueue_scripts' and using the function wp_enqueue_script() - see codex codex.wordpress.org/Function_Reference/wp_enqueue_script – HamzStramGram Apr 8 '14 at 8:30
  • In your second code block, you meant to use wp_register_script(), I assume? – Johannes Pille Apr 8 '14 at 9:05
  • first block : register, second one enqueue. I'm sorry, really sleepy today... I edited the post. – HamzStramGram Apr 8 '14 at 9:20

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.