Magento. Listing sub-categories on a category page

This tutorial is going to show you one of the ways to list sub-categories on category pages of your Magento store.
In order to display thumbnails of subcategories and their names on your category pages:

1. In your Magento admin go to CMS -> Static Blocks



2. Click “Add New Block” at the top right.
3. Create a new static block as follows:

Block Title: Sub Category Listing
Identifier: subcategory_listing
Status: Enabled
Content:

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



4. Click “Save Block” at the top right.
5. From the Top menu go to Catalog –> Manage Categories.
6. Select the category that has sub-categories and under the “Display Settings Tab” reflect the following:

Display mode: Static Block only
 OnlyCMS Block: Sub Category Listing
Is Anchor: No.



7. Click “Save category” at the top right.
8. On your computer create a new file called “subcategory_listing.phtml” with the following content:

<div class="category-products">
<ul class="products-grid">
<?php
$_categories=$this->getCurrentChildCategories();
if($_categories->count()):
$categorycount = 0;
foreach ($_categories as $_category):
if($_category->getIsActive()):
$cur_category=Mage::getModel('catalog/category')->load($_category->getId());
$layer = Mage::getSingleton('catalog/layer');
$layer->setCurrentCategory($cur_category);
$catName = $this->getCurrentCategory()->getName();
if ($categorycount == 0){
$class = "first";
}
elseif ($categorycount == 3){
$class = "last";
}
else{
$class = "";
}
?>
<li class="item <?=$class?>">
<a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>"><img src="<?php echo $_category->getImageUrl() ?>" width="100" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" /></a>
<h2><a href="<?php echo $_category->getURL() ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>"><?php echo $this->htmlEscape($_category->getName()) ?></a></h2>
</li>
<?php
endif;
if($categorycount == 3){
$categorycount = 0;
echo "</ul>\n\n<ul class=\"products-grid\">";
}
else{
$categorycount++;
}
endforeach;
endif;
?>
</ul>
</div>

9. Connect to the FTP directory where your Magento files are stored using File manager and upload the file to the following directory:

app/design/frontend/default/MY-TEMPLATE-DIR/template/catalog/navigation/
(if any folder from this directory is missing, you will need to re-create it)

10. From your FTP, navigate to app\code\core\Mage\Catalog\Block\Navigation.php.
11. Copy the Navigation.php file to your computer.

From your FTP, navigate to app\code\local\Mage\Catalog\Block\ and upload the copied Navigation.php to this directory (if any folder from this directory is missing, you will need to re-create it).

12. In the “Navigation.php” look for this part:

public function getCurrentChildCategories()
    {
        $layer = Mage::getSingleton('catalog/layer');
        $category   = $layer->getCurrentCategory();
        /* @var $category Mage_Catalog_Model_Category */
        $categories = $category->getChildrenCategories();
        $productCollection = Mage::getResourceModel('catalog/product_collection');
        $layer->prepareProductCollection($productCollection);
        $productCollection->addCountToCategories($categories);
        return $categories;
    } 

13. And replace it with this:

public function getCurrentChildCategories()
   {
        $layer = Mage::getSingleton('catalog/layer');
        $category   = $layer->getCurrentCategory();
        /* @var $category Mage_Catalog_Model_Category */
        $collection = Mage::getModel('catalog/category')->getCollection();
        /* @var $collection Mage_Catalog_Model_Resource_Eav_Mysql4_Category_Collection */
        $collection->addAttributeToSelect('url_key')
            ->addAttributeToSelect('name')
            ->addAttributeToSelect('is_anchor')
            ->addAttributeToSelect('image') 
            ->addAttributeToFilter('is_active', 1)
            ->addIdFilter($category->getChildren())
            ->setOrder('position', 'ASC')
            ->joinUrlRewrite()
            ->load();

        $productCollection = Mage::getResourceModel('catalog/product_collection');
        $layer->prepareProductCollection($productCollection);
        $productCollection->addCountToCategories($collection);
        return $collection;
    } 

14. From the front end of your site open the category with the sub-categories added to it. Now it should show  the sub-categories listing.



15. If you do not see the changes, try clearing your Magento/browser cache. If your sub-categories show no thumbnails, please make sure that the images are actually uploaded to your subcategories.

Feel free to check the detailed video tutorial below:

Magento. Listing sub-categories on a category page