Customization – Getting a jQuery Library to Work in WordPress and Avada

I’m building a custom page template that will include this jQuery multi-selector on it, but I can’t get it to work, no matter what I do.

Both the css and js files seem to be 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 Tasks.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 the Avada theme if it matters.

What could be the problem here?

Leave a Comment