Recently, I received an email from one of my customer, telling me that he has been struggling with adding homepage link to top menu of his Magento site. I will write down this step by step tutorial so that anyone who are looking for the solution can benefit. In this tutorial, we wil learn how to add not just homepage link, but a custom link of any pages you want to Magento top menu  (main navigation), tested with Magento 1.9 and Magento 1.8
In this theme tutorial, we will add custom link to Magento top menu by changing template file, this is the quickest and simplest way to add a custom link to Magento theme.
Step 1
First, enable template path hint  mode to find out path to your template file. Go to Backend > Configuration > Advanced > Developer, in current configuration scope select Main website. Select yes for Template Path Hint option and save changes.
Step 2
Refresh your homepage and you will see path to layout file of Top navigation as below
As you can see, layout file for top navigation is located in:Â app/design/frontend/rwd/default/template/page/html/topmenu.phtml
Step 3
Now open your server’s file manager and go to the file displayed on template hint, in this example:Â app/design/frontend/rwd/default/template/page/html/topmenu.phtml
Look for:
1 2 3 4 5 | <nav id="nav"> <ol class="nav-primary"> <?php echo $_menu ?> </ol> </nav> |
and add this line of code inside <ol> tag.
1 | <li><a href="<?php echo $this->getUrl('') ?>"><?php echo $this->__('Home') ?></a></li> |
Now it looks like this:
1 2 3 4 5 6 | <nav id="nav"> <ol class="nav-primary"> <li><a href="<?php echo $this->getUrl('') ?>"><?php echo $this->__('Home') ?></a></li> <?php echo $_menu ?> </ol> </nav> |
Save change and flush Magento cache, you will see the result as following:
The code above is for home link, for custom link, you can changes url target in getUrl('your url') and anchor text in $this->__('your displayed text') . For example
1 | <li><a href="<?php echo $this->getUrl('magentoexplorer') ?>"><?php echo $this->__('Magento Explorer') ?></a></li> |
This will create “Magento Explorer” button that points to yoursite.com/magentoexplorer page
Step 4
We can see home button appears on top menu, however, it’s not in line which breaks your design. We will need to do some tweak with css class to home button to make it neat as other items on Topmenu, or simply you can use this trick.
Inspect what css class is being used for topmenu items and use it ass class for home button, in this example, my top menu css class is level0 nav-1 first
Now just assign this css class to your home button:
1 2 3 4 5 6 | <nav id="nav"> <ol class="nav-primary"> <li class="level0"><a href="<?php echo $this->getUrl('') ?>"><?php echo $this->__('Home') ?></a></li> <?php echo $_menu ?> </ol> </nav> |
From now on, you can tweak home button with your css html knowledge.
Check this video if you are still not clear:
1 Comment
Thanks for your tutorial, I managed to add links to Most popular products page on my Magento site after following this turtorial