A quick tip for our theme is to define the main template for the site in the default handle.
To do this, we have to define the template into the most important reference, root. In a few words, the root reference is the block that defines the structure of a page.
Let’s suppose that we want to use a main structure having two columns with the left sidebar for the theme To change it, we should add the setTemplate action in the root reference as follows:
<reference name=”root”>
<action method=”setTemplate”>
<template>page/2columns-left.phtml</template>
</action>
</reference>
You have to insert the reference name “root” tag with the action inside the default handle, usually before every other reference.
1. Defining the HTML5 boilerplate for main templates
After integrating Bootstrap and jQuery, we have to create our HTML5 page structure for the entire base template.
The following are the structure files that we created in the previous chapter and are located at app/design/frontend/bookstore/template/page/:
• 1column.phtml
• 2columns-left.phtml
• 2columns-right.phtml
• 3columns.phtml
The Twitter Bootstrap uses scaffolding with containers, a row, and 12 columns. So, its page layout would be as follows:
<div class=”container”>
<div class=”row”>
<div class=”col-md-3″></div>
<div class=”col-md-9″></div>
</div>
</div>
This structure is very important to create responsive sections of the store. Now we will need to edit the templates to change to HMTL5 and add the Bootstrap scaffolding.
Let’s look at the following 2columns-left.phtml main template file:
<!DOCTYPE HTML>
<html>
<head>
<?php echo $this->getChildHtml(‘head’) ?>
</head>
<body
<?php echo $this->getBodyClass()?’ class=”‘.$this-
>getBodyClass().'”‘:” ?>>
<?php echo $this->getChildHtml(‘after_body_start’) ?>
<?php echo $this->getChildHtml(‘global_notices’) ?>
<header>
<?php echo $this->getChildHtml(‘header’) ?>
</header>
<section id=”after-header”>
<div class=”container”>
<?php echo $this->getChildHtml(‘slider’) ?>
</div>
</section>
<section id=”maincontent”>
<div class=”container”>
<div class=”row”>
<?php echo $this->getChildHtml(‘breadcrumbs’) ?>
<aside class=”col-left sidebar col-md-3″>
<?php echo $this->getChildHtml(‘left’) ?>
</aside>
<div class=”col-main col-md-9″>
<?php echo $this->getChildHtml(‘global_messages’) ?>
<?php echo $this->getChildHtml(‘content’) ?>
</div>
</div>
</div>
</section>
<footer id=”footer”>
<div class=”container”>
<?php echo $this->getChildHtml(‘footer’) ?>
</div>
</footer>
<?php echo $this->getChildHtml(‘before_body_end’) ?>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
You will notice that I removed the Magento layout classes col-main, col-left, main, and so on, as these are being replaced by the Bootstrap classes.
I also added a new section, after-header, because we will need it after we develop the home page slider. In the next chapter, we will gain more information on this topic.
Note: Don’t forget to replicate this structure on the other template files 1column.phtml, 2columns-right.phtml, and 3columns.phtml, changing the columns as you need.
Now, we will see how to develop the main sections of the theme header and footer.
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.