0

I cannot figure out how to get this Bootstrap Switch extension to work with my WordPress installation.

When I download the example from github and run it on my local machine, the controls work perfectly. But they don't seem to be working in WordPress at all. In order to test it, I have a rewrite rule set up so that www.url.com/testing points to sandbox.php. In the same directory as sandbox.php (which is in my child theme's folder) I have placed the following files:

  1. bootstrapSwitch.css
  2. jquery.min.js
  3. bootstrapSwitch.js

This is the contents of sandbox.php:

<html>
    <head>
    </head>
    <body style="padding-top: 50px;">
        <link rel="stylesheet" href="bootstrapSwitch.css">
        <script src="jquery.min.js"></script>
        <script src="bootstrapSwitch.js"></script>
        <div class="switch" data-on="primary" data-off="info">
            <input type="checkbox" checked/>
        </div>
    </body>
</html>

And all that shows up is a single checkbox. When I open a .php file sitting in a folder on my desktop containing all of those same files, it works perfectly.

What is going on here?

Improve this question
4
  • 2
    <link rel="stylesheet" href="bootstrapSwitch.css"> should be in the <head> of the document. Why dont you wp_enqueue_script the JS and wp_enqueue_style the css?
    – RRikesh
    Commented Jun 21, 2013 at 11:36
  • 1
    Use full URLs for resources, browser likely cannot load them because of rewritten path. It's often problematic to work with PHP files directly in WP, you should be using something more native for testing (personally I have blank theme for debug and testing code snippets).
    – Rarst
    Commented Jun 21, 2013 at 12:00
  • @RRikesh etc. - sorry that I didn't make this more clear but I initially did do both of those things - I add all of the scripts/styles using wp_enqueue_script and wp_enqueue_style which works for all of my other references. I took the code snippet above from the version running locally.
    – William
    Commented Jun 21, 2013 at 12:33
  • @William When you use the wp_enqueue_script and wp_enqueue_style within the child theme does the page correctly load those resources? I would check your browser tools for errors in loading those files. Also, remember that WordPress has jQuery included, so you don't need to enqueue it again. codex.wordpress.org/Function_Reference/…
    – Rachel Baker
    Commented Jun 21, 2013 at 13:25

2 Answers 2

Reset to default
2

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.

Improve this answer
1
  • Changing those last three lines worked perfectly! Thank you very much!
    – William
    Commented Jun 23, 2013 at 23:37
2

Few things you shouldn't forget when using JS in your WordPress theme.

  1. You should use wp_enqueue_script to include scripts - you can create JS conflicts if you include them manually.
  2. You have to maintain correct urls to these files - in your sample source code you include them using relative paths. (Using relative urls isn't wrong, but you have to be sure that server will serve these files).
  3. You don't have to, but it's a good idea to place scripts in <head> section (or in page footer).

If you use wp_enqueue_script, it will take care of points 2 and 3.

And the last one: When you have problems with JS, you always can use JS console (tool in your browser) to see, what is the problem.

In your case I'm pretty sure, JS console will show that there is 404 error (file not found) when you try to get your JS files.

Improve this answer

Your Answer

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

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