Select Page

Magento Basics – How To Create Sub Category Grid

by | Mar 29, 2015 | Magento Advice | 29 comments

Clients have often asked me why including a sub category grid on product pages is not standard functionality of Magento. Most eCommerce sites require this type of navigation.

Although this is not “out of the box” functionality it is relatively easy to implement and will improve the user experience of your store.

Create Sub Category Grid

Create The Template File

1. Firstly you will need to create a new PHTML page template file. Name this file ‘sub-category-grid.phtml’.

2. upload to:

public_html/app/design/YOUR_THEME/YOUR_PACKAGE/page/html/

3. Include the following in your new PHTML file.

<?php
$category = Mage::getSingleton('catalog/layer')->getCurrentCategory();
$categories = $category->getCollection()
->addAttributeToSelect(array('name', 'image'))
->addAttributeToFilter('is_active', 1)
->addAttributeToFilter('include_in_menu', 1)//if not to show in nav
->addIdFilter($category->getChildren())
?>
<?php $_columnCount = 4; ?>
<?php if ($i++%$_columnCount==0): ?>
<ul class="catblocks">
<?php foreach ($categories as $category): ?>
<li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<a href="<?php echo $category->getUrl() ?>"><img src="<?php echo Mage::getBaseUrl('media') . 'catalog' . DS . 'category' . DS . $category->getImage() ?>" alt="<?php echo $this->htmlEscape($category->getName()) ?>" />
<span><?php echo $category->getName() ?></span></a>
<?php $i++ ?>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>

Create The Static Block

Now we have to create a static block to call the sub-category-grid.phtml file you have just made.

1. Create your static block. Make sure you give this a relevant name & identifier.

CMS -> Static Block -> Add New Block

2. Insert the following into your new static block

{{block type="page/html" template="page/html/sub-category-grid.phtml"}}

3. Now set the new static block to show on category pages.

Catalog -> Category -> DESIRED CATEGORY -> Display Settings -> Display Mode -> Static block only
Catalog -> Category -> DESIRED CATEGORY -> Display Settings -> CMS Block -> Your new static block

4. Save & refresh your cache.

You should be all set. This is tested in 1.9.1 and using the above technique your sub category grid should be using “out of the box” responsive CSS.

Magento Sub Category Grid

Magento Sub Category Grid

Conor Tomkins

Conor Tomkins

Senior PHP Developer

Working with PHP applications since the age of 17. I have a wide range of knowledge on most PHP open source platforms. I must admit, my favorites are Magento & Wordpress!

Still need answers?