Updating footer in a Magento theme

I’m still working on the Magento theme for my upcoming t-shirt site. I recently started updating the footer. It took some time to figure out how to add/remove the footer links as well as add other items such as a newsletter block. I thought I could update a single file, but it wasn’t that simple.

Initially I wanted to add the newsletter block to the footer. So first I updated the template by creating two divs inside the “footer” class (/app/design/frontend//default/template/page/html/footer.phtml). I then placed the newsletter block inside the “footer-right” class.

<div class="footer-container">
 
    <div class="footer">
    	<div class="footer-left">
 
	</div>
	<div class="footer-center">
                 <?php echo $this->getChildHtml() ?>
                 <address><?php echo $this->getCopyright() ?></address>
        </div>
        <div class="footer-right">
		<?php echo $this->getChildHtml('bottomNewsletter') ?> 
	</div>
    </div>
</div>

Next, needed to update the layout. I actually had 3 options. I could update the file newsletter.xml (/app/design/frontend//default/layout/newsletter.xml)

<default>
    <!-- Mage_Newsletter -->
    <!-- add newsletter block to footer -->
    <reference name="footer">
        <block type="newsletter/subscribe" name="bottom.newsletter" as="bottomNewsletter" template="newsletter/subscribe.phtml"/>
    </reference>
</default>

I also had the option of adding the newsletter in the main layout file (/app/design/frontend//default/layout/newsletter.xml):

<default translate="label" module="page">
    <label>All Pages</label>
...
    <block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">
        <block type="page/html_wrapper" name="bottom.container" as="bottomContainer" translate="label">
            <label>Page Footer</label>
            <action method="setElementClass"><value>bottom-container</value></action>
        </block>
        <block type="page/switch" name="store_switcher" as="store_switcher" template="page/switch/stores.phtml"/>
            <block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml"/>
            <block type="newsletter/subscribe" name="bottom.newsletter" as="bottomNewsletter" template="newsletter/subscribe.phtml"/>
        </block></default>

And lastly, to add the newsletter block I could update the file local.xml (/app/design/frontend//default/layout/local.xml). This seems to be the preferred approach – especially if don’t to change Magento’s core layout files. Note: You may have to create this file.

<default>
    <!-- Mage_Newsletter -->        
    <reference name="footer">
        <block type="newsletter/subscribe" name="bottom.newsletter" as="bottomNewsletter" template="newsletter/subscribe.phtml"/>
    </reference>
</default>

Whichever option you choose, if you refresh your browser (and Magento cache), the newsletter block with display in the footer, but in two places – in the center and and in the “footer-right” div. It appears on the right because we explicitly added it to “footer.phtml”:

<div class="footer-right">
    <?php echo $this->getChildHtml('bottomNewsletter') ?> 
</div>

The reason it displays in the center is because of first line of code in the “footer-center” class:

<div class="footer-center">
    <?php echo $this->getChildHtml() ?>
    <address><?php echo $this->getCopyright() ?></address>
</div>

As the name suggests, the “getChildHtml” method retrieves the html of the children in a block (in this case, the footer container). If No parameters are sent to the method, the method will retrieve all children. Magento retrieves the information for each child in the layout file(s) (page.xml and – in this case, local.xml). So, essentially, Magento retrieves:

<default translate="label" module="page">
    <label>All Pages</label>
    ...
    <block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">
        <block type="page/html_wrapper" name="bottom.container" as="bottomContainer" translate="label">
            <label>Page Footer</label>
            <action method="setElementClass"><value>bottom-container</value></action>
        </block>
        <block type="page/switch" name="store_switcher" as="store_switcher" template="page/switch/stores.phtml"/>
        <block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml"/>
        <!-- This newsletter block is being retrieved from local.xml 
        <block type="newsletter/subscribe" name="bottom.newsletter" as="bottomNewsletter" template="newsletter/subscribe.phtml"/>
    </block></default>

So the getChildHtml method retrieves all children of the footer block and places the child’s template in the container from which the method is called. This causes the template to be displayed in in the center.

Footer Links and Static Blocks

I noticed that one of the children being retrieved is the “footer_links” block (in page.xml).

<block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml"/>

I decided to change the getChildMethod in “footer.phtml”:

<?php echo $this->getChildHtml('footer_links'); ?>

When I refreshed my browser, the newsletter block only displayed in the “footer-right” class (as it should), but some of the menu items were missing: About Us, Customer Service, Privacy Policy.

I found out that these menu items were created in a static block. In administration, go to CMS->Static Blocks. You will find the “footer_links” block on the list. Edit this block to add/remove menu items.

The display of the “footer_links” static block is controlled by CMS layout file (/app/design/frontend//default/layout/cms.xml).

<default>
    <reference name="footer">
        <block type="cms/block" name="cms_footer_links" before="footer_links">
            <!--
              The content of this block is taken from the database by its block_id.
              You can manage it in admin CMS -> Static Blocks
            -->
            <action method="setBlockId"><block_id>footer_links</block_id></action>
        </block>
    </reference>
</default>

So I decided to explicitly add the “footer_links” static block to footer.phtml:

<?php echo $this->getChildHtml('cms_footer_links') ?>
<?php echo $this->getChildHtml('footer_links') ?>

When I refreshed my browser, the newsletter was on the right and both menu blocks displayed.

More Footer Links

I also wanted to know how the other “footer_links” blocks is displayed. Just like the CMS’s static block was displayed in cms.xml, each of the other menu iterms are added to the relevant layout file:

Site Map:
/app/design/frontend//default/layout/catalog.xml

Search Terms and Advanced Search:
/app/design/frontend//default/layout/catalogsearch.xml

Orders and Returns:
/app/design/frontend//default/layout/sales.xml

Contact Us:
/app/design/frontend//default/layout/contacts.xml

Well that’s it. You should now know how to add/remove footer links (and add a newsletter, if you so choose). Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks