Creating a custom base template

As a further testament to the power of the Roots theme, while the base.php file dictates fundamental layout for the entire site, we have the freedom to set up a custom base template to customize the fundamental layout structure when and where needed. We'll do that for our home page as shown in the following steps:

  1. Duplicate the base.php file.
  2. Name the new copy base-page-home.php. Because our page uses the page-home.php template file, Roots will check for a base template file by this name, and if it is found, Roots uses this file as the template for our home page.
    Creating a custom base template

    Note

    For more information on this base-template-choosing function, see the Roots documentation at http://roots.io/an-introduction-to-the-roots-theme-wrapper/.

  3. Open the new base-page-home.php file in your editor.
  4. Find the div tag of the wrap class and remove the container class from it so that it now reads as follows:
    <div class="wrap" role="document">
  5. We'll provide the container class where we need it, specifically for our columns below the carousel. The same goes for the row and column classes. So, we'll remove those from this template as well.
  6. Just after this is the div tag of the content class; remove the row class so that this line now reads simply as follows:
    <div class="content">
  7. Finally, we need to remove the php tag from div class as main as we don't need the Bootstrap column class provided by roots_main_class. This line should now simply read as follows:
    <div class="main" role="main">
  8. Save your results.
  9. Refresh the Home page in your browser.

    You should see the carousel expand to full width.

    Creating a custom base template

That's the magic!

Recall that we have provided the container, row, and column classes we need for the columns in what we've pasted into the WYSIWYG editor. Thus, these are constrained as they should be.

We are almost ready to bring in our custom styles. First, before finishing with our markup, let's clean things up and make them easier to maintain.

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

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