Add CMS page links to top navigation in magento

Hello friends,

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:

	<?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 ?>

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:

	<?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 ?>

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

Block identifier: navbar_links1

	<li><a href="{ {store url=""} }"><span>Home</span></a></li>
	<li><a href="{ {store url="introduction"} }"><span>Introduction</span></a></li>

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!

Comments

atwix

Hi. Thanks for the useful article! Our team has similar solution of this topic we are glad to share information in the following article

http://www.atwix.com/magento/how-to-add-a-new-item-to-the-navigation-menu/

you’re welcome to check it out and leave your feedback

June 12, 2012, 9:55 AM

Brian

beautiful!

don't know why basic menu configuration is not just built into magento

June 21, 2012, 7:38 PM

sinini

To avoid the <ul>'s added by the HTML-Editor i used the str_replace method:

$ulreplace = array ('<ul>', '</ul>');

echo str_replace($ulreplace, "",$this->getLayout()->createBlock('cms/block')->setBlockId('navbar_links2')->toHtml());

September 17, 2012, 4:03 AM

Brian: Sinini, Thanks to your addition to the code, i was able to get it to work in 1.7.. They really need to have customized menus in the software application itself like wordpress, where it is a breeze to make custom menus anywhere.; September 25, 2012, 8:36 AM; Reply

salim: when i follow this tutorial an extra <p class=""> is coming before <li>,so this not working for me. i use mage 1.7; October 15, 2012, 8:27 AM; Reply

Nana: Hi, i follow all steps exactly, the cms blocks exist and modified topmenu.phtml but not working :(. Thanks; October 30, 2012, 2:37 PM; Reply

Nana

Ok, i found the problem.

First, if menu is empty $_menu = $this->getHtml('level-top'), not print nothing. Second, when print, must be modified styles. Thanks.

October 30, 2012, 3:33 PM

Detzee: How I can active the custom link when a page be calling?; November 7, 2012, 8:48 AM; Reply

Mahesh: Nice Article. Excellent work, This will reduced my work.; December 21, 2012, 6:08 AM; Reply

sonal: HOW TO ADD TOP NAVIGATION IN MAGENTO. ?; February 7, 2013, 3:00 AM; Reply

NOTE : Comments are moderated, and will not appear until the author has approved them.

Add CMS page links to top navigation in magento

Comments

Categories

Tag Cloud