Create a basic template for Wordpress with Underscores and Bootstrap

Use Underscores ("_s") and Bootstrap to create a starter template for Wordpress.

One of the best option to create a template for Wordpress is to start from a starter based theme. There's a few well-known starter theme that might be helpfull. For example :

  • Roots, based on Bootstrap but a bit complecated for new users of Wordpress
  • Bones that could be a good alternative to Underscores 

Underscores is made pretty simple by some of Wordpress's team co-worker and is it a very good solution to start out a Wordpress template.

In this post, based on the idea that Wordpress is already installed, we will see how to add Bootstrap to the Underscores starter theme.

Download and configuration of Underscores

  • Go to http://underscores.me/
  • In that webpage, there is a field name Theme Name. Add your custom name in that field (you can use spaces and upper character), for example My Theme.
  • You can click on the Advanced Options link. It might be good to fill out the different fields like Authors, Authors URI and Description. In the Theme Slug field, you can add the name of your theme without accent, spaces or upper characters. For example, my_theme. You can also click on the _sassify! checkbox in you want work with sass.
  • Click on the Download button and unzip the document.
  • You can edit the style.css file. If you open it, you will see that Normalizing styles have been added. Using Bootstrap, most of thoses styles are not necessary. You can go through the document and delete them all or a few of them.

Download and configuration of Bootstrap

  • Go to http://getbootstrap.com/
  • Download Bootstrap 3 (Download Bootstrap button) and unzip it.
  • Rename the document by "bootstrap" without upper character.
  • Drop the bootstrap document at the root of your Underscores document. For example, my_theme/bootstrap.
  • Go into your Underscores document. For example, my_theme.
  • Open the file functions.php in your Underscores document.
  • Around at the 100 line, you'll find a PHP function called function inv_wp_s_scripts().
  • In that function, add the two following lines : 
    • wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
    • wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array('jquery'), '', true );
  • The final result should look like this :

function inv_wp_s_scripts() {

    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
    
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array('jquery'), '', true );
   
    wp_enqueue_style( 'inv_wp_s-style', get_stylesheet_uri() );

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

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

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

Installation and configuration

  • Through your FTP, add your my_theme Underscrores document into wp_content/themes/my_theme
  • Go to your Wordpress installation under Apparence > Themes and activate your new theme.