Add Bootstrap css to wordpress admin area without adding main style.css

Question

I'm creating a new custom Wordpress Theme and I'm trying to add Boostrap CSS to the admin area, but it's only working when I add style.css to the admin area as well. The Boostrap js it is getting add to the admin area but the CSS is not, how do I add Bootstrap CSS without adding the style.css to the admin area?

this is my function.php

<?php

/*
 * Function to register bootstrap css style
 */
function bootstrap_enqueue_styles() {
    wp_register_style('bootstrap', get_template_directory_uri().'/bootstrap/css/bootstrap.min.css');
}

/*
 * Function to register theme css style
 */
function main_enqueue_style(){
    $dependencies = array('bootstrap');
    wp_enqueue_style('main-css-style', get_stylesheet_uri(), $dependencies);
}

/*
 * Function to register Bootstrap javascript
 */
function bootstrap_enqueue_scripts() {
    $dependencies = array('jquery');
    wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
}

add_action( 'wp_enqueue_scripts', 'bootstrap_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'main_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'bootstrap_enqueue_scripts' );
add_action( 'admin_init', 'bootstrap_enqueue_styles' );
add_action( 'admin_init', 'bootstrap_enqueue_scripts' );
//add_action( 'admin_init', 'main_enqueue_style' ); <-- IF I DONT ADD THIS ONE IT DOESNT ADD BOOTSTRAP CSS TO THE ADMIN AREA

Answer 1

your function main_enqueue_style not only enqueues your main theme stylesheet, but it calls Bootstrap as a dependency. See: https://developer.wordpress.org/reference/functions/wp_enqueue_style/ for more info.

So in effect, you're enqueuing your primary theme stylesheet, and that's the purpose of the function. You'll need to setup a separate function to just enqueue Bootstrap only.

However, you may want to look at the admin_enqueue_scripts hook for the proper way to add a stylesheet for the admin side of things. To quote WordPress' own documentation, it is the:

"proper hook to use when enqueuing scripts and styles that are meant to be used in the administration panel. Despite the name, it is used for enqueuing both scripts and styles."

In the documentation above, you can find a few different examples of how you can properly add the bootstrap stylesheet for your admin. For example, you could create a separate function something like:

function myunique_namespace_bootstrap_enqueue() {
   wp_enqueue_style('bootstrap');
}

and then

add_action( 'admin_enqueue_scripts', 'myunique_namespace_bootstrap_enqueue' );

Answer 2

If you need to add custom stylesheet/your own styles/bootstrap css at admin side only. Try two wordpress functions wp_register_style() and wp_enqueue_style()

function wpCustomStyleSheet(){
    //first register sthe style sheet and then enqueue
    wp_register_style( 'adminCustomStyle', get_bloginfo('stylesheet_directory') . '/adminCustomStyle.css', false, '1.0.0' );
    wp_enqueue_style( 'adminCustomStyle' );
}
add_action('admin_enqueue_scripts', 'wpCustomStyleSheet');