Wordpress Javascript Widget jQuery Dependency Issue

Question

I am using a local clean install of WP 4.0 en_GB with no plugins.

I have been provided with some information to implement a JS widget into my website.

<div id="login"></div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//partners.basekit.com/embed.js"></script>

<script type="text/javascript">
  $(function() {
    $("#login").loginWidget({
      partnerRef: 0000,
    });
  });
</script>

Now my understanding is that I should use the WP jQuery library an load everything through my functions.php file.

Here's what I'm doing:

/* Enable BaseKit Scripts */
function bk_embed() {
    wp_register_script('bk-embed-script', '//partners.basekit.com/embed.js');
    wp_enqueue_script('bk-embed-script', array('jquery'), false );
}

add_action('wp_enqueue_scripts', 'bk_embed');

function bk_widget() {
?>
<script>
    $(function(){
        $("#login").loginWidget({
            partnerRef: 0000,
        });
    });
</script>
<?php
}
add_action( 'wp_footer', 'bk_widget' );

The embed.js file is loaded into the head ad WP jQuery 1.11.1 library as it should, but I keep getting two issues thrown back in the Error Console.

Error Console

Andrew Bartel · Accepted Answer · 2014-11-11 19:36:01Z

Because WordPress loads jQuery in no conflict mode, $ is not accessible as a global variable. You need to explicitly use jQuery.

jQuery(document).ready(function () {
    jQuery("#login").loginWidget({
        partnerRef: 0000,
    });
});

If, like me, you want to use $ anyway, you can pass it to the ready function.

jQuery(document).ready(function ($) {
    // you can use $ normally here now
    $("#login").loginWidget({
        partnerRef: 0000,
    });
});

Edit:

Thought it might be useful to add if you want to use a self-initializing function instead of document ready you can pass that jQuery as well.

(function($) {
    // use $ normally now
})(jQuery);

Stack Exchange Network

Wordpress Javascript Widget jQuery Dependency Issue

1 Answer 1

Your Answer

Hot Network Questions

Wordpress Javascript Widget jQuery Dependency Issue

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions