phpwordpresstwitter-bootstrapplugins

Why does bootstrap break wordpress admin?


Consider the following plugin code for wordpress:

<?php
/**
 * Plugin Name: test
 * Description: This plugin is just a test for bootstrap css
 * Version: 1.0.0
 * Author: Gavin Simpson
 * License: GPL2
*/

class testclass
{
    private static $instance;
    public static function get_instance_advert() 
    {
        if( null == self::$instance )
        {
            self::$instance = new testclass();
        }
        return self::$instance;
    }

    private function __construct()
    {
        add_action( 'admin_enqueue_scripts', array($this,'inistyleheets'));
    }
    function inistyleheets()
    {
        wp_register_style( 'mybootstrap', plugins_url() . '/test/assets/bootstrap-3.3.5-dist/css/bootstrap.min.css');   
        wp_enqueue_style('mybootstrap');
    }
}
add_action( 'plugins_loaded', array( 'testclass', 'get_instance_advert'));
?>

When activating the above, the 'Screen Options' button in Wordpress Admin stops working.

The problem is 100% related to loading the Bootstrap css only, hence the example doesn't load bootstrap itself. In my production code, bootstrap works perfectly, it just breaks the 'Screen Options' button as described, just like the basic plugin code above.

I have tried all the basic themes, i.e. twentyfourteen, twentyfifteen& twentysixteen. No luck with any of them, all the same result.


Solution

  • Long winded solution, so will not repeat it here, but the link is https://rushfrisby.com/using-bootstrap-in-wordpress-admin-panel. (Yes, I know posting a link is not cool, but I do not want to copy and paste someone else's solution)

    The bottom line is, you need to wrap any code you might want to add Bootstrap CSS to, and the solution in the above link takes care of loading Bootstrap in a way that works very nicely.

    UPDATE The link is now a 404, so this answer is pretty useless.