Move Magento mini search form to my template's header or footer

Below is a quick beginners guide to moving the search bar to your desired location within Magento. To begin, you first you need to create or update your local.xml file if you do not have a local.xml file you can create one in app->frontend->[Package Name]->[Theme Name]->layout->local.xml Once this is created you can copy exactly what I have in this post into that file for a start of how to use one. DO ALL UPDATES THROUGH A LOCAL.XML file not through catalog.xml !! This will make upgrades significantly easier later down the road. Additionally, you will be able to quickly see all changes you have made to your site in one file. The below example will add it to the root reference name which will be available on all pages but easily called in template->page->1column.phtml or 2column-left.phtml 3column.phtml etc.

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <reference name="root">
            <block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
        </reference>
    </default>
</layout>
Then call it in your current theme's header.phtml by adding this line of code
<?php echo $this->getChildHtml(‘topSearch’) ?>
If this file does not exist in your theme, create a copy of: app/design/frontend/base/default/template/page/html/header.phtml and place it into: app/design/frontend/yourPackage/yourTheme/template/page/html/header.phtml Now you can use the "reference name" and "as" name like the above section. For example you could use the similar setup below to reference the footer block to add the search feature. For education "as" names are what are used in .phtml files. and "name" is how a block is referenced within xml files. So in the above example. I am adding the search field to the root content area and then calling it in my .phtml file with the "as" name of "topSearch"
<?xml version="1.0" encoding="UTF-8"?>
    <layout>
    <default>
        <reference name="footer">
            <block type="core/template" name="footer.search" as="footerSearch" template="catalogsearch/form.mini.phtml"/>
        </reference>
    </default>
</layout>
Then call it in footer.phtml with
<?php echo $this->getChildHtml('footerSearch') ?>
  Hopefully this helps some of you new to Magento, happy coding and good luck!!

Leave a Reply