customization - Getting a jQuery library to work in WordPress & Avada

I am creating a custom page template that would include this jQuery multi-selector on it, but I cannot seem to make it work no matter what I do.

Both CSS and JS files seem to get added to the theme header file but this is what I keep seeing when I paste the selector code:

My template file code:

<select id='pre-selected-options' multiple='multiple'>
    <option value='elem_1' selected>elem 1</option>
    <option value='elem_2'>elem 2</option>
    <option value='elem_3'>elem 3</option>
    <option value='elem_4' selected>elem 4</option>
    <option value='elem_100'>elem 100</option>
 </select>

My functions.php file:

function wptuts_scripts_load_cdn()
{
    wp_register_script( 'multi-select', '.multi-select.js', array(), null, false );

    wp_register_script( 'bs4', '.0.0-alpha/js/bootstrap.min.js', array(), null, false );

}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_load_cdn' );

function wptuts_styles_with_the_lot()
{
    // Register the style like this for a theme:
    wp_register_style( 'custom-style', '.css', array(), '20120208', 'all' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );

I'm using Avada theme if that matters.

What might be the problem here?

I am creating a custom page template that would include this jQuery multi-selector on it, but I cannot seem to make it work no matter what I do.

Both CSS and JS files seem to get added to the theme header file but this is what I keep seeing when I paste the selector code:

My template file code:

<select id='pre-selected-options' multiple='multiple'>
    <option value='elem_1' selected>elem 1</option>
    <option value='elem_2'>elem 2</option>
    <option value='elem_3'>elem 3</option>
    <option value='elem_4' selected>elem 4</option>
    <option value='elem_100'>elem 100</option>
 </select>

My functions.php file:

function wptuts_scripts_load_cdn()
{
    wp_register_script( 'multi-select', 'https://www.mywebsite.com/selector/js/jquery.multi-select.js', array(), null, false );

    wp_register_script( 'bs4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js', array(), null, false );

}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_load_cdn' );

function wptuts_styles_with_the_lot()
{
    // Register the style like this for a theme:
    wp_register_style( 'custom-style', 'https://www.mywebsite.com/selector/css/multi-select.css', array(), '20120208', 'all' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );

I'm using Avada theme if that matters.

What might be the problem here?

• customization
• jquery
• templates

Share Improve this question edited Sep 26, 2016 at 22:24 ignite-me asked Sep 26, 2016 at 22:02 ignite-meignite-me 12155 bronze badges 3

• Where are you initializing jQuery Multiselect? E.g.: $('#pre-selected-options').multiSelect(); I see that you're including the main library, but you need to load the JS (and specify dependencies, 'jquery' and 'multi-select' ) that attaches the Multiselect library to your select element. BTW, the 'multi-select' script should specify jquery as a dependency. – Dave Romsey Commented Sep 26, 2016 at 23:04
• I initialized Multiselect in the template file. I know it's not idea, but considering my [lack of] Javascript knowledge, this is the only option that didn't give me console errors. I tried everything, and nothing seems to be working. Can you please explain how to specify dependencies in this case? – ignite-me Commented Sep 26, 2016 at 23:14
• Take a look at the docs for wp_enqueue_script, particularly the $deps argument. Also, replace the use of wp_register_script with wp_enqueue_script and use wp_enqueue_style instead of wp_register_style. Registering a script or stylesheet does not actually enqueue it. – Dave Romsey Commented Sep 26, 2016 at 23:20

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Here's a tweaked version of the original code. get_template_directory_uri() is used instead of hard coding the URLs, the scripts and styles are enqueud rather than just being registered, and the dependencies are specified.

<?php
function wptuts_scripts_load_cdn() {
    wp_enqueue_script( 'multi-select', get_template_directory_uri() . '/selector/js/jquery.multi-select.js', array( 'jquery' ), null, false );

    // JavaScript for theme. Presumably where you'd want to initialize the multi-select element.
    //wp_enqueue_script( 'theme-scripts', get_template_directory_uri() . '/js/theme-scripts.js', array( 'jquery', 'multi-select' ), null, false );

    wp_enqueue_script( 'bs4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js', array(), null, false );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_load_cdn' );

function wptuts_styles_with_the_lot() {
    // Enqueue the style like this for a theme:
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/selector/css/multi-select.css', array(), '20120208' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );