Creating a simple theme with Underscores and Bootstrap

Note: this is an older post. I have since created a newer post that might be of better explanation. Visit my newer Simple Theme Using Underscores and Bootstrap

Remejy Simple Blue

The theme I am creating is going to be a simple blue theme that will utilize Underscores.me and Bootstrap. I created a few themes with underscores and foundation by zurb prior and they worked out very well. What I am looking to do is find a simple process for newer WordPress theme developers in Columbus to make their start. Over the last year or so, I have come to realize there is much information out there but it seems incoherent to me.

I just started the process to understand how to use Bootstrap, so it will take me a little while to get started and start posting the results. I am using DesktopServer for testing locally and plan to describe the process as I go along. Hopefully I might be able to explain the process just enough for someone newer to be able to follow along. Keep coming back later to follow along 😉

Underscores

Download _s (underscores.me) and unzip the folder in your themes folder under wp-content. The theme will now be in your selection of installed themes, so activate it. The theme is only a starter theme and will have almost no formatting applied. Take a look at the file structure of the theme and you will notice that all the pertinent sections are split up into separate template files. In a very basic theme you need at least two files, the style.css and an index.php file. Looking at the index.php file you will notice the calls to the header and footer template files and also the template-part for content. This is important to follow along to see when and where template parts are added to the various templates as you try to decide where to make edits while adjusting your theme.

jQuery

jQuery is used with some of the Bootstrap components. These components are clearly marked as needing jQuery in the Bootstrap documentation. WordPress comes with a jQuery library.

Bootstrap

Download Bootstrap and save in your theme folder. In your functions.php file, enqueue the required css and js files in the function that loads scripts. Your section should look similar, replacing the text ‘remejy-blue’ with the name of your plugin

/**
 * Enqueue scripts and styles.
 */
function remejy_blue_scripts() {
	wp_enqueue_style( 'remejy-blue-bootstrap-style', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
	wp_enqueue_style( 'remejy-blue-bootstrap-theme-style', get_template_directory_uri() . '/bootstrap/css/bootstrap-theme.min.css' );
	wp_enqueue_style( 'remejy-blue-style', get_stylesheet_uri() );

	wp_enqueue_script( 'remejy-blue-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'remejy-blue-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

	wp_enqueue_script( 'remejy-blue-bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', false , '' , true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'remejy_blue_scripts' );

It is important the order you place your css files. Style.css should house all your specific styles and thus loaded after the bootstrap css

What’s next

Now that I have the underscores template and Bootstrap connected to the theme, I need to take a step back and think properly about the steps for creating a usable site. In order to accomplish this goal, I will follow the steps in my article WordPress Theme Development for Beginners. Follow along as I follow the steps to use Bootstrap to create my new theme for this site.