Magento Widget – Pages in your top menu
Please be aware that as of version CE 1.7 you should get version 0.2.0 of this module, since Magento has altered the way of showing the top menu.
All instructions below are the same however, for both versions. The only difference is the location and the name of the phtml file that renders the menu. Please find details below.
The main top menu in Magento is the perfect navigation bar for your customers. You can easily add Categories into the menu, by selecting ‘Yes’ from the dropdown ‘Include in Navigation Menu’ when you manage your Categories in the backend of Magento.
Adding a Page into the top navigation menu though, has always been a bit of a hassle. There are numerous solutions to accomplish this task, but the one I prefer is a mixture of a custom CMS Static Block, 1 line of code implementation and using a custom made widget. Although at first glance you might think this is a bit of an overkill, I’d like to keep in mind that in most cases my clients must be able to use Magento in a simple way. And adding Pages to a menu… well, that should not be too hard for them, should it? Since we’re more or less living in the point ‘n click ‘n that’s that – world, we have to provide our clients a simple way to accomplish a simple task.
So, let’s make things easy for both developer and client and follow the instructions. Please keep in mind that this Widget only works as of Magento CE 1.4.2 and up.
You can now download the Widget / Extension version 0.1.0 (Magento CE < 1.7) right from the ScorgIT webshop. It’s free!Update: You can now download the Widget / Extension version 0.2.0 (Magento CE >= 1.7) right from the ScorgIT webshop. It’s free!
Step 1 – Create a Static Block
Go to CMS -> Static Blocks -> Add New Block
Inside this static block the links to the Pages that you want to be in your main menu, will be placed. Let’s call this block: ‘menu’. To simplify things, both Block Title and Block Identifier will have this name. Be sure to Enable the Static Block. The content, for now, can be empty.
Step 2 – Add a line of code to top.phtml (version 0.1.0, Magento version < 1.7)
The file app\design\frontend\default\default\template\catalog\navigation\top.phtml is where your menu is called from (or your theme’s top.phtml of course). To be able to insert the Static block ‘menu’, we’re going to add a line of code to this file
<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<?php if($_menu): ?>
<div>
<ul id="nav">
<?php echo $_menu ?>
<!-- add the following line of code -->
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('menu')->toHtml(); ?>
</ul>
</div>
<?php endif ?>
As you can see from the above code, the $_menu variable will insert the Categories into the top menu. The added line of code will insert the Static Block ‘menu’ that you’ve created in Step 1.
Step 2 – Add a line of code to topmenu.phtml (version 0.2.0, Magento version >= 1.7)
The file app\design\frontend\default\default\template\page\html\topmenu.phtml is where your menu is called from (or your theme’s topmenu.phtml of course). To be able to insert the Static block ‘menu’, we’re going to add a line of code to this file
<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
<ul id="nav">
<?php echo $_menu ?>
<!-- add the following line of code -->
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('menu')->toHtml(); ?>
</ul>
</div>
<?php endif; ?>
As you can see from the above code, the $_menu variable will insert the Categories into the top menu. The added line of code will insert the Static Block ‘menu’ that you’ve created in Step 1.
Step 3 – Use the widget functionality of Magento (1.4 and up)
Although you could use the standard Widget of a CMS Page Link, let’s extend this Widget with one other option. Why? Well, the CMS Page Link Widget provides two templates (block and inline), but we are in need for another template, rendered into HTML-list-elements.
To add the third template option, just download the appropriate version (see above), unpack and upload it to your Magento installation. In fact, it is a (small) module, that will extend the CMS Page Link Widget with the third template. Let’s go through the files one by one.
app/code/local/Scorgit/TopNavMenu/etc/widget.xml
<widgets> <cms_page_link type="cms/widget_page_link" translate="name description" module="cms"> <parameters> <template translate="label"> <values> <link_list translate="label"> <value>cms/widget/link/link_list.phtml</value> <label>CMS Page Link List Template</label> </link_list> </values> </template> </parameters> </cms_page_link> </widgets>
Basically, what we’ve done here, is copy the existing widget.xml file, which can be found in app/code/core/Mage/Cms/etc, add our own option inside the <values>-tag, and get rid of all other tags. Upon loading, Magento will combine all XML-config files into one big config-file, and this widget.xml (which in fact can be seen as another config XML file) will thus be merged with all other config xml files, in this case with the original widget.xml .
app/code/local/Scorgit/TopNavMenu/etc/config.xml
As with all Magento Modules (and extensions), in the config.xml you’ll provide the name of the module and some other stuff. That is however, beyond the scope of this article.
In fact, this simple module will run fine even with just <config></config> as content of the config.xml file.
app/design/frontend/default/default/template/cms/widget/link/link_list.phtml
As you can see in the widget.xml file, in the <value> tag, this is the path to the phtml file in which our markup code will go. For this ‘tutorial’ or module, the contents are:
<li> <a <?php echo $this->getLinkAttributes() ?>> <span><?php echo $this->htmlEscape($this->getAnchorText()) ?></span> </a> </li>
Mind the <li> tag! The top navigation menu is built as an unordered list (<ul>), so all we need to do is make sure that our CMS Pages that we will select to appear in the menu, will be inside a <li> tag. Even better: look at some existing code from a default Magento installation, and you will see the exact same HTML-markup as above.
app/etc/modules/Scorgit_TopNavMenu.xml
This one is standard Magento Module logic, to enable the module.
You can enable the module by going to System -> Configuration -> Advanced -> Scorgit_TopNavMenu and select ‘Enable’ (and Save of course). By enabling the module, you give Magento the instructions to merge the widget.xml file into its other xml files.
Ok, I did all that, but how do I use it?
Well, those are the steps. If you’ve done everthing to the letter, you should have a third template option if you insert a CMS Page Link into your newly created ‘menu’ Static Block.
 |
