How to show all category on magento sidebar

To work with Magento sometimes we need to show our categories on magento sidebar or create shop by category option on magento sidebar. Now, you can easily do this following the below step.

First step:

First you need to create a template file named “categorymenu.phtml” and locate it


puting the following code :

<div class="block left-nav">
	<div class="block-title">
		<strong><span><?php echo $this->__('Shop by Category') ?></span></strong>
	<div class="block-content">
		<ul id="left-nav">
			<?php foreach ($this->getStoreCategories() as $_category): ?>
				<?php if ($_category->getIsActive()): ?>
					<?php $isactive		= $this->isCategoryActive($_category); ?>
					<?php $hasChildren	= $_category->hasChildren(); ?>
					<li class="category <?php if($isactive) echo 'active'; ?>" lang="<?php echo $_category->getId();?>">
						<a href="<?php echo $this->getCategoryUrl($_category)?>" >
							<span><?php echo $_category->getName();?> <?php echo "<a class='full' href='javascript:void(0)'>   </a>"; ?></span>
						<?php if($isactive) echo " <a class='empty' href='".$this->getCategoryUrl($_category)."'></a>"; ?>
					<?php if($hasChildren): ?>
						<ul class="subcategory_<?php echo $_category->getId();?> subcategory" style="display:<?php echo $isactive? 'block' : 'none'; ?>;">
							<?php foreach (Mage::getModel('catalog/category')->load($_category->getId())->getChildrenCategories() as $childCategory):?>
								<?php $isactive			= $this->isCategoryActive($childCategory); ?>
								<?php $hasmoreChildren	= $childCategory->hasChildren(); ?>
								<li class="category" lang="<?php echo $childCategory->getId(); ?>">
									<a href="<?php echo $childCategory->getUrl($_childCategory); ?>" >
										<?php echo $childCategory->getName(); ?>
									<?php if($hasmoreChildren) echo " <a class='full' href='javascript:void(0)'>   </a>"; ?>
								<?php if($hasmoreChildren): ?>
									<ul class="subcategory_<?php echo $childCategory->getId(); ?> subcategory" style="display:<?php echo $isactive? 'block' : 'none'; ?>;">
										<?php foreach (Mage::getModel('catalog/category')->load($childCategory->getId())->getChildrenCategories() as $_childCategory):?>
											<?php $isactive	= $this->isCategoryActive($_childCategory);?>
											<li class="category">
												<a href="<?php echo $_childCategory->getUrl(); ?>"  style="padding-left:15px;font-size:11px;" >
													<?php echo $_childCategory->getName(); ?>
										<?php endforeach; ?>
								<?php endif ?>
							<?php endforeach;?>
					<?php endif ?>
				<?php endif ?>
			<?php endforeach ?>

<script type="text/javascript">

	// Custom Menu
	jQuery(".category").click(function() {
		var open = this.getAttributeNode('lang').value;
		jQuery(".subcategory_" + open).slideToggle('medium');


Second step:

Then you need to call the phtml file on app/design/frontend/your-instance-name/your-theme-name/layout/catalog.xml by putting the following code :

    <reference name="left">
             <block type="catalog/navigation" name="catalog.categorymenu" before="catalog.leftnav" template="catalog/navigation/categorymenu.phtml"/>

By using this code you will see the category on left sidebar you get it on right sidebar just changing the reference name to right.

Third step:

Download the latest JavaScript Library from

and put this files on magento root directory js folder.

Fourth step:

Now call the both javascript file on app/design/frontend/your-instance-name/your-theme-name/layout/page.xml by putting the following code on it :

<action method="addJs"><script>jquery-1.7.2.min.js</script></action>

after this :

<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>varien/menu.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>

Published by

Salim Sazzad

Hi, I am Salim Sazzad. I am a web developer. I always try to share my experience with others. Please freely contact me if i made any kind of mistakes. I think that will help me and others. Thank you

7 thoughts on “How to show all category on magento sidebar”

  1. It is really a nice and useful piece of info. I’m satisfied that you simply shared this helpful information with us. Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.