Displaying Sub Categories on Category Landing Page in Magento

The below code snippet/instructions will display images and links for each sub category on a category landing page. Feel free to use this code as a reference, however not being a PHP developer there may well be errors so I welcome any tips or improvements!

1. Create a new file called “categoryblocks.phtml” in app/design/frontend/YOUR THEME/default/template/catalog/navigation

2. Paste the following code into it and save:

//If there are sub categories
$categories = $this->getCurrentChildCategories();
$categoriescount = $this->getCurrentChildCategories()->count();
if ($categoriescount > 0): 
<div class="sub-category-container">	
	//Loop through categories
	foreach ($categories as $category):
	<div class="sub-category">
		<a href="<?php echo $this->getCategoryUrl($category)?>" class="cat-image">
		// If there is a thumbnail set for the category - Display it
		if($imgUrl = Mage::getModel('catalog/category')->load($category->getId())->getThumbnail()):?>
		<img src="<?php echo $this->getBaseUrl()."media/catalog/category/".$imgUrl ?>" width="220" height="110" alt="<?php echo $this->htmlEscape($category->getName()) ?>" />
		<?php endif; ?>
		<div class="inner-sub-category">
			<a href="<?php echo $this->getCategoryUrl($category)?>" class="sub-link"><?php echo $category->getName()?></a>
			<a href="<?php echo $this->getCategoryUrl($category)?>" class="btn"><span>View All</span></a>
	<?php endforeach; ?>
<?php else:?>
<p>No Sub Categories</p>
<?php endif; ?>

3.Create a static block in Magento Admin called “categorylanding”

4.Place the following code snippet into the static block and save.

{{block type="catalog/navigation" template="catalog/navigation/categoryblocks.phtml"}}

5. Go to Manage Categories in Magento Admin and select “categorylanding” as a static block for the categories you wish to display sub categories for.

This should generate something like this:


You can style however you want using the classes provided or by editing to suit your requirements.


  1. Hi, Thanks for the tutorial, I just did a small change at the beginning of the loop to get “odd” and “even” class for each sub category so they can be styled differently.

    $class = ($i % 2 == 0) ? 'even' : 'odd';

    Jose Paitamala - 19 Feb 2014
  2. Very nice solution, effectively working. I have a newbie question: the CSS classes you put, like “sub-category-container” are defined somewhere in the Magento CSS structure, or you created them in order to later style the block by adding a CSS file?

    Guido - 06 Apr 2014
  3. I created them so I could apply styling 🙂

    Hannah - 17 Apr 2014

Comments are closed.