Understanding the Roots base template

One of the impressive things about the Roots theme is that it has pulled the fundamental layout elements out of individual template files and placed them into a file named base.php. We'll look at this in just a moment.

First, let's notice that the base.php file receives instructions on fundamental layout matters from the config.php file inside the lib folder. Take a moment to open this latter file and scan through it. I will not touch upon everything here. You can read more about the details in the following two pages in the Roots documentation:

For present purposes, note that we have the ability to specify what class should be put on the main column and the sidebar as well as to determine the pages that should not have a standard sidebar.

If you search for the phrase main class, you'll find lines that set the main and sidebar classes. If the page has a sidebar, the main element will receive the col-sm-8 class, limiting its width to two-thirds the width of the container, while the sidebar receives the col-sm-4 class. If there is no sidebar, the main columns will receive the col-sm-12 class and will be made full width.

/**
 * .main classes
 */
function roots_main_class() {
  if (roots_display_sidebar()) {
    // Classes on pages with the sidebar
    $class = 'col-sm-8';
  } else {
    // Classes on full width pages
    $class = 'col-sm-12';
  }
  return $class;
}
/**
 * .sidebar classes
 */
function roots_sidebar_class() {
  return 'col-sm-4';
}

The classes mentioned in the previous code snippet assume that we want the transition from a single-column to a multi-column layout to occur at the @screen-sm breakpoint. We can easily change that here. We can also easily change the widths of our main column and sidebar by updating these classes, which is to say that we can update the layout for all pages and posts from this single location, making the results effective throughout our site without having to combine multiple template files. While at first this arrangement may seem confusing, it is a huge efficiency gain.

Next, notice how the config.php file determines which pages receive a sidebar or actually, which pages should not, as shown in the following code snippet:

/**
 * Define which pages shouldn't have the sidebar
 * ...
 */
function roots_display_sidebar() {
  $sidebar_config = new Roots_Sidebar(

    array(
      'is_404',
      'is_front_page'
    ),
    ...
    array(
      'template-custom.php'
    )
  );
  return apply_filters('roots_display_sidebar', $sidebar_config->display);
}

Thus, by default, the front page, 404 page, and any page that uses the custom page template will not receive a sidebar. We can easily add or remove pages and templates to this list, making it possible to customize the layout in entire sections of our site or individually as needed.

With this in mind, we're ready to look at base.php. Find this file in the main themes folder and open it in your editor.

Scan down through it and you will notice that this file does the following things:

  • It pulls in the head of the page—see the head.php file in the templates folder.
    <?php get_template_part('templates/head'), ?>
  • It supplies the body tag and body classes.
    <body <?php body_class(); ?>>
  • It pulls in either the top navbar or a header with normal navigation—see the header-top-navbar.php and header.php templates.
    <?php
  do_action('get_header'),
  // Use Bootstrap's navbar if enabled in config.php
  if (current_theme_supports('bootstrap-top-navbar')) {
    get_template_part('templates/header-top-navbar'),
  } else {
    get_template_part('templates/header'),
  }
?>
  • If you jump down to the bottom, you'll see that it pulls in the footer—see the footer.php file in the templates folder.
    <?php get_template_part('templates/footer'), ?>
  • And in the middle of all this, we see the block of code that defines the structure for the page content:
    • Begins with a container and a row:
      <div class="wrap container" role="document">
  <div class="content row">
    • Defines div class as main with a roots_main_class method that sets the column width:
          <div class="main <?php echo roots_main_class(); ?>" role="main">

      Note

      The roots_main_class method is defined in the config.php file in the lib folder.

    • Uses the appropriate template for the content of the present page:
            <?php include roots_template_path(); ?>
    • Closes the div tag for .main:
          </div><!-- /.main -->
    • Displays the sidebar, if called for, with its appropriate Bootstrap column class:
          <?php if (roots_display_sidebar()) : ?>
      <aside class="sidebar <?php echo 
        roots_sidebar_class(); ?>" role="complementary">
        <?php include roots_sidebar_path(); ?>
      </aside><!-- /.sidebar -->
    <?php endif; ?>

      Note

      The config.php file establishes the pages that will have sidebars and the class that will be assigned to the sidebar.

    • And then closes up the row and container classes that have been applied respectively to the div tag of the content and wrap classes:
        </div><!-- /.content -->
</div><!-- /.wrap -->

That's a lot to take in. Let's boil it down to this:

  • The Roots base template lays out everything between the navbar and the footer within an element with the Bootstrap container class, thus constraining its width and keeping it from stretching full-width
  • We need to set our carousel free to range the full width and then supply the container class when and where we want it

To fix this situation, we could simply remove the container class from the base template and adjust other elements accordingly. This would work except that our home page is the only one where we need the full-width carousel. So, we may inadvertently create more work for ourselves later by messing with the standard template file.

Instead, to accomplish our goal in a more targeted way, let's create a custom base template specifically for the home page. Roots makes it easy to do this.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset