Adding a H1 Logo to Magento Homepage
While building and optimising a Magento shop for a client’s website we decided to use CSS image replacement with a H1 on their logo as the homepage was predominately taken up with top sellers.
However Magento only uses one header.phtml across all the templates and we certainly didn’t want the same H1 across all the category and product pages. So we had to come up with a way to have two logos, one for the homepage and another for every other page on the client’s website.
One way to do this would be to create two header.phtml files but as we were only wanting two variations of the logo this seemed rather unnecessary. Instead we created two logo.phtml files, one with the normal image link to the logo (logo.phtml) and another with a H1 (logo-home.phtml) and saved them within theme/template/page/html.
Firstly we needed to create a block for the logo.phtml as prior to this the logo was just being called directly from inside the header.phtml file. So we created the logo.phtml file and placed the link to the logo within it, we then referenced the logo.phtml file in theme/layout/page.xml between the opening and closing header block tags.
{code type=html}
<block type=”core/template” name=”logo” as=”logo” template=”page/html/logo.phtml”/>
{/code}
So altogether it looked something like this:
{code type=html}
<block type=”page/html_header” name=”header” as=”header”>
<block type=”checkout/cart_sidebar” name=”cart_sidebar” as=”topcart” template=”checkout/cart/header_sidebar.phtml”/>
<block type=”core/template” name=”logo” as=”logo” template=”page/html/logo.phtml”/>
<block type=”core/text_list” name=”top.menu” as=”topMenu”/>
</block>
{/code}
We then needed to call this block from inside the header.phtml file using the following line of code to replace the existing logo <img> link:
{code type=php}
<?php echo $this->getChildHtml(‘logo’)?>
{/code}
We were pretty much back to where we started the same logo across all the pages, however there’s a little gem of Magento code that allows you to differentiate blocks on the homepage. By adding the following code to the bottom of the page.xml it replaced our logo.pthml with our second file with the H1 (logo-home.php):
{code type=html}
<cms_index_index>
<reference name=”header”>
<action method=”unsetChild”><name>logo</name></action>
<block type=”page/html_header” name=”logo” as=”logo” template=”page/html/logo-home.phtml”/>
</reference>
</cms_index_index>
{/code}
Now we had a H1 logo on the homepage and just a normal logo image on every other page. Perfect.
