Create WordPress Theme with Bootstrap And Underscores Step by Step

Continuing my article on “How to create a wordpress theme” , I will share about how to create  wordpress theme with bootstrap framework step by step. To accelerate building wordpress theme, I use starter theme from to accelerate building theme. With wordPress starter theme, The theme can work well with minimal of html and CSS script. Our job as developers is wrap this content with bootstrap framework that responsive.

Why use a bootstrap framework? bootstrap is quite easy to use ,make our site more presentable, more responsive with a variety of smartphones and can be competitive in “Mobilegeddon” era.

Let’s start create wordpress theme with bootstrap framework and underscores step by Step

In this experiment, i will try to create two column wordpress theme

A. Create your starter theme from as follows

create wordpress theme with bootstrap for step by step

Press the generate button. Then copy the file that you have generated earlier into folder Wp-content -> themes and extract your theme.

how to build bootstrap wordpress theme with underscores

Turn on your new themes through your wordpress dashboard

C. Download framework bootstrap 3 here and font-awesome-4.3.0 here and Jquery here

After download, create a new folder with name “css” in your theme folder. Then copy bootstrap.min.css and font-awesome folder into the css folder as shown below

how to build bootstrap wordpress theme with underscores 2

Then copy jquery.min.js and bootstrap.min.js into js folder as below

how to create wordpress theme bootstrap for responsive mobile siteAfter preparing the necessary materials, the next step is change code on some of php file. We‘ll add script on function.php, to read a bootstrap file that already include earlier. To add css and javascript files on theme, we need an action script wp_enqueue_scripts“.  Search function Enqueue scripts and styles as shown below

Build Bootstrap WordPress Theme with Underscores Step by Step tutorial

And then add the following script

	wp_enqueue_style( 'myfirstheme-style', get_stylesheet_uri() );
	wp_enqueue_style( 'bootstrap', get_template_directory_uri() .'/css/bootstrap.min.css',array(),'3.3.4' );
	wp_enqueue_style( 'font-awesome', get_template_directory_uri() .'/css/font-awesome-4.3.0/css/font-awesome.min.css',array(),'4.0.3' );

	if( !is_admin()){
		wp_deregister_script( 'jquery' );
		wp_register_script('jquery', get_template_directory_uri().'/js/jquery.min.js', false,'1.10.2',true);
	wp_enqueue_script( 'bootstrap-min-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.3.4', true );
	wp_enqueue_script( 'firstheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
	wp_enqueue_script( 'firstheme-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
	wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom-js.js', array(), '1.0', true );
	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );

For more details about wp_enqueue_style and wp_enqueue_script, please read here wp_enqueue_style and wp_enqueue_script tutorial

Please see the page source of your site, whether css and javascript are already performing well.

adding stylesheet on wordpress

adding script on wordpress

The second step is edit header.php, and add the element below

<body <?php body_class(); ?>>
	<div class="container">
		<div id="page" class="hfeed site">

Next step is edit index.php and add this code below

get_header(); ?>
<div class="row">
	<div class="col-md-8 col-xs-12">
		<div id="primary" class="content-area">
			<main id="main" class="site-main" role="main">
				<?php if ( have_posts() ) : ?>

				<?php /* Start the Loop */ ?>
				<?php while ( have_posts() ) : the_post(); ?>

					 * Include the Post-Format-specific template for the content.
					 * If you want to override this in a child theme, then include a file
					 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
					get_template_part( 'template-parts/content', get_post_format() );

				<?php endwhile; ?>

			<?php the_posts_navigation(); 			?>
		<?php else : ?>

		<?php get_template_part( 'template-parts/content', 'none' ); ?>

	<?php endif; ?>
			</main><!-- #main -->
		</div><!-- #primary -->
	</div><!--col-md-8 col-xs-12 -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The next step is edit sidebar.php and add the following code

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
<div class="col-md-4 col-xs-12" >
	<div id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'sidebar-1' ); ?>
	</div><!-- #secondary -->
</div><!-- .col-md-4>-->
</div><!-- .row -->

Edit file footer.php and add the following script

</div><!-- #content -->
</div><!-- #page -->
</div><!-- .container -->
<div class="container">
	<footer id="colophon" class="site-footer" role="contentinfo">
		<div class="site-info">
			<a href="<?php echo esc_url( __( '', 'myfirstheme' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'myfirstheme' ), 'WordPress' ); ?></a>
			<span class="sep"> | </span>
			<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'myfirstheme' ), 'myfirstheme', '<a href="" rel="designer">seegatesite</a>' ); ?>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #container -->

Refresh your site and see, theme with 2 columns already noticeable. To enhance the appearance, the next step is create menu navbar bootstrap. To create a bootstrap navbar style and implemented in wordpress, require a php class “wp_bootstrap_navwalker.php”, for a more detailed explanation please read here

Bootstrap navbar for wordpress with wp_bootstrap_navwalker.php

1. Please download wp_bootstrap_navwalker.php here
2. Copy wp_bootstrap_navwalker.php in folder “inc”
3. Edit function.php dan add this script below to load wp_bootstrap_navwalker.php file

 * navigation bootstrap
require get_template_directory() . '/inc/wp_bootstrap_navwalker.php';

Edit header.php dan delete the original code from theme like below
create bootstrap navbar for wordpress with wp_bootstrap_navwalker

And change with this code

<nav class="navbar navbar-inverse " role="navigation">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<button type="button"  class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
		</div><!--end navbar-header-->
		<div class="collapse navbar-collapse menu-primary" id="bs-example-navbar-collapse-1">
			wp_nav_menu( array(
				'menu'              => '',
				'theme_location'    => 'primary',
				'depth'             => 2,
				'container'         => '',
				'container_class'   => 'collapse navbar-collapse',
				'container_id'      => 'bs-example-navbar-collapse-1',
				'menu_class'        => 'nav navbar-nav',
				'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
				'walker'            => new wp_bootstrap_navwalker())
			<div class="col-sm-3 col-md-3 pull-right search-navbar">
				<form class="navbar-form" role="search" method="get" id="searchform" action="<?php bloginfo('home'); ?>" >
					<div class="input-group">
						<input type="text" id="searchbox" class="form-control" placeholder="Search" name="s" id="s">
						<div class="input-group-btn">
							<button class="btn btn-default"  id="searchsubmit"  type="submit"><i class="glyphicon glyphicon-search"></i></button>
		</div><!--end navbar-colapse-->
	</div><!--end container-->

Please add a new menu on your wordpress (Appearance -> Menus) and see the results.

And the last step is  , add new code in single.php , page.php, archive.php , search.php , 404.php before element below

<div class="row">
<div class="col-md-8 col-xs-12">
<div id="primary" class="content-area">
</div><!-- #primary -->
</div><!--col-md-8 col-xs-12 -->


Voilaa!! your wordpress theme with bootstrap framework is ready to use, you can beautify the look by customizing the CSS, for register the new css custom, please edit the function.php. or you can download my example project below 🙂


Conclusion : Making a bootstrap wordpress theme using starter theme is very easy to use .

Other Article :

Tutorial Create WordPress Theme From Bootstrap Template For Beginner (Full Source)

Thank you for reading my article about “Create WordPress Theme with Bootstrap And Underscores Step by Step” , hope it is useful 🙂

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.


 Add your comment
  1. Hi, this is a nice tutorial. I followed it and I have my custom starter theme but….the wp-admin styles are screwed up! How come?

  2. Priscila Inez De Oliveira Silva

    Hey sorry i am learning about theme with bootstrap and convert into wordpress. I have a question . When i finish the process i can do my theme as i like ? And where i edit. HTML CSS ? I dont understand yet só much Thanks very much and congratulations 🙂

  3. hello, i loved your tutorial, but i have a question, i am learning yet create theme with bootstrap to wordpress, and my question is: when i finish the process and my theme is reading to work, how can i costumize it? like put HTML CSS slider etc? thanks so much

  4. Looking at the source for font awesome it seems to be trying to load fonts from its font directory. Is this handled somewhere else or do we need create a font directory and copy over the files in the font directory. The same seems to be true for bootstrap. Bootstrap has the glyphicons it tries to load

    • Never mind about the Font Awesome. I just read it again and we are to copy the whole folder. Still leaves an issue with the glyphicons (which I know is redundant because of Font Awesome).

      The tutorial was very informative. Thank you for that.

  5. wp_enqueue_style( ‘bootstrap’, get_template_directory_uri() .’/css/bootstrap.min.css’,array(),’3.3.4′ );
    wp_enqueue_style( ‘font-awesome’, get_template_directory_uri() .’/css/font-awesome-4.3.0/css/font-awesome.min.css’,array(),’4.0.3′ );

    could you explain the numbers in array please? ( 3.3.4 and 4.0.3 )

  6. Glyphicons are not displaying.
    after including this file menu changes to new layout and there was search box appearing but search icon is missing. its displaying glyphicon but you told us to use font awesome.

  7. There are two ids in <input type="text" … in the new header.php.

  8. Hi, thank you for the tutorial! I’m having a problem with the navwalker menu. When I’m looking at the mobile version, the menu icon does not drop down when clicked. I compared my files to your downloadable them and I can’t find the problem. Do you know what could be causing this?

  9. I found my problem, the menu does not drop down if you are using the latest version of jquery.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.