How to include bootstrap in Wordpress plugin development?

Question

I am developing the plugin, and I would like to include bootstrap in my plugin. What is the best way to include? I couldn\'t find anything related to this, so far I have found s

Answer 1

You can use the 'wp_head' action to add code to the header of the site each time the page loads. Put something like this into your plugin:

    add_action('wp_head','head_code');

function head_code()
{

$output = '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>';    
$output .= '<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>'; 
$output .= '<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>';

echo $output;

}

Answer 2

You need to use wp_register_script() and then wp_enqueue_script() for js.

You need to use wp_register_style() and then wp_enqueue_style() for css.

See the following js example...

wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
wp_enqueue_script('prefix_bootstrap');

And now do the same for the css...

wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
wp_enqueue_style('prefix_bootstrap');

It's a good idea to place these in a reusable method in case you will be using ajax. This way, you don't need to relist every script or stylesheet within the ajax methods.

function prefix_enqueue() 
{       
    // JS
    wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
    wp_enqueue_script('prefix_bootstrap');

    // CSS
    wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
    wp_enqueue_style('prefix_bootstrap');
}

The use of the "prefix_" will help prevent conflicts and save you some trouble in the long run.

Answer 3

Use bellow code in your plugins main PHP file. "wp_print_styles" action hook includes CSS styles. "wp_print_scripts" action hook includes java script. Use these two hooks to include Bootstraps Javascript and Style sheets in the plugin.

 add_action( 'wp_print_styles', 'add_my_plugin_stylesheet' );
 function add_my_plugin_stylesheet() {
wp_register_style('mypluginstylesheet', '/wp-content/plugins/postgrid/style.css');

wp_register_style('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
wp_enqueue_style('mypluginstylesheet');
wp_enqueue_style('prefix_bootstrap');

}

add_action('wp_print_scripts','add_my_plugin_js');
function add_my_plugin_js(){
wp_register_script('prefix_bootstrap', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
wp_enqueue_script('prefix_bootstrap');

}