Using Bootstrap Switch with WordPress

I had a try with that. You’ll need Twitter Bootstrap‘s CSS file, Bootstrap Switch‘s CSS and JS files. I put all those three files in a folder called assets.

functions.php:

<?php

add_action( 'wp_head', 'rr_bootswitch_meta' );
add_action( 'wp_enqueue_scripts', 'rr_bootswitch_enqueue' );

function rr_bootswitch_meta(){
    print '<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />';
}

function rr_bootswitch_enqueue(){
    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/bootstrap.min.css' );
    wp_enqueue_style('switch-css', get_template_directory_uri() . '/assets/bootstrapSwitch.css' );
    wp_enqueue_script( 'switch-js', get_template_directory_uri() . '/assets/bootstrapSwitch.js', array( 'jquery' ) );
}

The problem:

At the end of bootstrapSwitch.js, there is this snippet:

$(function () {
  $('.switch')['bootstrapSwitch']();
});

If you’re using the jQuery bundled with WordPress, you will get an error since the jQuery is loaded in noConflict mode. You will need to change the above code to use noConclict wrappers:

jQuery(document).ready(function($){
   $('.switch')['bootstrapSwitch']();
});

I uploaded my test theme on Github, try it.