May 222014
 
Article WordPress

Adding style with bootstrap

Now that all the basic components of a theme have been added to our sample “minimum” theme, it is time to spend some time working on the design. To do it, we will use the Twitter Bootstrap framework. Bootstrap 3 offsers an out-of-the-box responsive solution to render the site on multiple devices, from desktop computers to laptops, tablets and smartphones.

The first steps of this task are:

  • Download Bootstrap 3 and extract the content of the zip file under the theme’s directory (for the development of our sample theme, we have downloaded bootstrap-3.1.1-dist.zip).
  • Edit stile.css to import the bootstrap stylesheet:
@import url('bootstrap/css/bootstrap.min.css'); 
body { 
     padding-top: 0px; 
     padding-bottom: 40px; 
}

Then, we can load again our site in the browser, and have a look at the result:

 

Indeed, the look and feel of the site has improved substantially. The menu, however, still appears as a list of elements.

Next, we will use the bootstrap grid to put the sidebar to the right of the main content. To do this, the whole content of the page is put inside a “container” div, with to inner divs in it:

  • A div with class “col-md-8”, to hold the main content
  • A div with class “col-md-4”, that will contain the sidebar

1. In the header.php template, replace all the lines below the <body> tag with:

<div class="container">
  <div id="page">
    <div id="header" role="banner">
      <div id="headerimg">
	<h1><a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a></h1>
        <div class="description"><?php bloginfo('description'); ?></div>
      </div>
    </div>

    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
    <hr />

    <div class="row">
      <div class="col-md-8">

2. At the beginning of the footer.php template, add the markup to close the “col-md-8” div, and enclose the sidebar inside a  “col-md-4” div:

    </div> <!-- class="col-md-8" -->

    <div class="col-md-4">
    <?php
    if(is_active_sidebar('sidebar-1')) : ?>
        <div id="sidebar">
        <ul>
        <?php dynamic_sidebar('sidebar-1'); ?>
        </ul>
        </div>
    <?php endif;
    ?>
    </div>
</div> <!-- class="row" -->

3. Also in the footer.php template, close the “container” div immediately before the </body> tag:

</div> <!-- class="container" -->
</body>

And, loading again the site in the browser, we can see how the sidebar is now placed to the right of  the main content:

blog-with-sidebar

 

 

In the next post in this series we will explain the changes required on the theme templates to render the menu as a bootstrap navigation bar.

References

 Posted by at 4:27 pm

 Leave a Reply

(required)

(required)