Posted on Friday, November 25th, 2016 No Comments
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.
Just as an extremely simple example, that might look something like this:
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.
So that might look something like this:
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.
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:
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.