0

I've spent a lot of hours on this and I checked a lot of questions but nothing works. I know WordPress automatically has jQuery and jQueryUI scripts available, and I'm trying to just get a simple jQuery slider displayed on my page but it's not happening. I tried with other UI elements too but they do not show either. The site is loading and not giving any problem.

I added this to the functions.php file in my themes folder:

function my_assets() {
    wp_enqueue_script( 'jquery-ui-button', false, array( 'jquery' ));
    wp_enqueue_script( 'jquery-ui-slider', false, array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'my_assets' );

but the UI element does not get displayed. I have made no other changes, and do not know if and how to change the HTML or CSS files for my website. I am using the TwentySixteen theme if it makes a difference.

Edit: I checked out a similar question with the solution being to enqueue styles along with jQuery scripts, but it didn't work. In the solution, they add the code to a constructor, but I don't know a constructor of what. I just added my code to the bottom of the functions.php file. I tried out the given code to make sure and surely enough it didn't work.

6
  • 1
    Possible duplicate of Correct way to enqueue jquery-ui
    – kero
    Jul 25, 2017 at 15:45
  • what do you mean in "the UI element does not get displayed"? there should be some code that needs to initialize the elements for that. To see if your current snippet work you should look at the html and check that the relevant JS scripts are mentioned there. In addition you might need to enqueue the relevant CSS (do not remember if there is one, should check the jquery docs) Jul 25, 2017 at 17:29
  • what I mean is that I try to get a slider to show, but no slider actually displays. I thought the initializing code is in functions.php? If not, where is it? Where are the html files? I've checked everywhere and all I find are *.php, or *.js. Nothing else Jul 25, 2017 at 17:33
  • Salemwala, WordPress does not use HTML files. The PHP files contain any HTML as well as PHP that is used in the theme. You may need to add an initializing block, the traditional "best" way being to enqueue inline JS in functions.php, or the "less correct" but simpler way being to add it in footer.php.
    – WebElaine
    Jul 25, 2017 at 18:17
  • @WebElaine I found out you can edit HTML code through the site editor on wpadmin as well. Thanks for the input! Jul 26, 2017 at 12:57

1 Answer 1

2

Using jquery-ui widgets requires a couple of steps.

You will need to add the appropriate markup for your widget. I'll use the slider as an example. I just created a new page and added the markup below to it in the text editor in the WordPress admin:

    <div id="sample-theme-slider"></div>

You're going to have to have your initialization logic for the widget to get rendered. Each widget has different config options and syntax, so refer to the jquery-ui docs for the proper code for the widget type you're adding. Take note of any of the dependencies required for the widget.

EDIT: It appears WordPress core already has jquery-ui-core listed as a dependency for widgets when they are registered, so listing it as a script dep for JS isn't required.

This is the initialization code for the slider widget:

    $( "#sample-theme-slider" ).slider();

So you should create a JS file. I'll just stick mine in my sample-theme's js folder and call it sample-theme-slider.js. In WordPress jquery is loaded in noConflict mode - so you can't just use $ and have to type out jQuery, or add a wrapper to the code above. Taking this into account, this is what the contents of my sample-theme/sample-theme-slider.js looks like:

( function( $ ) {
    $( "#sample-theme-slider" ).slider();
} )( jQuery );

Now we need to enqueue our scripts and styles for our jquery-ui widget to work. This example will just keep it simple, and use procedural PHP, but you're welcome to implement it however you want. Let's create the skeleton of what we need to do first. I like to create methods for scripts, styles, and enqueue separately to keep things a little cleaner when I come back to them:

function sample_theme_scripts() {
    // ...
}

function sample_theme_styles() {
    // ...
}

function sample_theme_enqueue() {
    sample_theme_scripts();
    sample_theme_styles();
}

add_action( 'wp_enqueue_scripts', 'sample_theme_enqueue' );

Starting with the scripts we will need to add the js/sample-theme-slider.js file we created earlier.

You'll want to register your script handle with wp_register_script(), we will call it sample-theme-slider. It's generally a good practice to name your handle to follow suit with your theme's naming conventions, and name the file to match the handle as well. You can see the parameters listed in the developer documentation, which the order in the code you placed in the question is incorrect for wp_enqueue_script():

    function sample_theme_scripts() {
        // Your script's handle.
        $handle = 'sample-theme-slider';
        // Path to the script to enqueue.
        $src = get_theme_file_uri( "js/{$handle}.js" );
        // Required dependencies.
        $deps = array( 'jquery', 'jquery-ui-slider' );
        // Your script's version.
        $ver = '1.0.0';
        // Add the script to the footer.
        $in_footer = true;
        // Register the script handle.
        wp_register_script( $handle, $src, $deps, $ver, $in_footer );
        // Enqueue your script by handle.
        wp_enqueue_script( $handle );
    }

You'll notice that in the $deps array - I listed the dependencies required for our script to work, which is the jquery-ui-slider script. To get any additional jquery-ui widgets to work in your script, you would simply add them to the array by script handle.

Now if you visit your page, you'll see the markup is modified by jquery-ui-slider and everything is perfectly in place, except you don't actually see anything. That's because the jquery-ui theme hasn't been loaded.
WordPress doesn't include the theme by default, but you can load your own, or just pull it from a CDN.

We will take the same approach as we did in sample_theme_scripts(), and first register our stylesheet's handle with wp_register_style() then use wp_enqueue_style() on our registered handle. I usually use the CDN route since it's a benefit to have the file cached for commonly used libs, but there's good arguments for including it local as well.

When we register our style with wp_register_style(), we tell it what the path is to the file we wish to add to the page. It's basically the equivalent of linking a stylesheet in your HTML. To use a CDN like Google's we need to look up the library we want to include (jquery-ui cdn). You'll notice the links for the various version of CSS are formatted in this way:

https://ajax.googleapis.com/ajax/libs/jqueryui/X.X.X/themes/smoothness/jquery-ui.css

Where X.X.X is, is the version number. Since we are loading jquery-ui's JS from WordPress core, you will want to get the matching version number. This can easily be done by inspecting the $wp_scripts global variable in PHP. When you register a script, we can optionally specify $ver as a parameter, which WordPress core does specify for jquery-ui.

If you were to do var_dump( $wp_scripts ); in PHP you would see jquery-ui-core listed, and you will see can access the version number for the registered script of the $wp_scripts object with:

$wp_scripts->registered['jquery-ui-core']->ver

If we use this for our enqueue style method when using a CDN - we can ensure that when WordPress Core updates their dependencies, we don't have to worry about updating our version number or adding conditionals for older/newer WordPress versions (unless of course the script is removed from core). So to construct a path that works for the CDN - we just need to get that version number, so the URL for linking the stylesheet is correct:

 http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered['jquery-ui-core']->ver}/themes/smoothness/jquery-ui.css

Putting that into practice we would make our sample_theme_styles() method like this:

    function sample_theme_styles() {
        // Access the wp_scripts global to get the jquery-ui-core version used.
        global $wp_scripts;
        // Create a handle for the jquery-ui-core css.
        $handle = 'jquery-ui';
        // Path to stylesheet, based on the jquery-ui-core version used in core.
        $src = "http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered['jquery-ui-core']->ver}/themes/smoothness/{$handle}.css";
        // Required dependencies
        $deps = array();
        // Add stylesheet version.
        $ver = $wp_scripts->registered['jquery-ui-core']->ver};
        // Register the stylesheet handle.
        wp_register_style( $handle, $src, $deps, $ver );
        // Enqueue the style.
        wp_enqueue_style( 'jquery-ui' );
    }

As a last step - you probably want to add your own styles to the slider to match your theme's look and feel. I usually add the stylesheet handle 'jquery-ui' we made to my main stylesheet's array of dependencies when it's enqueued. This way I know those styles are loaded first, and my specificity for overriding isn't struggling more than necessary. I don't know how you enqueue your main style.css - but you would just want to locate that in your theme and add the dependency!

So everything together looks like this:

sample-theme/js/sample-theme-slider.js:

( function( $ ) {
    $( "#sample-theme-slider" ).slider();
} )( jQuery );

sample-theme/functions.php:

// Register and enqueue scripts.
function sample_theme_scripts() {
    // Your script's handle.
    $handle = 'sample-theme-slider';
    // Path to the script to enqueue.
    $src = get_theme_file_uri( "js/{$handle}.js" );
    // Required dependencies.
    $deps = array( 'jquery', 'jquery-ui-core', 'jquery-ui-slider' );
    // Your script's version.
    $ver = '1.0.0';
    // Add the script to the footer.
    $in_footer = true;
    // Register the script handle.
    wp_register_script( $handle, $src, $deps, $ver, $in_footer );
    // Enqueue your script by handle.
    wp_enqueue_script( $handle );
}

// Register and enqueue styles.
function sample_theme_styles() {
    // Access the wp_scripts global to get the jquery-ui-core version used.
    global $wp_scripts;
    // Create a handle for the jquery-ui-core css.
    $handle = 'jquery-ui';
    // Path to stylesheet, based on the jquery-ui-core version used in core.
    $src = "http://ajax.googleapis.com/ajax/libs/jqueryui/{$wp_scripts->registered['jquery-ui-core']->ver}/themes/smoothness/{$handle}.css";
    // Required dependencies
    $deps = array();
    // Add stylesheet version.
    $ver = $wp_scripts->registered['jquery-ui-core']->ver;
    // Register the stylesheet handle.
    wp_register_style( $handle, $src, $deps, $ver );
    // Enqueue the style.
    wp_enqueue_style( 'jquery-ui' );
    wp_enqueue_style( 'sample-theme-style', get_stylesheet_uri(), array( 'jquery-ui' ), '1.0.0' );
}

// Enqueue required scripts and styles.
function sample_theme_enqueue() {
    sample_theme_scripts();
    sample_theme_styles();
}

add_action( 'wp_enqueue_scripts', 'sample_theme_enqueue' );
4
  • Thanks a lot for the detailed and helpful answer bro. One of my biggest confusions was how WordPress will know which HTML elements to add to the page and where, and you solved that! :) Could you elaborate a bit on $src in sample_theme_styles? I don't understand how we know what to get from the CDN, or even why we need to get it. Thanks a lot Jul 26, 2017 at 13:07
  • No problem :) I updated the answer above to provide more details on loading the stylesheet from a CDN
    – Tim Elsass
    Jul 26, 2017 at 13:47
  • This is a great, detailed answer - thankyou! In case anyone else ends up here with the same problem I was having, if you're doing this in a child theme you'll need to create the $src path using something more like this: get_stylesheet_directory_uri() . "/js/{$handle}.js";
    – stringy
    Apr 25, 2021 at 8:24
  • This answer deserves more upvotes. Jul 11, 2022 at 22:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.