Magento – Adding CMS Pages To The Main Navigation

Magento –  Adding CMS Pages To The Main Navigation

Magento is NOT WordPress

So recently I have had to dive into learning how to theme Magento. Which is good, because I have always wanted to learn, and while I tried in the past, I just never had the time. You know how it is. Work is providing this opportunity, and I want to share something of my findings with you. One thing in particular, because it is such a pain in the ass. First though, let me start by saying that Magento is NOT WordPress. Obviously, right? I thought though, that some things would be similar. One issue was adding a CMS Page to the Main Navigation. One would think that this would be easy enough to do, but it is not. It is actually extremely frustrating if you have no idea how to do it. For all that Magento is, what it is not is an easy to use content management system. It is a store, which sounds stupid because everyone knows that, but while it does that well, it does some things poorly. If you have had trouble, like me, and searched for the answer, you came across some pages that didn’t explain how to do what you are asking, or gave links to extensions to Magento to do it for you. Here is the quickest way possible to add a cms page to the main navigation.

There has to be an easier way, right?

Sadly, there is not. What I am about to go through is exactly how Magento tells you to do it. IF by any chance, ANYONE…and I do mean anyone has a better method, please for the love of everything that is good, comment on this post explaining how. We would all greatly appreciate and benifit from your knowledge. I am not going to include images, because it is mostly obvious on what to click. If you have questions though, please let me know.

First, I will assume that you have a few CMS Pages created, like About Us, Contact Us, or something like that. Remember we are talking about an info page, not a catagory or product. Follow the below steps exactly. I am using Magento version 1.7.0.2 in case anyone is wondering.

In the Admin Panel:

  1. Click on CMS>Pages in the main menu. In the table below you will see a column called URL Key. Find the page you want in the main nav, and write down that key.
  2. Click on Catalog>Manage Categories
  3. Click on the Root folder in the left sidebar, and then click the Add Subcategory button
  4. In the panel that shows up on the write, fill in the Name (which will be the name of the link displayed)
  5. Scroll down, and make sure that Is Active, and Include in Navigation Menu are set to Yes
  6. For URL Key, if you wrote Customer Serivce in the above Name input, then write: customer-service
  7. Click the Save Category button
  8. Click on Catalog>URL Rewrite Management in the main menu at the top
  9. In the Request Path box, type first word of the category you just created (such as: customer, or about), and click the Search button
  10. The page you are looking for will then populate the table…write down the path in the Target Path column for that page (example: catalog/category/view/id/40)
  11. Click on that row
  12. On the Redirect dropdown, change it to Permanent (301)
  13. Click the Save button
  14. Click the Add URL Rerwite button on the top right
  15. Click the Create URL Rewrite drop down and choose Custom
  16. In the ID Path text field, type the URL key you wrote in step 6
  17. In the Request Path input, type in path you wrote in step 10
  18. In the Target Path input, type in the key you wrote from step 1
  19. Redirect dropdown should be set to Permanent (301)
  20. Click the Save button

If you then refresh your store page, you should now see your page in the main navigation.

Magento, are you serious?

If you got through half of that without saying “What the F*#@?” Then you are of a different mind than me. I am used to WordPress’ easy to use navigation system. THIS is by far the most ridiculous thing I’ve ever seen in adding a page to a CMS navigation. I find it hard to believe, and I am not the only one after reading some comments on other pages. How can such a powerful piece of software suck so greatly at such a simple thing? Why is there not an easier method? Simply checking “Add to Navigation” should suffice. I am not a programmer, or a Magento pro, but come one, don’t make this more complicated than it has to be. Why are there so many steps? I was extremely frustrated in trying to figure this simple thing out, and the one place I found that wrote the directions out was written very poorly, to the point where I was unsure what exactly it was telling me to do.

I will be very happy if this post helps just one person from going through the anger and swearing that I went through.

Tags:

