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:

<?php 
//If there are sub categories
$categories = $this->getCurrentChildCategories();
$categoriescount = $this->getCurrentChildCategories()->count();
if ($categoriescount > 0): 
?>
<div class="sub-category-container">	
	<?php 
	//Loop through categories
	foreach ($categories as $category):
	?>
	<div class="sub-category">
		<a href="<?php echo $this->getCategoryUrl($category)?>" class="cat-image">
		<?php 
		// 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; ?>
		</a>
		<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>
		</div>
	</div>
 
	<?php endforeach; ?>
</div>
<?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:

category-blocks

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

Comments

  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.

    < ?php //Loop through categories foreach ($categories as $i => $category):
    $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
  4. Hi! Finally a Tutorial that worked! Thanks! My only problem now is that the thumbnails are all lined up under each other. How would I style it to get them next to each other like your example? (I’m not very experienced with coding)

    Sarah Sellman - 07 Jan 2015

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>