NB: Make sure you do a back up of your theme, files and database before attempting the tutorials
Last modified : Oct 01 2022
Estimated reading time : 1 minute, 33 seconds - 109 words
Share the post "Using the wp_enqueue_style Bootstrap Function"
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.