HOW TO DEVELOP A WORDPRESS THEME USING BOOTSTRAP (PART

2)

This is part 2 of a series of tutorials aimed at describing how to create a WordPress theme from
scratch using the Bootstrap CSS framework. This tutorial series is ideal for PHP developers
looking to move into WordPress theme development or beginner WordPress theme developers
wanting to expand their knowledge and creating a responsive Bootstrap WordPress theme.

Lab Objectives
After completing this lab, you will be able to:
 Create Navigation
 Edit Footer
 Create Sidebar

In part 1 of this tutorial, we discussed the basics of setting up the theme files, enqueue stylesheets
and scripts, and display the blog feed using The Loop. Just to recap, we are using one of the
starter example templates from the Bootstrap website for this tutorial: the blog template which is
a simple two-column blog layout with custom navigation, header, and type.
In the next installment of this tutorial, we look into developing a carousel for the theme by utilizing
the Bootstrap carousel component.
In this part, we discuss creating the header area, navigation, sidebar, and footer areas. If you’d like
the download the source right away, here it is:
Download Source

Developing a WordPress Theme from Scratch Using the Bootstrap CSS Framework
In the previous installment of this tutorial, we had set up the header.php file, but the navigation
and site name and description are still static. Lets edit header.php and take care of these elements.

Lab Procedures
A. Creating Navigation
The starter template has one navigation that sits at the top of the page. In order to
incorporate menu support into our theme, we need to tell WordPress that our theme
supports one menu by writing a few lines of code to register it. Menu registration requires
a location name (slug or identifier) and a descriptive short name. Edit function.php and add
the following lines of code:

function bootstrapstarter_register_menu() {

How to Develop a WordPress Theme Using Bootstrap (Part 2) 1-1

 register_nav_menu('header-menu', __( 'Header Menu' ));
}
add_action( 'init', 'bootstrapstarter_register_menu' );

This menu would appear in the “Theme Locations” box as “Header Menu”. The admin can
create a new menu, add items (pages, custom links, categories, etc.) to it and then assign
the menu to the “Header Menu” location.
Now in order to display the menu, we need to refer to the menu slug or identifier at the
point in the presentation file (header.php file in our case) where the menu list is going to
be displayed. The function to use here is wp_nav_menu(), which you will need once for
each menu location.
The starter template has this block of code that shows the navigation bar:

<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>

Note: We won’t be using (generating) this HTML code as it is – wp_nav_menu() uses lists
(ul, li) in its output. So lets remove this block of code and replace it with the following line:

<?php wp_nav_menu( array(

'theme_location' => 'header-menu',
'menu_class' => 'blog-nav list-inline'
) ); ?>

This tells WordPress to display the menu assigned to the “header-menu” location and use
the CSS classes “blog-nav” and “list-inline” for the ul element. For the purpose of this
template, we do need some extra CSS for the top navigation since we’ve changed the
format from simple links to list elements. I’ve added the required CSS in the stylesheet;
you can download it with the final code.
Now lets move on to the next static block of code in header.php, which is the blog header
or the blog name and description text.

<div class="blog-header">

How to Develop a WordPress Theme Using Bootstrap (Part 2) 1-2

 <h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example
template of creating a blog with Bootstrap.</p>
</div>

Lets use the blog name (“Site Title” set in Settings > General) and the blog tagline
(“Tagline” set in Settings > General) to populate these lines. Replace the above lines with
the following – we’re using the bloginfo() and get_bloginfo() functions:

