CODEWITHSUNDEEP
wordpresstwitter-bootstrapplugins
fefe
fefe

Reputation: 9055

wrapp twitter bootstrap in a custom wordpress plugin

I try to use bootstrap in my custom wordpress Plugin but seems to broke all admin area with the following

class MyPlugin{
 public function iniAdmin(){
        add_action('admin_menu', array($this, 'register_collections_menu_page'));
        add_action( 'admin_init', array($this,'style_bootstrap' ));
    }
    public function style_bootstrap(){
        wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true); // we need the jquery library for bootsrap js to function
        wp_enqueue_script( 'bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
        wp_enqueue_style( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
    }

}

$collections_settings = new MyPlugin();
if (is_admin()){
    $collections_settings->iniAdmin();
}

How to wrap in a propper way bootstrap style in a wordpress plugin

Upvotes: 1

Views: 1580

Answers (1)

fefe
fefe

Reputation: 9055

After a long search I found a really good tutorial on how to recompile twitter-bootstrap to use in Wordpress admin. You can find it here.

Using Bootstrap 3

Create a new .less on the same directory where your bootstrap.css is (for example wordpress-bootstrap.less) and wrap the following

.bootstrap-wrapper {
    @import (less) url( 'bootstrap.css' );
}

... after all you have to recompile your css (I used winless) and you get wordpress-bootstrap.css wrapped inside .bootstrap-wrapper.

Then, you're ready to go!

Upvotes: 6

Related Questions