WordPress Jquery Integration WordPress Jquery Integration wordpress wordpress

WordPress Jquery Integration


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


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.


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