How to add custom link or homepage link to top menu in Magento 1.9

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:

and add this line of code inside <ol> tag.

Now it looks like this:

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

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:

Save change and see result:

From now on, you can tweak home button with your css html knowledge.

Check this video if you are still not clear: