Search code examples
wordpresstwitter-bootstrapbootstrap-select

Bootstrap/bootstrap-select issue with Wordpress plugin. (TypeError: $(...).selectpicker is not a function)

In Wordpres, I have created a plugin. I'm trying to use Bootstrap/bootstrap-select in order to create a multi-select (with checkboxes) on a custom page template, but I'm having problems. I'm not creating a new theme, but I am using a child theme. Here is what I've done:

  1. Copied page.php from the parent theme to the child and renamed it to manage-matches.php

  2. Edited the template and added

    • Template Name: manage matches
  3. Created a new page and selected this new template
  4. In the template loop content div, I call another PHP file using: This function is in managematches.php and I've
  5. I copied my header.php to the child and added the references to the bootstrap.css and the bootstrap-select.css
  6. I've done include_once 'includes/managematches.php'; in my plugin.

This function managematches() generates the html for my page and it works fine. In fact, I can create bootstrap elements so I know the bootstrap/bootstrap-select.css files are working. I've also created a .js file (managematches.js) and enqueued it and that is working. By working, I mean that standard jQuery functions and selectors work fine.

The problem is that I can't get any of the functions in bootstrap-select.js to work. I've tried putting the reference to it in a whole bunch of places, to no avail. I keep getting:

TypeError: $(...).selectpicker is not a function

The problem is described here: Bootstrap-select not working and I know my issue is that I need to make sure bootstrap-select.js is included before loading my code.

What I'm not clear on is how to do this in the wordpress enviornment. I'm close, but not where I want to be. If anyone has a suggestion on how to resolve this, I would appreciate the help.

ANSWER I enqueued the css and js in my plugin, but the functions.php would work too.

wp_enqueue_style( 'bootstrap', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

wp_enqueue_style( 'bootstrap-select', 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.min.css');

wp_enqueue_script( 'bootstrapjs', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '', true );

wp_enqueue_script( 'bootstrap-selectjs', 'http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js', array('jquery'), '', true );
Solution

  • The problem is described here: Bootstrap-select not working and I know my issue is that I need to make sure bootstrap-select.js is included before loading my code.

    What I'm not clear on is how to do this in the wordpress enviornment. I'm close, but not where I want to be. If anyone has a suggestion on how to resolve this, I would appreciate the help.

    I guess your javascript files are loaded either in the header.php or the footer.php on the main theme. Of course they can also be included in functions.php. You can inspect the source code of the generated page and check in which point is your bootstrap-select included and then search the name of the file on your theme's source code.

    How did you enqueue your managematches.js? By using wp_enqueue_script you can also declare dependecies of the enqueued script.