The next step in creating our new Magento theme is to create skeleton templates for our design. Skeleton templates provide the overall page structure for our Magento themes.
For example, we might want three different views in our store:
These three different options for your store would be achieved by creating three separate skeleton templates, and changing which of these templates is assigned to each module or page within our store using layout. We will use our three-column design throughout our new theme to ensure simplicity while we create our Magento theme. Our theme's skeleton template will look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <?php echo $this->getChildHtml('head') ?> </head> <body> <div id="wrapper"> <?=$this->getChildHtml('header')?> </div> <div id="main"> <div id="content"> <?=$this->getChildHtml('content')?> <div id="footer"> <?=$this->getChildHtml('footer')?> </div><!--/footer--> </div><!--/content--> <div id="left"> <?=$this->getChildHtml('left')?> </div><!--/promo--> <div id="right"> <?=$this->getChildHtml('right')?> </div><!--/column--> </div><!--/main--> <?php echo $this->getChildHtml('before_body_end') ?> </div><!--/wrapper--> <?php echo $this->getAbsoluteFooter() ?> </body> </html>
We'll now save this skeleton template as default.pthml
in the app/design/frontend/default/cheese2/template/page
directory of our Magento installation, wheredefault
is the name of the Magento interface we're using, and cheese2
is the name of our new Magento theme.
The getChildHtml
method used above inserts the relevant structural blocks in to the page. The value passed as a parameter to the getChild.Html
method is the way in which each structural block is identified in the Magento layout files. Take this as an example:
<?=$this->getChildHtml('footer')?>
The value footer
is passed as the parameter for the getChildHtml
method, which references the footer.phtml
template block in the app/design/frontend/default/cheese2 /template/page/html
directory.
We need to assign our new skeleton template to our Magento theme. We'll do this by opening the page.xml
layout file in the app/design/frontend/default/cheese2/layout
directory of our Magento store's installation, and change the template value to page/default.phtml
.
<layout version="0.1.0">
<default>
<block type="page/html" name="root" output="toHtml" template="page/default.phtml">
<!—layout continues -->
When the skeleton template is complete, we can begin to create blocks to populate content within the skeleton template.