From my Plugin Settings Page use check boxes to load specific css files (e.g. Bootstrap / Foundation)

Question

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 :)

Craig

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.