Your theme's footer is currently quite unstyled and contains a lot of links you may not require. Open your theme's footer.phtml file in the /app/design/frontend/default/m18/template/page/html/ directory and you will see something similar to the following code:
<div class="footer-container">
<div class="footer">
<div class="footer-about footer-col">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footer_about')->toHtml(); ?>
</div>
<?php echo $this->getChildHtml() ?>
<p class="bugs"><?php echo $this->__('Help Us to Keep Magento Healthy') ?> - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong><?php echo $this->__('Report All Bugs') ?></strong></a> <?php echo $this->__('(ver. %s)', Mage::getVersion()) ?></p>
<address><?php echo $this->getCopyright() ?></address>
</div>
</div>By removing the preceding highlighted code, you can begin to clean up your theme's footer and customize it for your own store. You can gain a little more control over the footer's layout by adding an additional <div> element around the content, as highlighted in the following code:
<div class="footer-container">
<div class="footer">
<div class="footer-about footer-col">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footer_about')->toHtml(); ?>
</div>
<div class="footer-col footer-categories">
<?php echo $this->getChildHtml() ?>
</div>
<address><?php echo $this->getCopyright() ?></address>
</div>
</div>You can now add some CSS to your theme's styles.css file to help provide a clearer layout for the content in the footer:
.footer-col {
float: left;
margin: 1%;
width: 48%;
}
.footer address {
clear: both;
text-align: center;
}
.footer ul {
list-style: none;
}
.footer ul li {
display: block;
}
.footer a {
color: #333;
text-decoration: none;
}
.footer a:active, .footer a:hover {
text-decoration: underline;
}You can also add some styling for specific content blocks in the footer you have created:
.footer-about p:first-of-type {
color: #e57d04;
font-size: 135%;
}
.footer-categories {
text-align: right;
}If you now look at your theme's footer, you will see that it looks much more fitting for a Magento store:
Many stores include a list of their top-level (primary) categories in their footer to help customers navigate to their products more easily. You can do this by adding a simple snippet of code to the footer template you have already customized. Open your theme's footer.phtml file and add the following highlighted code:
<div class="footer-container">
<div class="footer">
<div class="footer-about footer-col">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footer_about')->toHtml(); ?>
<?php
$_helper = Mage::helper('catalog/category'),
$_categories = $_helper->getStoreCategories();
if (count($_categories) > 0): ?>
<ul>
<?php foreach($_categories as $_category): ?>
<li><a href="<?php echo $_helper->getCategoryUrl($_category) ?>"><?php echo $_category->getName() ?> </a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
<div class="footer-col footer-categories">
<?php echo $this->getChildHtml() ?>
</div>
<address><?php echo $this->getCopyright() ?></address>
</div>
</div>Tip
For more information on the Mage Helper class, see the Magento documentation at http://docs.magentocommerce.com/Mage_Core/Mage_Core_Helper_Abstract.html.
Once you have saved this change, you should see your top-level categories appear in the footer:
