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

app/design/frontend/your-instance-name/your-theme-name/template/catalog/navigation/categorymenu.phtml

puting the following code :

<div class="block left-nav">
	<div class="block-title">
		<strong><span><?php echo $this->__('Shop by Category') ?></span></strong>
	</div>
	<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>
						</a>
						<?php if($isactive) echo " <a class='empty' href='".$this->getCategoryUrl($_category)."'></a>"; ?>
					</li>
					<?php if($hasChildren): ?>
					<li>
						<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(); ?>
									</a>
									<?php if($hasmoreChildren) echo " <a class='full' href='javascript:void(0)'>   </a>"; ?>
								</li>
								<?php if($hasmoreChildren): ?>
								<li>								
									<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(); ?>
												</a>
											</li>
										<?php endforeach; ?>
									</ul>
								</li>
								<?php endif ?>
							<?php endforeach;?>
						</ul>
					<?php endif ?>
					</li>
				<?php endif ?>
			<?php endforeach ?>
		</ul>
	</div>
</div>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){	

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

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 :

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

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 http://code.jquery.com/jquery-1.7.2.min.js

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>