Add Bootstrap to your WordPress site

So, you want to add a bit of Bootstrap to your WordPress site and have heard about different ways to do it.  The Bootstrap site and most tutorials tell you simply throw it in the <head> tags and you are set. For a static page that works fine but WordPress has its own way of doing things.  And although you can just add something like this inside the <head> tags:

It is better the use the WordPress functionality known as enqueuing. Bottom line is that there will be <script> and <link> tags added to your <head> section, but by using enqueue, you’ll allow WordPress to ‘know’ all the scripts that are being used and to sort them out in the right order.  If in the future you might want to add more scripts (which you probably will), it’ll be apparent that script order is very important and enqueuing will help that out.  When you enqueue scripts they are added by the wp_head() and wp_footer() functions into the <head> and <footer> sections of the page respectively.

Now to the point of this post (if you want to read all about enqueuing scripts checkout this and this and this) which is how to enqueue.  You have two choices (there are others but keeping it simple):

Download Bootstrap CSS and Bootstrap JS

Download both of them from the Bootstrap Site. A common practice is to install the CSS in a folder you name ‘css’ and the JavaScript in a folder named ‘js’ but it doesn’t matter what you name them as long as get the path to each correct in the next step. Once you have that ready, open up the functions.php file and paste this snippet in there.

Use the Bootstrap Content Delivery Network (CDN)

Get the CDN link from the Bootstrap Site. Look for where it says Bootstrap CDN and copy the urls, open your functions.php file and paste them into the code below.  .

This is how you properly add Bootstrap to your WordPress site, know go and learn Bootstrap!

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you ready for a new website?

Yes, let's start!