Add block in header layout

Question

I have added my custom module block in header in layout like below

pinsearch.xml

 <default> 
   <reference name="header">
        <block type="core/template" name="pinsearch" as="pinSearch" template="pinsearch/pinsearch.phtml" output="toHtml"/>
     </reference> 
  <default> 

pinsearch.phtml

<form action="<?php echo $this->getBaseUrl()."pinsearch/index/search"?>" method="get" id="search_pin_form">
<div class="input-box">
    <label for="search"><?php echo $this->__('Search:') ?></label>
     <input id="pinsearch" type="search" name="<?php echo "pin" ?>" value="" class="input-text required-entry" maxlength="" placeholder="<?php echo $this->__('Enter here...') ?>" />
    <button type="submit" title="<?php echo $this->__('Search') ?>" class="button search-button"><span><span><?php echo $this->__('Search') ?></span></span></button>
</div> 

In frontend, I got my custom search form but not in header. This form showing after wrapper div block

When i add this block in footer only, its showing on both footer and after wrapper div block too.

I'm totally confusing. Have any idea why its proceeding like this?

Answer 1

When you add a block directly inside header block, magento will put your block just after all of it's child block that are added via other layout xml files that are processed before your pinsearch.xml.

Basically a header block contains following blocks by default. This is added via page.xml which will get processed before your pinsearch.xml

<block type="page/html_header" name="header" as="header">
    <block type="page/template_links" name="top.links" as="topLinks"/>
    <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
    <block type="core/text_list" name="top.menu" as="topMenu" translate="label">
        <label>Navigation Bar</label>
        <block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml"/>
    </block>
    <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
        <label>Page Header</label>
        <action method="setElementClass"><value>top-container</value></action>
    </block>
    <block type="page/html_welcome" name="welcome" as="welcome"/>
</block>

see top.container (which is the wrapper block that you are mentioning, I hope) block is loading here. So when we add your block directly under header block, it just come just below welcome (This is not accurate. But if we consider page.xml only, this is true :-))

So if you need your block just inside the wrapper block, then what you need to is include your block inside wrapper block itself

<default> 
   <reference name="header">
       <reference name="top.container">
            <block type="core/template" name="pinsearch" template="pinsearch/pinsearch.phtml"/>
       </reference>
     </reference> 
  <default> 

Now suppose you need to include the block as child of header block itself, but need to display above the wrapper block (or any other child block), then what you need to do is.

<default> 
   <reference name="header">
        <block type="core/template" name="pinsearch" as="pinSearch" template="pinsearch/pinsearch.phtml"/>
     </reference> 
  <default> 

Then go to app/design/frontend/<package>/<theme>/template/page/html/header.phtml and then specify your block wherever you needed to display it as like this

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

Hope that clears your doubt.. Happy coding sis :-)