23 Responses to “Magento – Adding CMS Pages To The Main Navigation”

  1. Ryan Hoerr says:

    We’ve wondered the same thing–it doesn’t have to be so painful, though. If you’re willing to spend a few dollars on an extension, we just released one that recreates WordPress’s menu system in Magento. You should feel right at home. Check it out if you’re interested: Easy Menus – http://www.magentocommerce.com/magento-connect/catalog/product/view/id/14756/

    Hope this helps.

  2. SG says:

    Thanks. I agree this is not as simple as it could be, but I think the category system is intended for a different problem area than site navigation. Store categories have their own complexities without adding simple page navigation too. Still, a simple navigation bar would be a nice addition to the core Magento package. Or better documentation that is easy to find. For now, I can make your method work. Thanks!

    • jcDesigns says:

      I totally agree. But, this was all I found that does what I was looking for. I understand that this is more of a programmers E-comm framework, but most e-comm sites have other static info pages as well. Magento does not do this well. Adding navigation items should NOT be this painful. Glad you were able to use this though!

  3. Vincent Krueger says:

    Great tutorial man! I guess a lot of effort was put through this tutorial. I was going to make a code level customization until a bumped to this tut. Thanks man you saved me hours of banging my head on the wall.

  4. Max Well says:

    I created navigation bar, made a page and set the URL Rewrite. But when I am clicking any one item of top nav menu the Custom CMS Page is not displayed. I checked and rechecked the steps but with no flaws. Access log of localhost showing too many redirects to the page and finally no page is displayed. Can you help me out.

    Thanks

  5. KL says:

    I’m coming from WordPress and I find Magento extremely complicated and not user friendly at all. Editing something simple is so much harder. Thank you for your tutorial. I’m starting to hate Magento.

  6. osas says:

    dude can i just say first of all, we seem to have the same sense of humour..been scheming through the site and I love your down to earth approach to these technicalities man..If you’re anywhere near london then we need to grab a beer sometime.

    I just started theme development myself and magneto is one hell of a nightmare. I gave up instantly, but having read your post, Ill give it a shot again with your directions.

    cheers mate, I’m officially a fan!

  7. Adam says:

    If you’re getting a redirect loop, make sure that the URL Key you specify in the CMS page is different than the request path you specify in the rewrites. No one mentioned this on any of the 10 various tutorials on the subject that I reviewed. Had me pulling my hair out.

  8. mores says:

    I don’t like the redirect solution … fiddling with this is bound to cause issues down the road or with Google.
    I then followed this advice:
    http://www.woolleydesign.net/2011/05/adding-cms-pages-to-magento-top-nav-bar/

    Also better for your clients since they probably can’t break the site as much as they can with redirects.

  9. Peter Thake says:

    Thanks for taking the time to put this on the web, it saved me a lot of headaches :-) . Note I think it doesn’t work if the ID Path is the same as the Target path. Also, you may need to refresh your indexes to see the URL Rewrite.

  10. pixels72 says:

    This was the only way to add a page link in MagentoGo too! I was really surprised at this, being used to designing and developing in Drupal and WordPress. I have found that MagentoGo is extremely frustrating to implement the simplest things.

    Thank you for your post, I’ve been using this whenever I’ve had to add a new page….you’re a real life saver!

  11. JaganAkash says:

    This was really useful for Magento users. Really i have struggled a lot to change the CMS page to Category page. I have tried many ways but that doesn’t work. Atlast i found this page and i got my solution. Really thanks to post this information…

  12. Thank you for writing this! Every other guide was so terribly written (just like most Magento documentation, it seems) that nothing I did seemed to get it to work. Your steps are written clear and concise and got the job done – finally. Thanks again!

  13. Koolsh says:

    Your solution worked for me, but once I refreshed the indexes the custom redirects were rewritten to their initial state. I don’t think it is a sustainable way of adding links to level1 top menu.

  14. Mike says:

    Another solution is to create a category with no products in it, and use the description section to style your CMS content in there. You can then simply hide the “no products found” notification with CSS

  15. Brendon Held says:

    Thanks for this tutorial guys.

    I must say, I agree with @mores though, and ended up implementing the method suggested in the tutorial he linked to. With 2 lines of code added to my navigation/top.phtml template, and creating two static blocks where I can add links before and after the categories at any time, which link directly to the pages I am linking to, just seems slicker to me.

    Thanks.

  16. Neshanski says:

    It is good to know that it might work that way BUT: as @koolsh said “once I refreshed the indexes the custom redirects were rewritten to their initial state” and because of that I edn up using @more method…

    Regards
    N.

  17. Joe says:

    How to add home menu in menu bar
    app\design\frontend\default\mobileshoppe\template\catalog\navigation\top.phtml

    This my code. : Please teach me please . Thank you very much.
    note : i use this theme ( http://www.magentocommerce.com/magento-connect/mobile-shoppe-a-responsive-magento-theme-1032.html )


    ?>
    renderCategoriesMenuHtml(0,'level-top') ?>

    $j(document).ready(function(){
    $j('#nav').mobileMenu();
    });

  18. JT says:

    Hi,

    Found this link online. Very easy to add links to the main nav menu. Although the only prob I found was that you couldn’t move the ordering around if you had a mix of categories from the backend and custom links that you added.

    http://mzepanonline.blogspot.in/2013/01/how-to-add-new-link-in-menu-to-new-cms.html

  19. Dinesh says:

    Hello,

    Hai we are making one shopping cart using magento theme, actually it’s working good. we want show table in navigation menu and splitting product details in different table. Please help me us is there any extension in magento like that.

    thanks.
    Dinesh

Leave a Reply