NB: Make sure you do a back up of your theme, files and database before attempting the tutorials

Using the wp_enqueue_style Bootstrap Function
Easy
Web Hosting Canada

Last modified : Oct 01 2022

Estimated reading time : 1 minute, 33 seconds - 109 words

With this tutorial we will use the Bootstrap Stylesheet in one or multiple pages of our plugin; such as Settings, sub menus, etc…

This will help avoid CSS conflicts or force other CSS styling from other WordPress plugins. Here’s a quick trick to use wp_enqueue_style in the admin_enqueue_scripts hook.

This condition only works with a page ID. So if for example you have sub-pages in your plugin, we will develop it under it:

[gridzy id=”5″]

function themeplifyenqueuebootstrap()
{
    //replace themeplify with your slug page ID
    if(($_GET['page'] == 'themeplify') || ($_GET['page'] == 'autreslugid') || ($_GET['page'] == 'encoreunautreslugid') ) {
        wp_enqueue_style('bootstrap.min', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    }
}

add_action('admin_enqueue_scripts', 'themeplifyenqueuebootstrap');

With multiple GET pages …

function themeplifyenqueuebootstrap()
{
    //replace themeplify with your slug page ID
    if(($_GET['page'] == 'themeplify') || ($_GET['page'] == 'autreslugid') || ($_GET['page'] == 'encoreunautreslugid') ) {
        wp_enqueue_style('bootstrap.min', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
    }
}

add_action('admin_enqueue_scripts', 'themeplifyenqueuebootstrap');

You can also add another function or class for the Javascripts Bootstrap by using the same conditions. You allow your plugin to have an independant Javascript and/or CSS stylesheet.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>