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:
head.php
file in the templates
folder.<?php get_template_part('templates/head'), ?>
<body <?php body_class(); ?>>
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'), } ?>
footer.php
file in the templates
folder.<?php get_template_part('templates/footer'), ?>
<div class="wrap container" role="document"> <div class="content row">
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">
<?php include roots_template_path(); ?>
div
tag for .main
:</div><!-- /.main -->
<?php if (roots_display_sidebar()) : ?> <aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary"> <?php include roots_sidebar_path(); ?> </aside><!-- /.sidebar --> <?php endif; ?>
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:
container
class, thus constraining its width and keeping it from stretching full-widthcontainer
class when and where we want itTo 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.