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 underscores.me 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 underscores.me as follows

create wordpress theme with bootstrap for underscores.me 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

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

[php highlight=”2″]
<body <?php body_class(); ?>>
<div class=”container”>
<div id=”page” class=”hfeed site”>

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

[php highlight=”2,3,30″]
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(); ?>

<?php
/*
* 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

[php highlight=”5,9,10″]
if ( ! is_active_sidebar( ‘sidebar-1’ ) ) {
return;
}
?>
<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

[php highlight=”1,2,3,4,12″]
</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( __( ‘http://wordpress.org/’, ‘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=”https://seegatesite.com” 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

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

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

[php highlight=”1,2,6″]
<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 –>

</pre>
</div>

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 🙂

download-button

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.

27 Comments

 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.
    “wp_bootstrap_navwalker.php”
    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.

  10. very neat and concise tutorial can you tell me. do I need to edit the style.css file as bootstrap has its own style and underscores has its own pre-maid CSS style

  11. Hi, nice tutorial there. One question regarding the Bootstrap script. Shouldn’t jQuery be added as dependency when enqueuing the Bootstrap script in functions.php like below?
    wp_enqueue_script( ‘bootstrap-min-js’, get_template_directory_uri() . ‘/js/bootstrap.min.js’, array(‘jquery’), ‘3.3.4’, true );

  12. See: https://github.com/wp-bootstrap/wp-bootstrap-navwalker for most up to date bootstrap walker. It is best to directly link to the original author 🙂

  13. Hello. I am having trouble with your menus.

    With the code exactly as it is above, the nav bar appears ok, but the only item on the left hand side of the nav bar is “Add a menu”.

    If I change this:
    ‘menu’ => ”,
    to this
    ‘menu’ => ‘menu-1’,
    everything works ok. menu-1 is the slug for my custom menu inside WordPress.

    I’m not an expert on wordpress code, I was wondering if this had something to do with an updated version of WordPress? Thanks

  14. Great post! Waiting for you to write about how to develop UnderStrap 🙂

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.