Creating a Bootstrap WordPress Theme (Part 4) – Layout: Pages, Posts & Sidebar

In this tutorial, we’ll show you how to use Bootstrap to create a sticky footer that sticks to the bottom of the screen, even when there is very little content on the page.

This is part 4 in the How to Create a Bootstrap WordPress Theme series.

• Part 1 – Loading Bootstrap & Font Awesome CSS & javascript
• Part 2 – Using Bootstrap dropdowns for your WordPress navigation
• Part 3 – Using Bootstrap to create a sticky footer
• Part 4 – Bootstrapped Layout: Pages, posts & sidebar
• Part 5 – Bootstrap search form & search results pages
• Part 6 – Bootstrap comments section

SEE ALSO: Premium WordPress Bootstrap Themes for 2016

We’ve chosen a 2:1 ratio for the width of the main content vs. sidebar. We’re using classes of col-md-8 & col-md-4, respectively. You could use any combination that add up to 12. You could also add additional classes for larger and/or smaller screens (.col-sm- and .col-lg-), but to keep things simple, we’re just focusing on medium-sized screens for now. No worries, as the site is still responsive on all screen sizes, both large & small.

Bootstrap Static Page Layout

For static pages, the layout we’re using is very basic. Our main focus is on content, with no featured images being used. We’re using the full width of the page (12 columns) to display the title, and 8 columns for the content, leaving 4 columns for the sidebar. Be sure to include a <div class="container"> as the main parent, and a <div class="row"> within the container. Then we start our column layout.

If no content is found on that page, we’ll display a search form. Although, realistically, this should not occur. It’s just there as a fail safe.

The following code is in our page.php template file:

<div class="container" id="main">
	<div class="row">

	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

	<h1 class="col-md-12 page-title"><?php the_title(); ?></h1>

	<article class="page col-md-8" id="post-<?php the_ID(); ?>">
		<div class="entry">
			<?php the_content(); ?>
		</div>
	</article>
	<?php endwhile; else: ?>
	<article class="page col-md-8 not-found">
		<div class="entry">
			<p class="lead"><?php _e('Sorry, this page does not exist. Try searching for one.'); ?></p>
			<?php get_search_form(); ?>
		</div>
	</article>
	<?php endif; ?>

	<?php get_sidebar(); ?>

	</div> <!-- .row -->
</div> <!-- .container -->

Bootstrap Sidebar Layout

Since we’re using 8 columns for the main content (on both pages & posts), we’ll use 4 columns for the sidebar. We’ve decided to put the sidebar in a small Bootstrap well, but you could leave this out entirely, use the default-sized well (remove .well-sm), or a a larger well (.well-lg).

The code below uses a widgetized area called “sidebar_global_widget”. You could add additional widgetized areas, or add your own custom code. If you are going to distribute the theme, it’s a good idea to use a fallback in case there are no widgets in the “sidebar_global_widget” area.

The following code is in our sidebar.php template file:

<div class="col-md-4">

	<div id="sidebar" role="complementary">

		<?php if (is_active_sidebar('sidebar_global_widget')) {
			dynamic_sidebar('sidebar_global_widget'); } ?>

	</div>

</div> <!-- .col-md-4 -->

Bootstrap Post Layout

Our single post layout will utilize quite a few Bootstrap elements, along with icons from Font Awesome. We’ll put the title, featured image, publish date, updated date, comments link, categories & tags in a Bootstrap jumbotron.

After including the post meta information in the jumbotron, our main content appears much like that of our page.php layout. The main difference is our use of Bootstrap’s pager pagination to display previous & next post links.

[adrotate group=”8″]

Jumbotron Displaying Post Meta Info

We split our jumbotron into 2 columns: the first one is for text (.col-md-8), the second for the featured image (.col-md-4). Utilize .list-inline to display elements next to each other, with no styling. You’ll also notice the <i class="icon-"> which calls in icons from Font Awesome.

Before you start the loop, add the following code to the top of your single.php file. This will save the publish date & updated date for use later on. If the modified date DOES NOT equal the publish date, we’ll display the date the post was modified.

$date_published = get_the_date();
$date_modified = get_the_modified_date();

You’ll also want to either remove the fallback image (if a featured image is not chosen), or replace it with one of your own.

Start your loop, and then place the following code in your single.php file, inside the loop:

<div class="jumbotron">
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<h1 class="page-title"><?php the_title(); ?></h1>
				<ul class="list-inline post-meta">
					<li><i class="icon-calendar"></i> <?php the_date(); ?></li>
					<?php if ( $date_published != $date_modified ) { ?>
					<li><i class="icon-time"></i> Updated: <?php echo human_time_diff( get_the_modified_date('U'), current_time('timestamp') ) . ' ago'; ?></li>
					<?php } // end if ?>
					<li><i class="icon-comments"></i> <?php comments_popup_link('No Comments', '1 Comment', '% Comments', 'comments-link', ''); ?></li>
				</ul>
				<p><i class="icon-folder-open"></i> <?php the_category(', '); ?></p>
				<?php if ( has_tag() ) { // Check if post has any tags ?>
				<p><i class="icon-tags"></i> <?php the_tags('', ', '); ?></p>
				<?php } // end if ?>
			</div> <!-- .col-md-8 -->
			<div class="col-md-4 img-featured">
			<?php // Insert featured image
				if (has_post_thumbnail()) {
					echo get_the_post_thumbnail($post->ID, 'large', array('class' => 'img-responsive', 'title' => ''));
				} else { // Use a fallback ?>
					<img class="thumbnail" src="http://placehold.it/750x500" alt="Image coming soon" />
				<?php } ?>
			</div> <!-- .col-md-4 -->
		</div> <!-- .row -->
	</div> <!-- .container -->
</div> <!-- .jumbotron -->

Post Content

After the jumbotron, we’re using the 2:1 ratio again, and displaying the content in a .col-md-8. We’ll add Bootstrap’s .pager to the end of the content, displaying previous & next post links, along with chevron icons from Font Awesome.

Place the following code below the jumbotron code, in your single.php file:

<div class="container" id="main">
	<div class="row">
		<div class="col-md-8">
			<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
				<?php the_content(); ?>
				<ul class="pager">
					<li class="previous"><?php previous_post_link('%link', '<i class="icon-chevron-left"></i>&nbsp; %title'); ?></li>
					<li class="next"><?php next_post_link('%link', '%title &nbsp;<i class="icon-chevron-right"></i>'); ?></li>
				</ul>
			</article>

			<?php comments_template(); ?>

		</div> <!-- .col-md-8 -->

<?php endwhile; endif; ?>

		<?php get_sidebar(); ?>

	</div> <!-- .row -->
</div> <!-- .container -->

Next up: Part 5 – Bootstrap search form & search results page