Magento Header – Add Custom Module HTML in Magento 1.7 and 1.8

When you want to customize header block, there are different approach to do that. I will point out some of the ways that you can rely on. You can choose the best one you need

1. Use the powerful theme fallback property of Magento

Magento by default uses base > default package-theme directory. That means it really uses header template that is defined inside this package-theme directory. ie

 app\design\frontend\base\default\template\page\html\header.phtml

Now you need to customize header section, then the best way is, use another package-theme directory for your application. Let it be some_package > some_theme. (You can set a new package and theme for your current store through admin panel). Now what you need to do is, copy the original header.phtml file from base > default package-theme directory and paste it into your custom pacakge-theme directory. ie to this location

app\design\frontend\some_package\some_theme\template\page\html\header.phtml

You are done. Now instead of the default header.phtml, magento now will use header.phtml inside of your custom package-theme directory.

In most of the cases, this is the most recommended method for customization.

2. Use your own custom template

Now you dont need to use header.phtml, instead you need to use your own custom template for it. For this, you can use your first method. That is change the template name through layout update and then use your custom template

<reference name="header">
      <action method="setTemplate"><template>customizer/header.phtml</template></action>
</reference>

Now define your custom template file at app\design\frontend\some_package\some_theme\template\customizer/header.phtml. You are done.

3. Need to add some additional functionalities

Suppose you need to do some additional functionality. Then first define a block that will manage this additional functionality. For this you can use core/template block, if the additional changes are minor. Or use your own custom block. You can do this like this.

a. Define your block in layout update

<reference name="header">
      <block type="customizer/header" name="child.block" as="child.block" template="customizer/header.phtml" />
</reference>

Now you included you custom block that is going to manage additional features inside header block. Job is not over.

Note: you have used header as the name for your custom block.It is wrong. All block names should be unique.

B. Call your custom block inside header block's template

header block is the parent block for your custom block. It will not render it's child block content for you. Due to this, you need to manually call your block inside the header block's template file. This will allow you to manually position your block.

File : app\design\frontend\<your_package>\<your_theme>\template\page/html/header.phtml

  <div><?php echo $this->getChildHtml('child.block');  ?></div>

c. Define template that holds your custom block

Now define template for your custom block. This way magento will render your custom block's template content inside header block.

 app\design\frontend\<your_package>\<your_theme>\template\customizer/header.phtml

EDIT

so you need custom header only for a custom page. For this you can use second method itself.

File : app/design/frontend/<your_package>/<your_theme>/layout/local.xml

<customizer_index_index>
    <reference name="root">
        <block type="customizer/header" name="header" as="header">
            <action method="setTemplate"><template>customizer/header.phtml</template></action>
        </block>
    </reference>
</customizer_index_index>

Of course, you need to create Your_Customizer_Block_Header class which extends Mage_Page_Block_Html_Header as well.

Then define your custom template. Done!.

That's it. I think you are looking for the third solution right now. Go through it and ask if you have any doubts

I cant see any menu codes here. So provide us with adminhtml.xml if any.

However I will give you my random thoughts here. Your admin route is setup like this.

 <routers>
    <pets>
        <use>admin</use>
        <args>
            <module>Ffriends_Pets</module>
            <frontName>pets</frontName>
        </args>
    </pets>
</routers>

What this do is setuping an admin router for your module. It has no problem as of now. But this will leads all of your module's url (admin side) looks like this

  www.domain.com/pets/controller/method

But if you have a look on all of admin urls, it follows this convention

  www.domain.com/admin/controller/method

If you need the same effect, then you need to change your admin router setup like this.

<admin>
    <routers>
        <adminhtml>
            <args>
                <modules>
                    <ffriends_pets before="Mage_Adminhtml">Ffriends_Pets_Adminhtml</ffriends_pets >
                </modules>
            </args>
        </adminhtml>
    </routers>
</admin>

Second point comes in layout xml file. As per your current configuration, your layout xml file looks good. However if you adopt the method that I put forward, then there is slight change comes in layout xml file. Layout handle that you are currently using pets_adminhtml_pets_index will change to adminhtml_pets_index. This is because instead of pets router configuration now we are using adminhtml router configuration which is defined inside the core module Mage_Adminhtml.

Now as per the layout xml and configuration, there should be a controller present in your module. It would be

File : app/code/local/Ffriends/Pets/controllers/Adminhtml/PetsController.php

<?php
class Ffriends_Pets_Adminhtml_PetsController extends Mage_Adminhtml_Controller_Action
{
     public function indexAction()
     {
         $this->loadLayout();
         $this->renderLayout();
     }
}

Without this controller, nothing is going to show in admin side.

Side Note :- In order to have a custom menu, you need additional configurations. It will be normally do in adminhtml.xml file. There are plenty of tutorials available outside for set uping a menu. So google it.