Magento – Adding CMS pages to Main Nav

This is just a quickie. Magento, by default, will create a navigation menu which is driven entirely through the catalogue. Naturally there will be the need to include other static items within the main navigation menu, including the obvious defaults like ‘Home’ and ‘Contact’. Two good choices for my example because normally you’d have ‘Home’ on the left and ‘Contact’ on the far right, with the product catalogue navigation sandwiched in between.

As with most things in web development, there are numerous ways to achieve this – some better than others. The quick and dirty method would involve hardcoding links into your catalog/navigation/top.phtml template, like so;

<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
    <ul id="nav">
		<li id="" class="level0 level-top first"><a class="level-top" href="http://www.quickanddirty.com"><span>Home</span></a></li>
        <?php echo $_menu ?>
    </ul>
</div>
<?php endif ?>

This’ll work fine but it takes control of it completely out of the CMS administration, which makes it undesirable. Better to alter the top.phtml file to load in a static block either side of the main menu. That way you can add CMS pages. Basically you would add two static blocks with the identifiers nav-links-before and nav-links-after. In each of these blocks you add links to your CMS pages like so;

<li><a href="{{store direct_url="contacts"}}">Contact</a></li>

Where the ‘contacts’ above is the url key for the CMS page I’m using for the contact form.

Then in catalog/navigation/top.phtml you would edit inside the unordered list to call the static blocks like so;

<div class="nav-container">
    <ul id="nav">
		<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('nav-links-before')->toHtml() ?>
        <?php echo $_menu ?>
		<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('nav-links-after')->toHtml() ?>
    </ul>
</div>

EDIT (09/09/12): These static block ideas are grand but they fall over if you are using the .active CSS class which Magento applies to the active menu item. I’m just going to post the whole code block from the Fairlie Furniture site I’m doing at the moment, I’ve used a couple of other techniques here, including a preg_match regex on anything in the WordPress virtual directory (News);

<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<?php 
	$routeName = Mage::app()->getRequest()->getRouteName();  
	$identifier = Mage::getSingleton('cms/page')->getIdentifier();
	
	$menu = MAGE::helper('ThemeOptions')->getThemeOptions('menu'); 
	$homeButton = MAGE::helper('ThemeOptions')->getThemeOptions('homeButton');
?>
<?php if($_menu): ?>
<script>
	jQuery(document).ready(function(){
			jQuery('#nav').mobileMenu({
				switchWidth: 768
			});
	});
</script>
<nav class="nav-container">
    <ul class="<?php if ($menu == 'menu_wide') echo 'nav-wide' ?>" id="nav">
    	<?php if ($homeButton == 1): ?><li class="homepage level-top "><a class="level-top" href="<?php echo $this->getUrl('') ?>"><span><?php echo $this->__('Home') ?></span></a></li><?php endif; ?>
        <?php echo $_menu ?>
<li class="level0 nav-3 level-top parent <?php if($routeName == 'cms' && $identifier == 'commissions'): echo 'active'; endif; ?>"><a href="#"><span>Commissions</span></a>
<ul class="level0">
<li class="level1 nav-3-1 first"><a href="#"><span>Commissions 1</span></a></li>
<li class="level1 nav-3-2"><a href="#"><span>Commissions 2</span></a></li>
<li class="level1 nav-3-3"><a href="#"><span>Commissions 3</span></a></li>
<li class="level1 nav-3-4 last"><a href="#"><span>Commissions 4</span></a></li>
</ul>
</li>
<li class="level0 nav-5 level-top <?php if($routeName == 'cms' && $identifier == 'about-us'): echo 'active'; endif; ?>"><a href="<?php echo $this->getUrl('about-us') ?>"><span>About Us</span></a></li>
<li class="level0 nav-5 level-top <?php if($routeName == 'cms' && $identifier == 'hardwood-gallery'): echo 'active'; endif; ?>"><a href="<?php echo $this->getUrl('hardwood-gallery') ?>"><span>Gallery</span></a></li>
<li class="level0 nav-6 level-top <?php if($routeName == 'cms' && $identifier == 'location'): echo 'active'; endif; ?>"><a href="<?php echo $this->getUrl('location') ?>"><span>Location</span></a></li>
<li class="level0 nav-7 level-top <?php $request = $_SERVER&#91;'REQUEST_URI'&#93;; if (preg_match("/handmade-hardwood-furniture/",  $request)) { echo 'active'; } ?>"><a href="<?php echo $this->getUrl('news') ?>"><span>News</span></a></li>
<li class="level0 nav-8 level-top <?php if($routeName == 'cms' && $identifier == 'contact'): echo 'active'; endif; ?>"><a href="<?php echo $this->getUrl('contacts') ?>"><span>Contact</span></a><li>		
    </ul>
</nav>
<?php endif ?>

Leave a Comment