Build A WordPress Theme From Scratch With Bootstrap

written by William Patton on June 19, 2013 in WordPress Custom with 10 comments

In the last few months I’ve spent a load of time building WordPress themes with Bootstrap. If you needed to you could easily build a whole themes from scratch in less than a day with it – that’s the beauty of front-end frameworks. Working with front-end frameworks really does take WordPress theme development to a new level. You can make some amazing things in a short period of time.

bootstrap responsive front-end frameworkBuilding a WordPress theme from scratch might be quite daunting, but trust me it’s really not. You only need a handful of different files. Most of the files are actually just html with some very basic WP specific php code and some styles. Getting things up and running with Bootstrap adds a few steps before you get started but it’s really nothing overly complicated so don’t worry. I’ll walk you through the whole thing, beginning to end.

Downloading Bootstrap

I’ve previously gone over the absolute minimum requirements for a theme before. You just need 2 files – style.css and index.php. To make it a Bootstrap powered theme you need a couple more files – the Bootstrap files.

The easiest way for you to get Bootstrap is to go and download it from the official Github page, or clone and fork it if you want. I recommend you download it from the customize page with all the boxes ticked, that way everything will be compiled into just 4 files (with 2 being the glyphicon halfling images).

If you download if from the homepage then you end up with multiple separate css files which you need to import separately, with it fully compiled it makes it a little bit easier.

You can also include the fully compiled versions of the files from a CDN if you wish.

Just so you know we will be using the full Bootstrap for development (all the css and js) but when it comes time to finish the theme I’ll walk you through removing any unused code to speed up your theme and slim down your code.

Get Bootstrap

Preparing The Theme Folder

When you open up your Bootstrap zip it will look something like this.

Bootstrap folder structure

Folder structure of a fully compiled Bootstrap

You want to copy the css, js and img folder into your theme folder (any empty folder will do but it’s worth noting that if you include numbers in the folder name it may not show in the WP dashboard).

Once you’ve copied over those folders you will want to create 3 more files – functions.php, index.php and style.css. Put them all in the folder along with Bootstrap. Your folder structure should look like this.

Bootstrap wordpress theme folder structure

Add a functions.php, index.php and style.css file to the theme and copy the Bootstrap folders in.

Setting up the theme

The first thing you need to do when creating any WordPress theme is add the required comment block to the top of the style.css file.

A WordPress Style.css with Bootstrap Imported

This code tells WordPress that the files in this folder make a theme called My Bootstrap Theme, it’s version 0.1 of the theme and I’m the author. I’ve also imported the bootstrap.min.css file – the minified version of Bootstrap’s stylesheet – which includes the responsive stylesheet.

/*
Theme Name: My Bootstrap Theme
Author: William Patton
Author URI: http://www.pattonwebz.com/
Version: 0.1
*/

@import url("css/bootstrap.min.css");

The WordPress Index.php File

The markup in the index.php file is very basic, it shows the site title and has a basic loop but that’s it.

Paste this into the index file.

<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title><?php wp_title(''); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div>
<h1 id="site-title"><?php echo get_bloginfo('name') ?></h1>
</div>
</header>

<section id="content">
<?php if ( have_posts() ) : ?>

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?pho the_content(); ?>
<?php endwhile; ?>

<?php endif; ?>
</section>
<?php wp_footer(); ?>
</body>
</html>
Remember that Bootstrap requires you to declare an HTML5 doctype at the beginning of the head section. Doing that with HTML5 is pretty easy it’s just <!DOCTYPE html>.
You need to have a viewport width defined too in your head section. That’s done like this: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">.

Our Basic Functions File

Now all we need to do is add a couple of php functions to get our style and script included. Not surprisingly we add them to the functions.php file.

We just need 2 functions, one to add our stylesheet and one to add our Javascript. Technically both of these could be done in a single functions but I think it’s better practice to have one for styles and a separate one for javascript. Functions in WordPress tend to be created then hooked into other places. So we add the action (our function) to the appropriate hook. You can see an awesome list of hooks available compiled by Adam Brown on his site.

function enqueue_my_scripts() {
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', '1.9.1', true); // Bootstrap relies on we need the jquery library
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), true); // all the Bootstrap javascript goodness
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');

The above code creates a function which queues up the jQuery library and our Bootstrap JavaScript file. We also tell it that the bootstrap.min.js depends on jQuery being loaded first, so it won’t load if jQuery doesn’t. The true directive at the end there tells WordPress we want them to be added in the footer to prevent pageload issues.

function enqueue_my_styles() {
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style( 'my-bootstrap-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', 'enqueue_my_styles');

This code does almost exactly the same as the function to include the javascript, only this time we are doing it with stylesheets. We only have one stylesheet to include from Bootstrap and one of our own.

Functions.php

The complete functions.php file just wraps those 2 functions in php tags. Together it all looks like this:

<?php

function enqueue_my_scripts() {
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true); // we need the jqyery library for the Bootstrap plugins
wp_enqueue_script( 'bootstrap-js', 'js/bootstrap.min.js', array('jquery'), true); // all the Bootstrap javascript plugin goodness
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
function enqueue_my_styles() {
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style( 'my-bootstrap-style', get_template_directory_uri() . '/style.css'); 
}
add_action('wp_enqueue_scripts', 'enqueue_my_styles');

?>

Once you’ve done that you’re finished. You have a Bootstrap powered WordPress theme. It doesn’t look like much yet because we haven’t applied any of the Bootstrap styles to the markup but I’ll cover that in the next post.

Using Bootstrap Style In Your Theme

Eventually this theme will bulk up and become a completely functional styled theme. We’ll use the affix plugin to make some awesome floating social share buttons with Jetpack and we’ll make a responsive nav menu with a custom navwalker class – which adds glyphicons to menu items.

Next time I will add some Bootstrap markup and make the theme look like a proper webpage.

tags:

Related Articles

Making A Bootstrap Modal Plugin For WordPress

The Best BootPress WordPress Theme