Combining Bootstrap with Underscores

Sometimes, simple is the best. This theme was created using Underscores.me as the main template and then incorporating Bootstrap for the basic visual. Underscores is generic by nature so that the developer can concentrate on creating a visual without having to recreate the necessary backend pages for a WordPress theme. Bootstrap is then utilized to incorporate some interesting visual capabilities. No need to make this difficult, just keep it simple and use underscores with Bootstrap.

Add Underscores theme template

Go to Underscores.me and download the base theme template. Login to your WordPress site, go to “Appearance” and then to “Themes”, click the “Add New” button and then “Upload Theme”. Choose the .zip file you downloaded, then click “Install Now”, then activate the theme. Your site should now be a plain vanilla site with no real formatting.

Setup Bootstrap

Download Bootstrap┬áby clicking the “Download Bootstrap” button. Unzip the file and rename the folder to “bootstrap”. Move the folder to the base folder of your theme. This may require using FTP to upload the folder to your hosting provider or by using the ‘File Manager’ of your hosting providers admin panel. (please check the support section of your host for information on how to FTP or use a file manager for your account)

Note: The following directions assume you can edit the files within your theme folder on your hosting account. If you do not have the ability to edit the files on your host, even though this is never recommended you can actually edit these files from your WordPress Dashboard under “Appearance” and then “Editor”. Just look for the files in question and make your changes. Be warned, that editing files from the WordPress editor you run the risk of locking yourself out of your site. There is no undo function, so please edit carefully and backup your site prior to editing in this manner.

If you think you will need to provide support for IE8 browsers, then add the following code to the header.php file just prior to the <?php wp_head(); ?> line.

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

The Bootstrap CSS will be included by enqueuing in the functions.php file with the other stylesheets. Look for the function that is approximately 100 lines of code down that enqueues the style.css stylesheet. The code should look similar to the following:

wp_enqueue_style( 'your-theme-name-style', get_stylesheet_uri() );

Add the Bootstrap CSS enqueue just below the above line

wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );

Bootstrap also has a JavaScript library that we need to enqueue, which relies upon jQuery in order to provide certain functionality. Just below where you added the Bootstrap CSS add the following code to include jQuery and the Bootstrap JS (note that jQuery is required for bootstrap-js, so a dependancy is created in the array to ‘jquery-js’ for the enqueue to ‘bootstrap-js’):

wp_enqueue_script( 'jquery-js', 'http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), '20160804' );
wp_enqueue_script( 'bootstrap-js' , get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array('jquery-js'), '20160804' );

Save the files and voila… a no frills theme for your WordPress site. From here you can edit the style.css file to change your formatting. Or better yet, create a custom.css file and enqueue it just below the Bootstrap CSS enqueue in similar manner.

Leave a Reply

Your email address will not be published. Required fields are marked *