<div class="blog-header">
<h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>
<?php $description = get_bloginfo( 'description', 'display'
); ?>
<?php if($description) { ?><p class="lead blog-
description"><?php echo $description ?></p><?php } ?>
</div>

That’s it for the header.php file – we will now have a dynamic menu and the top of the blog
will show the name of the blog along with the tagline.

B. Editing Footer (Copyright Text)

Lets open footer.php now. This is the static block of HTML that needs to be replaced:

<p>Blog template built for <a

href="http://getbootstrap.com">Bootstrap</a> by <a
href="https://twitter.com/mdo">@mdo</a>.</p>
<p><a href="#">Back to top</a></p>

There are many ways to hook this area into WordPress, here are a a couple of options:
Use a widget here. It could be a Text Widget, and the user would have the freedom to enter
anything he wanted here.
Use a theme setting. Retrieve a modification setting for the current theme and display it
here. This gives the theme more control on what can be entered here and how it will be
displayed.
For the purpose of this starter template, lets use a widget for this footer area. So here we
begin widgetizing our theme! Widgetizing is a pseudo word that describes the process of
implementing Widgets and Widget Areas into a WordPress theme.
In order to add widgets, we need to register them first. Somewhat similar to the menus.
Widget registration tells the theme about the widgets that are available and what their
names (slugs) are, so that we can use those identifiers to call and display them. We

How to Develop a WordPress Theme Using Bootstrap (Part 2) 1-3

use register_sidebar() to do this – read up more on this function to see all the possible
arguments and options. Now add the following lines to functions.php in order to register a
widget area called “Footer – Copyright Text”:

function bootstrapstarter_widgets_init() {
register_sidebar( array(
'name' => 'Footer - Copyright Text',
'id' => 'footer_copyright_text',
'before_widget' => '<div
class="footer_copyright_text">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'bootstrapstarter_widgets_init' );

The above code tells WordPress to register a new sidebar widget called “Footer – Copyright
Text” with the ID “footer_copyright_text”. And also that any widget assigned to this
location should be wrapped with a div with the CSS class “footer_copyright_text” and if a
title is entered, the title should be wrapped in h4 tags. Now that we’ve told WordPress
about the presence of a footer widget, we use the widget ID to display it in the appropriate
spot. So our final footer.php file becomes:

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

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

<footer class="blog-footer">
<?php if ( is_active_sidebar( 'footer-copyright-text' ) )
{ dynamic_sidebar( 'footer-copyright-text' ); } ?>
</footer>
<?php wp_footer(); ?>
</body>
</html>

We first check if the sidebar called “footer-copyright-text” is active or in use by using the
function is_active_sidebar(). Any sidebar that contains widgets will return true,

How to Develop a WordPress Theme Using Bootstrap (Part 2) 1-4

 whereas any sidebar that does not contain any widgets will return false. If the sidebar is in
use, we use the function dynamic_sidebar() to display the widgets assigned to the
sidebar area “footer-copyright-text”.
Now that the footer is widgetized, a Text Widget containing the HTML we removed can
be assigned to the “Footer – Copyright Text” sidebar.

C. Creating Sidebar
The sidebar should be straightforward now that we know how to create widgets. Lets create
two widget areas here – if you look at the starter template we’re following, you’ll see that
the top widget (“About”) has a grey background. We’d like to treat that one separately –
so we register up two sidebar areas: one with the background color and one without.

How to Develop a WordPress Theme Using Bootstrap (Part 2) 1-5

Add the following two lines to the already existing bootstrapstarter_widgets_init()
function we created in the previous step:

register_sidebar( array(
'name' => 'Sidebar - Inset',
'id' => 'sidebar-1',
'before_widget' => '<div class="sidebar-module
sidebar-module-inset">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
) );
register_sidebar( array(
'name' => 'Sidebar - Default',
'id' => 'sidebar-2',
'before_widget' => '<div class="sidebar-module">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
) );

As you can tell, this registers the two sidebars: one wrapped with a div with the CSS classes
“sidebar-module sidebar-module-inset” and the other with “sidebar-module” only. Now
that these are registered, we need to call the display function in sidebar.php:

<div class="col-sm-3 col-sm-offset-1 blog-sidebar">

<?php if ( is_active_sidebar( 'sidebar-1' ) ) {
dynamic_sidebar( 'sidebar-1' ); } ?>
<?php if ( is_active_sidebar( 'sidebar-2' ) ) {
dynamic_sidebar( 'sidebar-2' ); } ?>
</div><!-- /.blog-sidebar -->

Lastly – we need to include the sidebar into the main template file index.php – previously,
we had created all the parts but only the header and footer are being called in the index.php
file. So lets open index.php and use the get_sidebar() function right after the blog area –
the final index.php is:

How to Develop a WordPress Theme Using Bootstrap (Part 2) 1-6

 <?php get_header(); ?>
<div class="col-sm-8 blog-main">
<?php
if ( have_posts() ) {
while ( have_posts() ) : the_post();
?>
<div class="blog-post">
<h2 class="blog-post-title"><?php the_title(); ?></h2>
<p class="blog-post-meta"><?php the_date(); ?> by
<?php the_author(); ?></p>
<?php the_content(); ?>
</div><!-- /.blog-post -->
<?php
endwhile;
}
?>
<nav>
<ul class="pager">
<li><?php next_posts_link('Previous'); ?></li>
<li><?php previous_posts_link('Next'); ?></li>
</ul>
</nav>

</div><!-- /.blog-main -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

D. Results
After doing all the above, lets go to the administration area and go to Appearance > Menus.
Create a new menu, add a few items to it and assign it to the “Header Menu” location.

How to Develop a WordPress Theme Using Bootstrap (Part 2) 1-7

Now for the widgets. Lets go to Appearance > Widgets – you will see something like this:

Grab a Text widget and drag it to the “Footer – Copyright Text” area. Enter this into the
Content field:

<p>Blog template built for <a

href="http://getbootstrap.com">Bootstrap</a> by <a
href="https://twitter.com/mdo">@mdo</a>.</p><p><a href="#">Back to
top</a></p>

Grab another Text widget, drag it to the “Sidebar – Inset” area and enter “About” into the
Title and the following into the Content field:

How to Develop a WordPress Theme Using Bootstrap (Part 2) 1-8

<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras
mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum
nulla sed consectetur.</p>

Drag the Categories and Archives widgets into the “Sidebar – Default” area. You will end
up with something like this:

That should do it! Look at the front end and you will have a fully integrated blog template
complete with a sidebar. Pat yourself on the back and take a break.

How to Develop a WordPress Theme Using Bootstrap (Part 2) 1-9