How to Make a custom wordpress theme with bootstrap 3 and underscore.me ( responsive by default)

Assume that you know how to setup a WordPress site.

Part 1 : make a custom wordpress theme with Bootstrap 3 and underscores.me

1. Go to http://underscores.me/ , generate and download a theme. For example my_bootstrap_theme , please remember to replace my_bootstrap_theme with your own theme name.

Underscore theme

Underscore theme

2. Extract and copy the theme to YOUR_WORDPRESS_PATH/wp-content/themes

3. Go to http://getbootstrap.com/ and get bootstrap 3 , unzip. The folder will looks like this

Bootstrap 3 folder

Bootstrap 3 folder

4. Copy folder [css], [fonts], [js] from [dist] to YOUR_WORDPRESS_PATH/wp-content/themes/my_bootstrap_theme

5. Open YOUR_WORDPRESS_PATH/wp-content/themes/my_bootstrap_theme/functions.php , add these lines in my_bootstrap_theme_scripts

wp_enqueue_style( ‘bootstrap’, get_template_directory_uri() . ‘/css/bootstrap.css’, array( ), false, ‘all’ );
wp_enqueue_script(‘jquery’);
wp_enqueue_script( ‘bootstrap’, get_template_directory_uri() . ‘/js/bootstrap.js’, array( ), false, ‘all’ );

Screenshot from 2013-08-30 21:54:43

How to Make a custom wordpress theme with bootstrap 3 and underscore.me

Now, we’ve integrated Boostrap 3 into a WordPress theme.

Part 2 : Fully implement Twitter Bootstrap 3.0+ navigation style in a custom theme using the WordPress built in menu manager

1. Go to https://github.com/twittem/wp-bootstrap-navwalker and download the code

2. Put wp_bootstrap_navwalker.php in your WordPress theme folder YOUR_WORDPRESS_PATH/wp-content/themes/my_bootstrap_theme/

3. Open your WordPress themes functions.php file YOUR_WORDPRESS_PATH/wp-content/themes/my_bootstrap_theme/functions.php and add the following code:

require_once(‘wp_bootstrap_navwalker.php’);

4. Put these lines behind your <header id=”masthead” role=”banner”>

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<nav class=”navbar navbar-default” role=”navigation”>
<!– Brand and toggle get grouped for better mobile display –>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-ex1-collapse”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>

<a class=”navbar-brand” href=”<?php bloginfo(‘url’); ?>”>
<?php bloginfo(‘name’); ?>
</a>
</div>

<!– Collect the nav links, forms, and other content for toggling –>
<div class=”collapse navbar-collapse navbar-ex1-collapse”>
<?php
wp_nav_menu(array(
‘menu’ => ‘primary’,
‘theme_location’ => ‘primary’,
‘depth’ => 2,
‘container’ => false,
‘menu_class’ => ‘nav navbar-nav’,
‘fallback_cb’ => ‘wp_page_menu’,
‘walker’ => new wp_bootstrap_navwalker())
);
?>
</div><!– /.navbar-collapse –>
</div><!– /.container –>
</nav>
</nav><!– #site-navigation –>

wp-bootstrap-navwalker

wp-bootstrap-navwalker

5. Be sure you’ve checked [theme location] in Appearance –> Menu

6. Go to your front page, it will look like this

Screenshot from 2013-08-31 15:35:03

 

Well done.