So, return to your static block ‘menu’. Open it up, and go to the content area. Click on the Widget Button and … |
 |
… select the CMS Page Link as your Widget Type. |
 |
As you can see, there is our third template |
 |
When we’ve selected a page and return to the content editor, we see the Magento Widget Icon |
 |
And if we switch between de WYSIWYG and normal mode, you can see that the newly created template will be used. Be careful in this step, because you see the HTML-p-tag? Delete that on both the beginning and the end of the widget code. |
 |
To check, we’ll go to our homepage and see that the link to the page has been added! |
All in all, this is a fairly simple way for both developer and client, to enable the incorporation of CMS Pages into your Magento web shop.
Magento Widget – Pages in your top menu
You can follow all the replies to this entry through the comments feed.
Leave a Comment
Tweets by ScorgIT
Just released: #magento #extension Product Question. Let your customers easily ask a question about a product. http://t.co/0hnh81ZG - posted on 10/08/2012 09:38:07- Updated #magento top navigation menu #widget for #CE1.7 available in the ScorgIT #webshop http://t.co/p4JWhUqy #ecommerce - posted on 06/06/2012 13:15:23
- Working hard on the ScorgIT portfolio #magento #wordpress #ecommerce #jigoshop http://t.co/GSIuR37d Still a lot to be done! - posted on 25/05/2012 10:00:47
- RT @aheadWorks: For some reason Magento Connect is down http://t.co/zWySxGNB http://t.co/mXZEO2SQ - posted on 16/02/2012 17:07:56
- ScorgIT has moved its #Magento Demo Store over to a new hosting platform. Feel free to test all #ecommerce #extensions http://t.co/Lo31AFx6 - posted on 10/02/2012 12:10:50
Nice and helpful tutorial, I have been looking for if I could check whether the category is set to include in navigation menu. Any idea?
Thanks!
Hi Tuba,
Not really sure what you mean. You can check your category inside the Magento admin. Go to Catalog -> Manage Categories -> Select your category -> On the tab General Information, check whether the option ‘Include in Navigation menu’ is set to Yes.
Does that help?
Tom
Hi! nice tutorial here, however I could not get the links to come up. I have followed every bit of this already detailed tut but Im still lost. Any suggestions on what I could be missing?
Hi Karl,
Did you check your source (like view html source I mean)? Perhaps the newly added links are hidden? Have you cleared the cache etc? I think I need some more info…
A reason could be that your Magento design does not support the top navigation bar at all (just guessing in fact, I assume there is one of course)?
Tom
Thanks.
Thanks. Actually the WYSIWYG kept adding the tag around my widgets. Removing the did not work since upon submit I think the WYSIWYG actually adds it in. To resolve it I had to replace the tags with a tags manually.
Thanks!
You’re welcome.
I know about the p tag, it’s kinda annoying, but it’s not a show stopper. What I usually do is not switch back to WYSIWYG after I have deleted the p tags. That way, all is fine if you have a look at the html source in your page. Perhaps this can help, but I’ve never tried it:
force_br_newlines : true,
force_p_newlines : false
(as can be found here: http://www.tinymce.com/forum/viewtopic.php?id=3878)
Regards,
Tom
does it allow for a 2nd level menu?
thanks
Hi Eddie,
Nope, I’m afraid not. I just did a quick test, but this does not seem to work (at least not in the default theme). Although in the backend editor the link does show up, on the frontend it is gone / not rendered. One again, this could be different in another template, but I’m not sure…
Tom
What do you mean by “As you can see in the widget.xml file, in the tag, this is the path to the phtml file in which our markup code will go. For this ‘tutorial’ or module, the contents are:
<a getLinkAttributes() ?>>
htmlEscape($this->getAnchorText()) ?>
”
Do we need to modify the widget.xml file which you provided or is there another file to modify? Thanks for clarifying.
Hi,
The only file you have to edit, is top.phtml, to include the call to the static block ‘menu’ (see Step 2). After that, you can add menu-items via CMS->Static Blocks inside the Magento back end.
What I meant with “as you can see in the widget.xml” file, is that you can see which .phtml file is being used to render the list item. This phtml file is referenced in the value-tag of the provided widget.xml.
Tom
I followed the whole procedure and it does not work. It seems that I am missing the navigation menu altogether; any advice on how to get it to appear? Thanks
Hi,
That all depends on your layout. If you do not have a top menu navigation inside your layout, well, it is obvious that adding items to a non-existent menu will not appear as well.
Normally, in the default Magento layout, there is a file top.phtml, which takes care of the top menu. Again, see step 2 of this tut. Inside that top.pthml, some code is provided to render the menu. You might have another layout, and / or another file that takes care of the rendering of the top navigation menu, or, as I said, your layout might not have a top navigation menu at all.
Tom
When I insert the widget it wont let me get past selecting a CMS page. it wants me to select a page and in your instructions there is nothing stating what to select. Not sure what to do.
Mike
Hi Mike,
Not sure what you mean exactly. You do have to select a CMS page, it is a required field of the ‘CMS Page Link’ – widget type. After you have selected the new template (CMS Page link list template), you can pick a page by clicking the ‘Select Page’ button. See image 3 in the tut. The page you select will appear in the top navigation menu.
Hope that helps.
Tom
Hi Mike,
Great Tutorial – worked on the first go!
I’m having difficulty trying to get the CSS to apply to space it better. Do you have any suggestions? At the moment it is right on top of the last category on the menu.
Your help much appreciated
Z
Hi Z,
Just call me Tom
I’ve taken a look at your site, the thing is that the category ‘Shoes & Clothing’ gets a style class ‘last’, which should not be there. When you add the ‘last’ class to the li of the ‘About BC’ page you added all looks ok. Hmmm, guess you’d have to edit the function which is called in the top.phtml file: $this->renderCategoriesMenuHtml(0,’level-top’). This function is probably adding the ‘last’ class after the last category link, which in fact, in your case, it should not be doing, because you added a page link as the last link in your menu. So if you remove that ‘last’ class, you should be fine. More or less, ’cause you have to add the ‘last’ class to the page li item…
Perhaps you could alter the style on the document.ready call via javascript? Don’t know if that is a proper method of working, but it might work.
Hope that helps (a bit).
Regards,
Tom
Hi,
The top menu wouldn’t work on my website using magento 1.7.0 and your version 0.2.0 using the code you provided.
I finally managed to get it working using this code in the topmenu.phtml file:
renderCategoriesMenuHtml(‘level-top’) ?>
getLayout()->createBlock(‘cms/block’)->setBlockId(‘menu’)->toHtml(); ?>
Hopefully it will help some people.
Regards,
Jennifer
Hi Jennifer,
In fact that’s a combination of the two phtml files.
renderCategoriesMenuHtml('level-top')normally should be found in top.phtml, in versions prior to 1.7. But it could well be that in your template that line is still there. Good to know, so many thanks for sharing!
Regards,
Tom
Cool extension. But how can we can add sub menus ?
Hi,
Unfortunately, this extension does not have the possibility to add sub menus. It was just intended to add pages in the top navigation (and as an exercise for myself to do something with widgets
).
Perhaps in the future, I will be able to find some time to implement some more features, but there are tons of extensions that offer much more already, including sub menus.
Thanks for your interest though!
Regards,
Tom
Help, It still doesn’t work.
You say: As with all Magento Modules (and extensions), in the config.xml you’ll provide the name of the module and some other stuff. That is however, beyond the scope of this article.
Am I missing a step outside of this tut? I def have the topmenu enabled (the categories show up fine) but nothing shows.
Hi,
It might be that your template isn’t using top.phtml or topmenu.phtml, but instead another phtml file to render the menu. Turn on the Template Path Hints, and you should see which file is being used. Make your changes in that file instead.
Hope that helps,
Tom
Hi,
I am new to Magento and trying to figure out how to add a pages into the menu. I use Magento v1.7.0. In step 2) you wrote “The file app\design\frontend\default\default\template\page\html\topmenu.phtml is where your menu is called from (or your theme’s topmenu.phtml of course).” however I can only find the file topmenu.phtml in app\design\frontend\base\default\template\page\html\topmenu.phtml. Is this a problem?
Thanks
Hi,
Good question!
). If indeed topmenu.phtml inside base\default is used, you should copy that one into your own template, to avoid editing the core files. Magento will then automatically use your file instead (remember to clear the Magento cache).
You can always see which file is being used for the rendering of the topmenu, or whatever file is used for a specific purpose, by switching on the Template Path Hints (Google is your friend
Another option (remember, the Template Path Hints should point out which file is used for rendering your top menu), is that a totally different phtml file is used for your top menu. In that case, alter that file.
Bottom line: enable Template Paht Hints, to see which file you have to edit. But never edit the files inside the base folder. They might / will get overwritten when you update Magento to a newer version.
Hope that helps,
Regards,
Tom
Hi,
I install the magento widget, but i can not enable this module.
i don’t have Scorgit_TopNavMenu at this place: System -> Configuration -> Advanced -> Scorgit_TopNavMenu.
what do i wrong?
please help
Thanks
Hi,
Usually that is the result of not clearing your cache after you’ve installed an extension. So, go to Cache Management, clear your cache and you should be fine. Logging out and in again might also be a good plan.
Hope that helps,
Regards,
Tom