CODEWITHSUNDEEP
jquerywordpress
JeVic
JeVic

Reputation: 681

WordPress Jquery Integration

I did a jquery on jsfiddle and it works fine there but when I apply it to wordpress it doesnt seem work. I am not sure what is wrong, is there a special syntax when using js on wp?

https://jsfiddle.net/f911e0yq/9/

In WordPress (no error)

in function.php

function scripts_method() {
    wp_enqueue_script( 'sizetab',  get_stylesheet_directory_uri(). '/js/my.js' , array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'scripts_method' );

in my.js file

(function ($) {
  $('#button').click(
    function() {
      $('.description_tab').removeClass('active');
      $('.additional_information_tab').removeClass('active');
      $('.reviews_tab').removeClass('active');
      $('.ux_global_tab_tab').addClass('active');
    });


})(jQuery);

Upvotes: 3

Views: 120

Answers (3)

Samvel Aleqsanyan
Samvel Aleqsanyan

Reputation: 2960

As I guessed, the issue was that your script loaded before your page content loading. So, #button tag was undefined for your code.

wp_enqueue_script() functions parameters are:

wp_enqueue_script($handle, $src, $deps, $ver, $in_footer)

$ver is the version of the script, which will be loaded (http://website.com/someScript.js?ver=1.0.0). By default, it's false. We used null, which is same in this case: not loading the script version and loading current WordPress version. $in_footer loads script into header or into footer of your page/website. By default, it's false( loading into the <header> tag ).

We used this code:

function scripts_method() {
    wp_enqueue_script( 'sizetab', get_stylesheet_directory_uri(). '/js/my.js' , array( 'jquery' ), null, true );
}
add_action( 'wp_enqueue_scripts', 'scripts_method' );

and defined there, that we want to load our script into the footer of website( after all content ) with adding null, true( don't have version and want to load into footer ).

Upvotes: 3

Xhynk
Xhynk

Reputation: 13840

There are no JavaScript errors, so you won't see anything in the console - the JavaScript code is just fine. The issue is how you enqueued your js. You need to move it to the footer, otherwise you'll need to rebind your event handlers because they don't exist when jQuery is defined.

If you look at the source docs for wp_enqueue_script(), you can see you've omitted the last two parameters, $ver and $in_footer. In order to set the in_footer variable you need a version, so you can either get fancy and use the filemtime functions or just set it to '', '1.0', or null - and then you can set $in_footer to true.

function scripts_method() {
    wp_enqueue_script( 'sizetab',  get_stylesheet_directory_uri(). '/js/my.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'scripts_method' );

It's generally considered a best practice to move all custom JavaScript files to the footer if you're able to.

Upvotes: 1

Bridget Arrington
Bridget Arrington

Reputation: 444

function scripts_method() {
wp_register_script( 'sizetab',get_stylesheet_directory_uri().'js/my.js', array( 'jquery' ), '1.0' );
wp_enqueue_script( 'sizetab' );
}

I use this code block to load custom .js files

Upvotes: 0

Related Questions