Adding Bootstrap to any given web site project is simple, while implementing it completely may take more substantial effort. Before we get started, let's look at the Underscores theme a bit more.
Fundamental files
- style.css - This file serves double duty in a WordPress theme, and is automatically loaded for any activated theme.
- At the top of the file, meta data about the theme is placed within a CSS Comment.
- Beneath the theme meta data is the CSS styles for the theme.
- index.php - The default template file used when no more appropriate template is found.
- page.php - The template file for an individual Page.
- single.php - The template file for an individual Post.
Additional files
- header.php - The top-most HTML for a template file.
- sidebar.php - The default template for sidebars.
- footer.php - The bottom-most HTML for a template file.
WordPress decides what template to use by the context of the webpage a user is viewing. For example when viewing a Page, WordPress will first look for a very specifically named template for the Page being viewed, then it will fallback to less specific template name until it finds the best match.
This can be a bit daunting at first, but luckily there is a lot of great information out there about this. The process of WordPress deciding what template to use is called the Template Hierarchy. For future reference, bookmark or download this file: https://developer.wordpress.org/files/2014/10/template-hierarchy.png
Let's see how our Awesomesauce theme files work.
If we were to view an individual Post on the website, the theme files would load in the following order.
- single.php - Determined by WordPress to be the best match for the webpage being viewed.
- header.php - Loaded by single.php with the
get_header();function. - template-parts/content-single.php - Loaded by single.php with the
get_template_part( 'template-parts/content', 'single' );function. - sidebar.php - Loaded by single.php with the
get_sidebar();function. - footer.php - Loaded by single.php with the
get_footer();function.
Though this is not the most-preferred way of adding CSS to your project, it is probably the easiest. For the sake of this example, we're going to use a CDN to provide Bootstrap, and we'll include the CSS file directly in the header.php template.
- In your file editor, open
header.php - Visit the Bootstrap Getting Started page and locate the Bootstrap CDN section near the top. http://getbootstrap.com/getting-started/#download
- Copy the top two link tags to your clipboard, so that you have something that looks like this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
- In your file editor, open the
header.phpfile in our theme. - Locate the line with the following code
<?php wp_head(); ?> - Paste your code beneath that, on a new line.
- Save the file.
Refresh the page in your browser, and you might notice a slight change in font and shades of blue. Now that we have Bootstrap, let's use it in the theme.
Next, we'll use Bootstrap classes to make our sidebar work correctly.
header.php
- Open
header.phpand locate the #content div at the bottom. - Add the class
container-fluidto this div, and save the file.
index.php
- Open
index.phpand locate the #primary div near the top. - Add a new class to the #primary div named
col-sm-8. - Above that div, create a new div with the class
row. - Locate the
<?php get_sidebar(); ?>function at the bottom. - Beneath that line (above the
get_footer();line), close the .row div.
Your resulting code should look something like this:
<div class="row">
<div id="primary" class="content-area col-sm-8">
...
</div><!-- #primary -->
<?php get_sidebar(); ?>
</div><!-- closing .row -->
<?php get_footer(); ?>
sidebar.php
- Open
sidebar.phpand locate the #secondary div. - Add the class
col-sm-4to this div and save the file.
Visit http://local.wordpress.dev to see your new responsive Bootstrap sidebar. Party down.
We made a great sidebar to the site's homepage in the previous section, but we have a few more template files to apply changes to before we're done.
To make your sidebar work through your whole site, repeat the index.php section above for each of the following template files:
- archive.php - Template for Lists of post types, categories and tags.
- page.php - Template for and individual Page.
- search.php - Template loaded when showing search results.
- single.php - Template for an individual Post.