create custom header top links in magento

Introduction:

Here I will explain create custom header top links in magento.

Description:

If you are wondering what are top links, it’s the links that you see in the header section i.e My Cart, My Account, My Wishtlist, etc.

Top-links are managed in magento through layout xml files. To add a link to top links, we need to add xml code to layout files.

Existing Top Links

Lets first look at where the existing top links are coming from.
 My Account: link is found in the customer.xml file.

<default>

    <!-- Mage_Customer -->

    <reference name="top.links">

        <action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>10</position></action>

    </reference>

</default>

 

 To know the meanings of these please read our blog on layouts.
So, here we are taking the reference of “top.links” block, and calling the “addLink” function on that block.
The “top.links” block is defined in page.xml

 

<block type="page/template_links" name="top.links" as="topLinks"/>

 

The “addLink” function is defined in Mage_Page_Block_Template_Links. The definition of the function is

 

public function addLink($label, $url='', $title='', $prepare=false, $urlParams=array(),

        $position=null, $liParams=null, $aParams=null, $beforeText='', $afterText='')

 

Also the phtml file where the html code for this is written is ‘page/template/links.phtml’.

My Wishlist: The xml for this is found at wishlist.xml

 

<reference name="top.links">

     <block type="wishlist/links" name="wishlist_link">

         <action method="addWishlistLink"></action>

     </block>

 </reference>

 

My Cart and Checkout: The xml for these is found at checkout.xml

<default>

 

        <!-- Mage_Checkout -->

        <reference name="top.links">

            <block type="checkout/links" name="checkout_cart_link">

                <action method="addCartLink"></action>

                <action method="addCheckoutLink"></action>

            </block>

        </reference>

        <reference name="right">

            <block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml" before="-">

                <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/sidebar/default.phtml</template></action>

                <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/sidebar/default.phtml</template></action>

                <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/sidebar/default.phtml</template></action>

            </block>

        </reference>

        <reference name="head">

            <block type="core/template" name="optional_zip_countries" as="optional_zip_countries" template="directory/js/optional_zip_countries.phtml" />

        </reference>

 

    </default>

 

Login and Log Out: links are found in the customer.xml

 

<default>

        <!-- Mage_Customer -->

        <reference name="top.links">

            <action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>10</position></action>

        </reference>

    </default>

 

Adding More Links To The Top Links

 

Suppose we need to add a new link to top links, lets say a link for a CMS page called Terms and Conditions. To do this open a layout file, let say customer.xml and add the below code:

<default>

<reference name="top.links">

  <action method="addLink" translate="label title">

    <label>Terms and Condition</label>

    <url>terms</url>

    <title>Terms and Condition</title>

    <prepare>true</prepare>

    <position>2</position>

  </action>

</reference>

</default>

 

This code should a new link to top links.

If you have any queries feel free to leave a comment.