Bootstrap Underscores

Adding Bootstrap to Underscores

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.

Adding Bootstrap

Though this is not the 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.

1. In your file editor, open header.php
2. Visit the Bootstrap Getting Started page and locate the Bootstrap CDN section near the top. http://getbootstrap.com/getting-started/#download
3. 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">

1. In your file editor, open the header.php file in our theme.
2. Locate the line with the following code <?php wp_head(); ?>
3. Paste your code beneath that, on a new line.
4. 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.

Using Bootstrap's Grid System

Next, we'll use Bootstrap classes to make our sidebar work correctly.

header.php

1. Open header.php and locate the #content div at the bottom.
2. Add the class container-fluid to this div, so that the line reads: <div id="content" class="site-content container-fluid">
3. Save the file.

index.php

1. Open index.php and locate the #primary div near the top.
2. Add a new class to the #primary div named col-sm-8.
3. Above that div, create a new div with the class row.
4. Locate the <?php get_sidebar(); ?> function at the bottom.
5. 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

1. Open sidebar.php and locate the #secondary div.
2. Add the class col-sm-4 to this div and save the file.

Visit http://local.wordpress.dev to see your new responsive Bootstrap sidebar. Party down.

Wrap-up

We made a great sidebar on the site's homepage in the previous section, but we have a few more template files to modify 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 posts: categories, tags, and author page.
• page.php - Template for and individual Page.
• search.php - Template loaded when showing search results.
• single.php - Template for an individual Post.

Next Page >> HTML, CSS and Bootstrap