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

1

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.

enable template path hint magento

Step 2

Refresh your homepage and you will see path to layout file of Top navigation as belowenable template path hint magento 1

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:add home button to magento top menu

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

add home button to magento top menu 2

Now just assign this css class to your home button:

 

Save change and see result:add home button to magento top menu result

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

Check this video if you are still not clear:

Rate this post

Share.

About Author

Brian is a Magento developer with 5 years of experience with customizing Magento extensions, Magento templates. He's main author at Magento explorer

1 Comment

  1. Thanks for your tutorial, I managed to add links to Most popular products page on my Magento site after following this turtorial

Leave A Reply