This is my first post on here so bare with me if something goes terribly wrong.

The wp plugin I am building requires bootstrap for the shortcodes it generates to be styled as expected when rendered in the browser.

It will also require the bootstrap js for a future update to add button dropdowns.

The necessary bootstrap.min.css is located in the main plugin directory folder and then inside the css folder, I also have the same situation with the bootstrap.min.js following the same file structure into but into the js folder.

I would like to give the option via a checkbox on the setting page to load or not load these files.

I have the check boxes set up, it is literally the PHP needed to enqueue the files if the boxes are checked.

By default I think the boxes should be checked.

Any help will be greatly appreciated :)


1 Answer 1


You will have to create a settings page on which you will have to register your settings. Unfortunately this is no easy task, but it has been very well documented on tutsplus. Once you have implemented the settings api, you can check for the options that have been set with your settings page. Depending on the values of the options that have been specified, you would then include links to the script/css files. This should be done in the footer for scripts, so use the wp_footer action for that and in the header for css, so use the wp_header action for that:

add_action( 'wp_footer', 'wpse_include_custom_scripts' );

function wpse_include_custom_scripts(){

    $scripts = get_option( 'scripts' );

    $bootstrap = $scripts['bootstrap'];

    if ( $bootstrap ) {
        // add script tag for bootstrap js


add_action('wp_head', 'wpse_include_custom_css');

function wpse_include_custom_css(){

    $scripts = get_option( 'styles' );

    $bootstrap = $scripts['bootstrap'];

    if ( $bootstrap ) {
        // add link to bootstrap css


I don't think it's necessary to exclude bootstrap on any page though, if you are using it. The footprint of the minified css and the js are only 30kB.

  • Thank you for you answer and the link you have provided to tuts looks a very interesting read! I am wondering if I should just use an if statement to detect if a file with the name bootstrap.min.css has already been enqueued or something of that nature.. Im not sure what is best at this point really. As you mention it is not a huge file and my main importance is to not overwrite there custom bootstrap styles with the defaults is my file is loading after theirs. May 21, 2015 at 16:19
  • You could also consider using the lazy load jquery pattern. plugins.jquery.com/lazyload
    – BdN3504
    May 21, 2015 at 23:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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