Magento. How to add a custom link to header links

In this tutorial you will learn how to add Top Link and/or Swipe Menu link item in Magento template(s).

Magento. How to add a custom link to header links

1. Create a new page if you have not done it yet. In our example, we will add a new page and name it New with URL KEY new:

   

2. Open app\design\frontend\default\themeXXX\layout\customer.xml file using an FTP client or File Manager in your hosting Cpanel.

3. Find a
   <reference name="top.links"> in Default Layout section.

   Add the following code to add new item:

   <action method="addLink" translate="label title"><label>New</label><url>new
   
   </url><title>New</title><prepare/><urlParams/><position>60</position></action>
   

4. Note that if you do not have "top.links" reference, you need to add it:

   <reference name="top.links">
   
   <action method="addLink" translate="label title"><label>New</label><url>new
   
   </url><title>New</title><prepare/><urlParams/><position>60</position></action>
   
   </reference>
   

   

5. Check your label, title and url values.

6. Save your changes and open your site to check the result:

   

7. In order to add a new item to the Swipe Menu section (mobile layout), open app\design\frontend\default\themeXXX\template\page\html\header.phtml file and locate the following section:

   <div class="swipe-menu">
   

8. Add the following code for your new menu item:

   <?php echo $this->getChildHtml('topLinks') ?> :
   <a href="<?php echo $this->getUrl('new') ?>" title="<?php echo $this->__('New') ?>" class="home-link"><?php echo $this->__('New') ?>
   </a>   
   

   

9. Save your changes and open your site to check the result:

   

Thank you for reading this tutorial. Now you know how to add Top Link and Swipe Menu link item in Magento template(s).

Feel free to check the detailed video tutorial below:

Magento. How to add a custom link to header links