Blog

The official ScorgIT Weblog

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.

Liked this post? Share it!

29 Comments to Magento Widget – Pages in your top menu

  1. 19-07-2011 at 21:21

    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!

  2. Karl Badeo's Gravatar Karl Badeo
    16-01-2012 at 03:47

    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?

  3. Youssef's Gravatar Youssef
    10-02-2012 at 16:14

    Thanks.

  4. 23-02-2012 at 18:59

    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!

  5. Eddie's Gravatar Eddie
    23-03-2012 at 01:20

    does it allow for a 2nd level menu?

    thanks

  6. 14-04-2012 at 08:18

    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.

  7. 14-04-2012 at 11:07

    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

  8. Mike Scott's Gravatar Mike Scott
    17-04-2012 at 07:38

    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

  9. zoo's Gravatar zoo
    24-04-2012 at 09:34

    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

  10. 27-06-2012 at 01:06

    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

  11. Abhijeet's Gravatar Abhijeet
    12-07-2012 at 17:32

    Cool extension. But how can we can add sub menus ?

  12. 16-11-2012 at 13:34

    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.

  13. hb's Gravatar hb
    26-11-2012 at 15:07

    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

  14. 04-02-2013 at 21:55

    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

  15. 31-05-2013 at 03:13

    Can i just delete the files copied to remove the extension ?

Tweets by ScorgIT

scorgit