1

When you make your plugin admin pages, ie 'My Plugin Settings' page and etc. do you use bootstrap in them?

What is the convention for this and what do most in the industry use to lay out their plugin admin pages?

I am considering using it simply to use rows and columns so the layout is responsive. But maybe WordPress has its own existing classes? If thats the case I want to use that because I want to maintain standards and consistency with other plugins.

Any advice on what you use in plugins for layout and what is the standard?

*Edit: I can successfully import the BootStrap js css files but they change the whole dashboards styling - even for other pages like 'Add New Page' and other plugins settings pages. Is there any way to stop this? Other than going through the Bootstrap CSS file and removing everything related to body, etc.?

closed as primarily opinion-based by Mark Kaplun, cjbj, Dave Romsey, bueltge, Howdy_McGee Oct 10 '16 at 22:20

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

1

Wordpress has a Settings API that allows you to register and create default admin-style inputs. It also takes care of loading and saving these settings in your database. The API is fairly verbose, but its documentation covers everything you need to know about it.

If you value sticking to the WP standards/conventions, I would suggest using it instead of injecting foreign CSS (even if it is something as widely used as bootstrap) and possibly messing up unexpected parts of your admin panel.

If you need more control over the way your admin page looks, just hand-craft those few lines of CSS or copy them over from bootstrap if you feel really lazy.

0

I have manage that this way and it seems it's gonna work. I have just use again the scripts that I have used for theme to save some memory on server.

/*
 *  Bootstrap Styles and scripts
 */
wp_register_style( 'bootstrap.min', 'http://domain.cz/wp-content/themes/theme-name/css/bootstrap.min.css' );
wp_enqueue_style('bootstrap.min');
//Bootstrap Scripts
wp_register_script( 'bootstrap.min', 'http://domain.cz/wp-content/themes/theme-name/js/bootstrap.min.js' );
wp_enqueue_script('bootstrap.min');
//Google Jquery
wp_register_script( 'jquery.min', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' );
wp_enqueue_script('jquery.min');
0

I used less to wrap Bootstrap css within custom div bootstrap-wrapper:

1 - Download Bootstrap Source from the download page, and extract.

2 - Inside bootstrap-3.3.7/less/ folder, create bootstrap-wrapper.less, and add the following code:

.bootstrap-wrapper {
    @import "bootstrap.less";
}

3 - Install less: npm install -g less

4 - From terminal, compile less files to get the css file:

cd bootstrap-3.3.7/less/
lessc bootstrap-wrapper.less bootstrap-wrapper.css

5 - Copy the file to your WordPress plugin (or theme), and enqueue it:

wp_enqueue_style('csbk_bs_css', plugins_url( '/css/bootstrap-wrapper.css', __FILE__ ));

6 - Inside your plugin page:

<div class="bootstrap-wrapper">
    <button class="btn btn-primary">Click me</button>
</div>

Reference: Using Bootstrap in Wordpress Admin Panel

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