How to Add Bootstrap to Your WordPress Theme

How to Add Bootstrap to Your WordPress Theme (Without Affecting Global CSS)

If you’re a WordPress developer looking to add Bootstrap to your theme, you might wonder how to include it without affecting the entire site with global CSS. In this guide, I’ll show you how to easily add Bootstrap via the functions.php file and ensure it only applies to the pages where it’s needed.

Step 1: Adding Bootstrap via CDN to Your WordPress Theme

The first step is to include the Bootstrap CDN in your functions.php file. This will allow you to quickly integrate Bootstrap without downloading any files.

function add_theme_scripts() {
    // Add Bootstrap CSS from CDN
    wp_enqueue_style( 'bootstrap', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css' );
    
    // Add your theme's custom CSS
    wp_enqueue_style( 'style1', plugin_dir_url( __FILE__ ) . 'style1.css' );
}

add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

What this does:

  • wp_enqueue_style(): This function is used to properly include stylesheets in WordPress.
  • Bootstrap CDN URL: We're using Bootstrap 5.0.2 from a CDN, but you can swap this out for a different version or a local file.
  • Custom CSS: If you need additional custom styles for your theme, you can add them here with the wp_enqueue_style() function as shown in the code.

Step 2: Avoid Global CSS – Apply Bootstrap to Specific Pages

In some cases, you might only want to apply Bootstrap to a specific page, like your contact or about page, without affecting the entire site. Here’s how you can modify the code to ensure Bootstrap is only included where needed:

function add_page_specific_scripts() {
    // Check if it's the specific page where you want to include Bootstrap
    if ( is_page( 'contact' ) ) {  // Replace 'contact' with your desired page slug
        // Add Bootstrap CSS from CDN
        wp_enqueue_style( 'bootstrap', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css' );
        
        // Add custom CSS if needed
        wp_enqueue_style( 'style1', plugin_dir_url( __FILE__ ) . 'style1.css' );
    }
}

add_action( 'wp_enqueue_scripts', 'add_page_specific_scripts' );

Explanation:

  • is_page( 'contact' ): This checks if the current page is the specific page you want (replace 'contact' with your page slug).
  • Conditional Loading: Bootstrap and custom styles will only load on that specific page, preventing global CSS from affecting your whole site.

Video Tutorial for More Help

If you’re a visual learner, check out this tutorial video that walks you through how to add Bootstrap and other customizations to your WordPress theme:

Why You Should Use Page-Specific CSS in WordPress

Loading CSS for every page can slow down your site and cause conflicts with other styles. By ensuring that Bootstrap only loads where needed, you:

  • Improve site performance by reducing unnecessary HTTP requests.
  • Prevent conflicts with other styles or scripts.
  • Keep your site design more modular and organized.

Also Read:

If you're customizing your WordPress site, you might also like How to Create a Custom Contact Page.

If you liked this guide or have any questions, feel free to leave a comment! Don't forget to subscribe to my YouTube channel for more tutorials: SK NetKing YouTube Channel.