How to Add Bootstrap to Your WordPress Theme

Posted on Friday, November 25th, 2016 No Comments


How to Add Bootstrap to Your WordPress Theme

In this post, we’ll look at how to add Bootstrap directly to your WordPress theme.

This is NOT with the use of a plugin that lets you automatically enter Bootstrap components into pages or posts. Instead, you’ll be either linking to the CDN or bundling Bootstrap with your theme, which allows you to then manually include Bootstrap components within the theme files.

 

Step 1 – Give your theme access to Bootstrap.

Bootstrap is essentially a package of CSS and Javascript files. It comes with pre-made components that are commonly used on websites, such as buttons, icons, navigation bars, and the like. In order for your WordPress theme to access these files, you simply have to connect them in one of two ways.

 

Option 1: Link to the Bootstrap CDN

In your functions.php file, you will probably already be linking to a CSS file and a JavaScript file. You’ll be enqueing your styles and scripts in separate functions, most likely.

Just as an extremely simple example, that might look something like this:

Now let’s add links to the Boostrap CDN for both the CSS and Javascript files.

You can find the latest links at Bootstrap’s Getting Started page. In this example, I’m using version 3.3.7 because that’s the current version at the time of this writing.

You will add a line for the CSS and another for the JavaScript. You will probably want to put these before your own files so that Bootstrap’s styles load first, and you can overwrite them with your own if necessary.

So that might look something like this:

 

Option 2: Bundle the files with your theme

Instead of linking to the CDN, you can bundle the files with your theme.

1. Download the whole Bootstrap zip file from the Getting Started page.

You should be able to find a CSS file called bootstrap-3.3.7.css (depending on the version you’re working with) or even bootstrap.min.css. You should also find bootstrap.js or bootstrap.min.js.

2. Copy these files into your theme.

For example, you can create a folder called CSS and put your Bootstrap CSS file in there. Put the bootstrap.js file in whatever folder you’re using for scripts. That’s usually something called /scripts/ or /js/.

For our purposes, we’ll assume that you’ve got a /css/ folder and a /js/ folder.

3. Now you’ll need to enqueue these files in your functions.php file.

We’ll use the same basic setup as in the first example, except now we’ll be pointing internally to our own folders instead of externally to a CDN.

That might look like this:

If you’ve gotten all the file names and paths correct, your theme show now be able to access the Bootstrap components.

 

Step 2 – Use Bootstrap components however you want to.

Okay, so now what do you do? How can you actually use Bootstrap stuff in your theme?

Well, it just depends on what you want to use, but here’s the concept:

  1. Choose a Bootstrap component.
  2. Decide where you want it to appear on your website.
  3. Open the PHP file in your theme that handles that part of your website, and paste in the Bootstrap code.

Too vague? Okay, let’s look at a simple example, using their grid system.

Let’s say you want to add a 3-column layout to your homepage.

First, take a look at what they offer for layouts. They show a series of examples here. They have a mid-size layout with three equal columns (responsive to screen size, and will become full-width on small screens.)

They give the code for that as:

Now, where exactly do you want these columns to go? If on your homepage, your theme might be using front-page.php or home.php or index.php. Or, if you want to use this as columns for your website’s footer, you’ll need to open footer.php.

(If you’re not sure what the WordPress theme files are used for, take a look at this chart.)

Once you’ve identified the theme file that’s being used to generate the part of the website that you want to add your Bootstrap code to, open it and paste in your Bootstrap code where you want that component to appear.

I can’t give you much more detailed information in this tutorial since I don’t know exactly what you want to do. But by following the instructions in Step 1, you will have added Bootstrap capability to your theme.

 

Note: This post originally appeared on ZenWebThemes.com, but I’ve since taken that website offline and moved some of the popular blog content over to this website.




Posted in WordPress, WordPress Theme Development.