jQuery Script in WordPress

Question

I'm using jQuery UI slider on my WordPress page which is running on Avada theme.

I need this code block in order for my range input to work:

$(function() {
  $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 500,
    values: [ 75, 300 ],
    slide: function( event, ui ) {
      $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
    }
  });
  $( "#amount" )
    .val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
          " - $" + $( "#slider-range" ).slider( "values", 1 ) 
    );
});

But when I add it to my header.php it blocks all JavaScript on website. My slider on homepage is not working etc. So, how should I add it without making a conflict?

I've improved the indentation of your code. You should make a habit of indenting it properly as it's very, very difficult to debug when it isn't indented. — Mike Cluck, Mar 02 '16 at 18:03
Thanks, I usually keep track of that but I just pasted it in hurry now. Sorry for that. — Denin Korjenic, Mar 02 '16 at 18:05
@mevius On homepage I get TypeError: jQuery(...).slider is not a function. And my revolution slider and JavaScript in global isn't working on homepage anymore. So I guess I have to put script somewhere else but i'm not sure where or how. — Denin Korjenic, Mar 02 '16 at 18:50

score 1 · Answer 1 · answered Mar 03 '16 at 01:55

I would suggest adding the WordPress plugin Scripts n Styles. It allows you to include ad-hoc JavaScript on a global level, or page level. It will provide you greater flexibility into the future, and if you utilise something like:

window.jQuery( document ).ready( function ( $ ) {
  ...
});

Where ... contains your logic to perform on page load, you shouldn't run in to any conflicts.

score 0 · Answer 2 · answered Mar 02 '16 at 22:49

Based on your comments its sounds like some of the script's dependencies are missing. That is, the script assumes certain variables are defined when it runs, and they're not. jQuery needs to be present first, and then (at a minimum) the jQuery UI library you are using. So you need to make sure your script is only added to the page after those scripts.

You do this in PHP, with wp_enqueue_script(). This function handles the addition of your js file to the page, either in the header or (by default) the footer. One of the arguments for this function is an array of dependencies, so here you would pass 'jquery', 'jquery-ui', and 'jquery-ui-slider'. (These are the 'handles' by which WordPress registers each of those scripts -- there's a list of scripts that WP knows about on the page linked above.) As long as you specify all the dependencies correctly, the error you're currently getting should go away.

jQuery Script in WordPress

2 Answers2