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 several bootstrap plugin, which I dont need, I need to include some js and css element from bootstrap in my plugin. I am new to bootstrap.

Also I have tried something similar like including in WP theme, but it doesn't work?

If you need more information, please ask me, I will provide you

I have tried to include something similar to WP theme in the main file, index.php this :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>                 

Answer 1

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 2

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;

}