Integrating Bootstrap CSS and JS into our WordPress theme

This tutorial will go over how to integrate the Bootstrap framework into our WordPress theme. We will first download the Bootstrap framework from getbootstrap.com, copy the files into the correct directories, and then edit the functions.php file to add the Bootstrap files to our WordPress theme.

Please Read: Underscores.me changes files file structure every once in awhile, this means the starter theme that you downloaded is a little different than the version you see in the video and written tutorials.

Because of this, I have included a link below to download the same version that you see in the tutorials. If this is your first time building a WordPress theme, I HIGHLY recommend downloading the attached theme as your starting point. This will allow you to follow the tutorials step-by-step.

Download Starter Theme

Steps

The video above goes over the following:

  1. Download Bootstrap from getbootstrap.com
  2. Unzip Bootstrap and add the CSS, JS, and Font files to your theme in the correct directories
  3. Open your starter theme in your favorite text editor (I use Sublime Text)
  4. Delete all the unneeded/duplicate CSS styles in style.css from your starter theme. Your stylesheet should look similar to the following:
  5. Open your functions.php file
  6. Around line 91 we updated the bootstrapwp_scripts() function to include the Bootstrap CSS and JS. It should now look like the following
  7. Done! Reload the front-end and notice the differences

Notes from the Video

If you want to learn more about how the wp_enqueue_script works, go here. The WordPress codex also goes over wp_enqueue_style here.

As I mentioned in the video, this is the best way to add scripts to your WordPress theme. If you want to know why, here is a nice article that explains everything.

Feedback

What do you think of this lesson? To be honest, this was one of my first videos explaining how to do something within WordPress so I was kind of stumbling around. I hope you were still able to follow along and the written section of this lesson helped polish it off.

Do you need help understanding how something worked in this lesson or need me to explain something in further detail? No problem, please send us an email or go into the member forum and ask any questions you may have. Again, I don’t want to explain every little piece on how WordPress works. I want you to build a premium theme without digging into every little detail and getting side tracked. On that note, I would still like to know what would help you.

Talk to you soon.

  • This is way better than hacking up my

  • Guest

    Hi everybody, can someone help me out with the wp-enqueue function. When I view the page source the files are being called but my pages are not styling.

    wp_enqueue_style( ‘bootstrap-styles’, get_template_directory_uri() . ‘/css/bootstrap.min.css’, array(), ‘3.2.0’, ‘all’ );

    • You need to complete the next tutorials to add the correct markup/classes to the WordPress theme.

  • Andreas Kviby

    My sidebar is stuck on the bottom, what did I miss to get the widget working?

    • You probably missed a closing divs. Be sure to go over your code and make sure it is the same as the tutorial.

      • Andreas Kviby

        Hey, but how can I have missed a DIV, there have been no coding so far in the tutorial and I have only uploaded the template as in the tutorial.

        • Continue the tutorials and when you start adding the grid classes. It will be fixed.

  • Fonai

    Hey it’s rather nice but it would have be nice to show how to integrate jquery as well or .. is it already in ?

    • It’s included if you follow the markup and enqueue the scripts like the tutorial explains.

      • Fonai

        hey, thanks i just did it just after …

  • Dony P

    The video gone …

    • The video is displaying on my end. Can you see the written section of the tutorial? Make sure you are logged in and your account is active.

  • crewneck

    video doesn’t work. Tried loggin and out several times…

    • Seems Vimeo has had some downtime over the weekend. Everything seems to be back up and running just fine. For future reference you can find vimeo status here: http://www.vimeostatus.com/

      Please send me a screenshot of what you see if you are still not able to watch the videos.

  • John Christenbury

    I’ve run against an issue where jquery isn’t being loaded and I am getting an error in Web Inspector “Uncaught Error: Bootstrap’s JavaScript requires jQuery”. I thought that Underscores (and WP itself) loaded jquery with no additional code from our side.

    • John Christenbury

      Wait, nevermind. I got to that point in the video. Thanks! problem solved.

  • Hi Brad, The download link is not working! Can you please fix it?

  • Stéphane Najman

    Hi, I don’t understand why I get an error on my console saying that it doesn’t find the “bootstrap.min.js” and “bootstrap.min.css”.

    I did everything like the tutorial and verified many times … all looks ok, but instead of linking the files to:

    http://localhost:8888/myfirsttheme/wp-content/themes/bootstrapwp/css/bootstrap.min.css?ver=3.3.5

    it adds a directory /style.css/ like:

    http://localhost:8888/myfirsttheme/wp-content/themes/bootstrapwp/style.css/css/bootstrap.min.css?ver=3.3.5

    Any idea ? Thanks in advance.

    • Look back over your code. Notice one says get_template_directory_uri() and the other says get_stylesheet_uri(). This makes a difference. Be sure to follow the tutorials and review your code.

      Moving forward please ask your support questions in the forum. Thanks!

      • Stéphane Najman

        Oups, I’m ashamed 😉 Thanks !

  • Jatin Johny

    Correct me if I’m wrong, Isn’t Boostrap JS File require jQuery file first?
    Had it already loaded mysteriously ?

    PS: Got my answer in last 30 seconds.
    But you haven’t specified any version of jQuery.

    • You don’t need to specify a version. WP ships with a set version that works great with Bootstrap.

  • At the end of this video, should I have my front page like this? In the next lesson, your front page looks different than mine.

    • Your theme should look like the one in the video if you are following along. If you have any issues or have support questions, please ask theme in the forum.

  • Todd Burnes

    Im using bootstrap 3.3.5, following all the enqueue steps, and all my code looks the same with only the versions (‘3.3.5’) being different. Once I save the functions.php file and reload my front page, the source is telling me that the bootstrap.min.css is not linking. Is there a new or different step that I should be taking to get this linked up?

    • No, the version of Bootstrap shouldn’t matter. You will enqueue scripts the same way no matter what it is.

      What do you mean “the source is telling me that the bootstrap.min.css in not linking”? Do you mean you don’t see it in the source code? Or maybe you mean, it is there but the path is wrong?

      Either way go back over your code, you probably are just missing a forward slash or have it pointed to the wrong directory.

      If you continue to have problems, please open a topic in the support forum.

  • Admin

    Now time has come to integrate material design within WordPress 🙂

  • kulkarni

    Hi Brad

    I see some people using wp_register_style() and then wp_enqueue_style() what will be the advantage of this?

    Thanks

    • kulkarni

      Ya I just found the answer!

  • Stephen B

    The new WP uses Normalize instead of Reset. Still okay to delete all of that? There’s a bunch more in there than what Reset had. Thanks.

    • Yes, we will be using the resets that Bootstrap provides within its framework out of box.

      • Stephen B

        Looks like they both include normalize.css which is the new Reset.

  • Somiarta

    Hi why I cannot access the video? and if I open it on mozilla appear this message “You have asked Firefox to connect

    securely to player.vimeo.com, but we can’t confirm that your connection is secure.”

  • Andrew

    For whatever reason, now local host doesn’t show anything… says un local host page isn’t working. ….. what happen?
    I followed your code, line for line. 🙁

    • Are you sure you were doing it right? The way the codex says to do it should work perfectly. It has nothing to do with the underscores theme version. Enqueue scripts is always the same.

      Also you probably want to turn WP_DEBUG to true in your wp-config.php so you can see your PHP errors as you make coding mistakes.

      Please use to the support forum moving forward.

  • Day Dreamer

    Are all your tutorials free?