The footer I designed for this theme is made up of two rows and two main columns in the first row. We will put the static contents such as the footer company’s description, footer links, social links, and card image in CMS static blocks.
Hence, the user who manages the store can easily manage the footer from the admin panel. The final result will be similar to what is shown in the following screenshot:
All the links and the text in the footer are made of CMS blocks, so let’s see the HTML structure. The footer file footer.phtml is located at app/design/frontend/ bookstore/default/template/page/html/ like the header file.
The HTML code of the footer will look as follows:
<div class=”row”>
<div class=”col-md-4″>
<?php echo $this->getChildHtml(‘footer-company’) ?>
</div>
<div class=”col-md-8″>
<div class=”row”>
<?php echo $this->getChildHtml(‘footer-cmslinks’) ?>
<hr>
</div>
<div class=”row”>
<div class=”col-md-6″>
<?php echo $this->getChildHtml(‘footer-newsletter’) ?>
</div>
<div class=”col-md-6″>
<?php echo $this->getChildHtml(‘footer-social’) ?>
</div>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-md-12″>
<hr>
</div>
<div class=”col-md-8″>
<?php echo $this->getCopyright() ?>
</div>
<div class=”col-md-4″>
<?php echo $this->getChildHtml(‘footer-cards’) ?>
</div>
</div>
We will have the following blocks:
- CMS block: footer-company
- CMS block: footer-cmslinks
- CMS block: footer-social
- CMS block: footer-cards
- The newsletter block
- The copyright block
Let’s define the blocks in the local.xml file in the name=”footer” reference as follows:
<reference name=”footer”>
</reference>
And now, we will define the CMS block in the name=”footer” reference of the local.xml file as follows:
<block type=”cms/block” name=”footer-company” as=”footer-company”>
<action method=”setBlockId”><block_id>footer-company</block_id></ action>
</block>
<block type=”cms/block” name=”footer-cmslinks” as=”footer-cmslinks”>
<action method=”setBlockId”><block_id>footer-cmslinks</block_id></ action>
</block>
<block type=”cms/block” name=”footer-social” as=”footer-social”>
<action method=”setBlockId”><block_id>footer-social</block_id></ action>
</block>
<block type=”cms/block” name=”footer-cards” as=”footer-cards”>
<action method=”setBlockId”><block_id>footer-cards</block_id></action>
</block>
1. Creating the CMS blocks from the admin panel
Now we will create the CMS blocks from the admin panel.
- The footer-company CMS block can be created as follows:
<h4>About Book Store Theme</h4>
<p>Book Store Theme is a Magento Responsive Theme built on Bootstrap 3.0. It is compatible with the latest Magento version 1.3. This theme is responsive, so it adapt with the screen. Try to open this page with your smartphone.</p>
<a href=”http://www.themeforest.net/”>Buy now for 80$ »</a>
- The footer-cmslinks CMS block can be created as follows:
<div class=”col-md-3″>
<h4>Column Name</h4>
<ul>
<li><a href=”{{store_url=”}}about-magento-demo-store”>About Us</ a></li>
<li><a href=”{{store_url=”}}customer-service”>Customer Service</ a></li>
<li class=”last privacy”><a href=”{{store_url=”}}privacy-policy- cookie-restriction-mode”>Privacy Policy</a></li>
</ul>
</div>
<div class=”col-md-3″>
<h4>Column Name</h4>
<ul>
<li><a href=”{{store_url=”}}about-magento-demo-store”>About Us</ a></li>
<li><a href=”{{store_url=”}}customer-service”>Customer Service</ a></li>
<li class=”last privacy”><a href=”{{store_url=”}}privacy-policy- cookie-restriction-mode”>Privacy Policy</a></li>
</ul>
</div>
<div class=”col-md-3″>
<h4>Column Name</h4>
<ul>
<li><a href=”{{store_url=”}}about-magento-demo-store”>About Us</ a></li>
<li><a href=”{{store_url=”}}customer-service”>Customer Service</ a></li>
<li class=”last privacy”><a href=”{{store_url=”}}privacy-policy- cookie-restriction-mode”>Privacy Policy</a></li>
</ul>
</div>
<div class=”col-md-3″>
<h4>Column Name</h4>
<ul>
<li><a href=”{{store_url=”}}about-magento-demo-store”>About Us</ a></li>
<li><a href=”{{store_url=”}}customer-service”>Customer Service</ a></li>
<li class=”last privacy”><a href=”{{store_url=”}}privacy-policy- cookie-restriction-mode”>Privacy Policy</a></li>
</ul>
</div>
- The footer-social CMS block can be created as follows:
<ul class=”list-inline footer-social”>
<li><a class=”ico-facebook” href=”#”><span></span>Facebook</a></ li>
<li><a class=”ico-twitter” href=”#”><span></span>Twitter</a></li>
<li><a class=”ico-google” href=”#”><span></span>Google+</a></li>
</ul>
- The footer-cards CMS block can be created as follows:
<a href=”#”>
<span style=”font-size:12px; padding-right:10px;”>Secure Payments</span>
<img src=”{{skin_url=’images/cards.png’}}”>
</a>
2. Adding the newsletter block
Now, as you can see in the footer.phtml file, we generate the newsletter block with the following statement:
<?php echo $this->getChildHtml(‘footer_newsletter’) ?>
If you load the page, the CMS newsletter will not appear, but you will see it in the left column because, by default, the newsletter is located on the left column.
First, we have to remove it from the left column and add it in the footer of our XML file as follows:
<reference name=”left”>
<remove name=”left.newsletter”/>
</reference>
In the reference name footer, add the following:
<block type=”newsletter/subscribe” name=”footer.newsletter”
as=”footer_newsletter” template=”newsletter/subscribe.phtml”/>
The newsletter block is present in the subscribe.phtml file located at app/design/ frontend/base/default/template/newsletter/.
So, copy it in the relative path of your theme, and replace it with the following code:
<div class=”block block-subscribe”>
<form action=”<?php echo $this->getFormActionUrl() ?>” method=”post” id=”newsletter-validate-detail”>
<div class=”input-group”>
<span class=”input-group-addon”><?php echo $this-> (‘Newsletter’)
?></span>
<input type=”text” class=”form-control input-sm required-entry validate-email” title=”<?php echo $this-> (‘Sign up for our newsletter’) ?>” id=”newsletter” name=”email”>
<span class=”input-group-btn”>
<button class=”btn btn-default btn-sm” title=”<?php echo $this-> (‘Subscribe’) ?>” type=”submit”><?php echo $this-> (‘Subscribe’) ?></ button>
</span>
</div>
</form>
<script type=”text/javascript”>
//<![CDATA[
var newsletterSubscriberFormDetail = new VarienForm(‘newsletter- validate-detail’);
//]]>
</script>
</div>
Here, we changed the default structure of the Magento file with the input group class of Bootstrap.
Now that we have all the blocks, let’s customize the design of the custom footer with a little bit of CSS as follows:
#footer {
background-color:#FA9221;
color:rgba(0,0,0,0.3);
padding:20px 0;
border-bottom:5px solid #333;
font-size:12px,;
}
#footer h4 {
color:rgba(0,0,0,0.6);
font-size:14px;
}
#footer ul {
list-style-position:inside;
padding:0;
margin:0;
}
#footer a {
color:rgba(0,0,0,0.5);
font-size:12px;
}
#footer a:hover {
color:rgba(0,0,0,0.8);
}
#footer hr {
border-color:rgba(0,0,0,0.2);
border-style:dotted;
}
/* Social Icons */
#footer .footer-social a {
display:inline-block;
font-size:12px;
line-height:24px;
}
#footer .footer-social a span {
background:url(../images/sprite-social.png) no-repeat scroll 0 0 rgba(0,0,0,0);
display:inline-block;
float:left;
height:24px;
margin-right:6px;
padding-left:20px;
width:24px;
}
#footer .footer-social a.ico-facebook span {
background-position:0 0;
}
#footer .footer-social a.ico-twitter span {
background-position:-40px 0;
}
#footer .footer-social a.ico-google span {
background-position:-80px 0;
}
#footer .footer-social a.ico-facebook:hover span {
background-position:0 -28px;
}
#footer .footer-social a.ico-twitter:hover span {
background-position:-40px -28px;
}
#footer .footer-social a.ico-google:hover span {
background-position:-80px -28px;
}
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.