Add CMS Page Links to Top Navigation in Magento

I had a site running on magento 1.6.2 CE.

To add a menu item, first of all you need to find out where it is added into template file.

Following file is rendering categories as a menu on top navigation

app/design/frontend/base/template/catalog/navigation/top.phtml

Basically you need to modify this file and add links in list.

To make the changes upgrade proof, you should copy this file and paste it in your template directory

e.g. app/design/frontend/default/YourThemeName/template/catalog/navigation/top.phtml

Now you add a link as follow:

[code:html]
<?php $_menu = $this->renderCategoriesMenuHtml(0,’level-top’) ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
<li><a href="/">Home</a><li>
<?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>
[/code]

But this way you will need to modify file each and every time when you want to modify links. So it is better to load a static CMS block. To do so, render two CMS block as shown below:

[code:html]
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘navbar_links1’)->toHtml() ?>
        <?php echo $_menu ?>
<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘navbar_links2’)->toHtml() ?>
    </ul>
</div>
<?php endif ?>
[/code]

Now create those two CMS blocks in CMS -> Static Block -> Add New Block

Block identifier: navbar_links1

[code:plain]
<li><a href="{ {store url=""} }"><span>Home</span></a></li>
<li><a href="{ {store url="introduction"} }"><span>Introduction</span></a></li>
[/code]

Similarly create another block for navbar_links2. Please Note that, when you edit them, HTML editor automatically adds <ul> tag surrounding it. You should remove it whenever you edit blocks.

Above trick was working perfectly until I upgrade my site to Magento Community addition 1.7.

I take a look around page.xml layout, and I noticed that, now magento is rendering menu from the following template file:

app/design/frontend/base/template/page/html/topmenu.phtml

So in order to work our trick, you need to modify above file by the way did it before.

First copy that file to following location:

app/design/frontend/default/YourTemplateName/template/page/html/topmenu.phtml

Make the same changes as we did it in top.phtml (show in listing no 2). Delete our old modified file app/design/frontend/default/YourThemeName/template/catalog/navigation/top.phtml as we don’t need it now. Flush the cache and you are done!

Your menu links will be back!