Magento 1.9 – Product List by Category in CMS Page

The things I do for a bounty....This is a fully functional module that will list your subcategories in a category page or you can use it to show them in a static page or block by passing a category id to the block. Let's name the module Easylife_Subcategories.
Create the following files.
(read carefully and pay attention to the comments inside the code)

app/etc/module/Easylife_Subcategories.xml - the declaration file

<?xml version="1.0"?>
<config>
    <modules>
        <Easylife_Subcategories>
            <codePool>local</codePool>
            <active>true</active>
            <depends>
                <Mage_Catalog />
            </depends>
        </Easylife_Subcategories>
    </modules>
</config>

app/code/local/Easylife/Subcategories/etc/config.xml - the configuration file

<?xml version="1.0"?>
<config>
    <modules>
        <Easylife_Subcategories>
            <version>1.0.0</version>
        </Easylife_Subcategories>
    </modules>
    <global>
        <blocks>
            <easylife_subcategories>
                <class>Easylife_Subcategories_Block</class>
            </easylife_subcategories>
        </blocks>
    </global>
    <frontend>
        <layout>
            <updates>
                <easylife_subcategories>
                    <file>easylife_subcategories.xml</file>
                </easylife_subcategories>
            </updates>
        </layout>
    </frontend>
</config>

app/code/local/Easylife/Subcategories/Block/Subcategories.php - the subcategories block

<?php
class Easylife_Subcategories_Block_Subcategories extends Mage_Core_Block_Template {
    public function getChildCategories() {
        $categoryId = $this->getCategoryId();
        $children = Mage::getModel('catalog/category')->getCollection()
            ->addAttributeToSelect('*')
            ->addAttributeToFilter('parent_id', $categoryId) //get only the children
            ->addAttributeToFilter('is_active', 1) //get only active children
            ->addAttributeToFilter('thumbnail', array('notnull'=>1)) //only the ones with thumbnails
            //if you want to use the 'image' attribute instead of thumbnail comment the line above and uncomment the one below
            //->addAttributeToFilter('image', array('notnull'=>1)) //only the ones with images
            ->addAttributeToSort('position');
        return $children;
    }
    public function getCategoryId() {
        if (!$this->hasData('category_id')) {
            if (Mage::registry('current_category')) {
                $this->setData('category_id', Mage::registry('current_category')->getId());
            }
            else {
                $this->setData('category_id', Mage::app()->getStore()->getRootCategoryId());
            }

        }
        return $this->getData('category_id');
    }
}

app/design/frontend/base/default/template/easylife_subcategories/subcategories.phtml - the template that renders the subcategories. You can also place it inside you theme, but by putting it in base/default you make it available for all themes.

<?php $categories = $this->getChildCategories();?>
<?php if ($categories->count(0)) : ?>
    <div class="category-children">
        <?php foreach($categories as $child): ?>
            <div class="item">
                <a href="<?php echo $child->getUrl(); ?>" title="<?php echo Mage::helper('core')->escapeHtml($child->getName()) ?>">
                    <?php if ($child->getThumbnail()) : ?> <!-- if you are using the 'image' attribute replace  `getThumbnail` with `getImage`-->
                        <img class="child-image" alt="<?php echo Mage::helper('core')->escapeHtml($child->getName())?>" src="<?php echo Mage::getBaseUrl('media').'catalog/category/'.$child->getThumbnail() ?>" /><!-- if you are using the 'image' attribute replace  `getThumbnail` with `getImage`-->
                    <?php endif;?>
                </a>
                <a href="<?php echo $child->getUrl(); ?>" title="<?php echo Mage::helper('core')->escapeHtml($child->getName()) ?>"><?php echo $child->getName()?></a>
            </div>
        <?php endforeach; ?>
    </div>
<?php endif;?>

app/design/frontend/base/default/layout/easylife_subcategories.xml - the layout file

<?xml version="1.0"?>
<layout>
    <easylife_subcategories>
        <reference name="content">
            <block type="easylife_subcategories/subcategories" template="easylife_subcategories/subcategories.phtml" name="subcategories" before="-" />
        </reference>
    </easylife_subcategories>
    <catalog_category_layered>
        <update handle="easylife_subcategories" />
    </catalog_category_layered>
    <catalog_category_default>
        <update handle="easylife_subcategories" />
    </catalog_category_default>
</layout>

This will add the subcategories list in every category page at the top of the page.
If you want to add it somewhere in the middle of the page make the layout file from above look like this:

<?xml version="1.0"?>
<layout>
    <easylife_subcategories>
        <reference name="category.products">
            <block type="easylife_subcategories/subcategories" template="easylife_subcategories/subcategories.phtml" name="subcategories" before="-" />
        </reference>
    </easylife_subcategories>
    <catalog_category_layered>
        <update handle="easylife_subcategories" />
    </catalog_category_layered>
    <catalog_category_default>
        <update handle="easylife_subcategories" />
    </catalog_category_default>
</layout>

and add in app/design/frontend/{package}/{theme}/catalog/category/view.phtml the following line, in the place where you want the subcategories to be listed.

<?php echo $this->getChildHtml('subcategories')?>

If you don't want to add the subcategories block to all the categories then you can skip the creation of the layout file.

You can add the subcategories block inside any cms page or cms block by using this {{block}} directive

{{block type="easylife_subcategories/subcategories" template="easylife_subcategories/subcategories.phtml" category_id="10"}}

Replace 10 in the directive above with the parent category id you need.
If you don't specify a category id like below

{{block type="easylife_subcategories/subcategories" template="easylife_subcategories/subcategories.phtml"}}

and you show the block in a category page, the subcategories of that category will be listed. It is useful if you want to show the subcategories for only a few parent categories. You just create a cms block and use that block for the categories you need in Display mode->CMS Block field of the categories you want without having to create one block for each category.

If you use the code in a static page then all the top level categories will be shown.

You are using a block of type catalog/product_list and is a general product list block that is used to show a product list. If you are using this block, then you need to specify from which category, that you need to show products. Without specifying it, this general product list block will not understand which list of products that should show in homepage. So use this

{{block type="catalog/product_list" name="home.catalog.product.list" category_id="7" template="catalog/product/list.phtml"}}

If you need to show latest products, then the block that you need to use is of type catalog/product_new.

{{block type="catalog/product_new" name="home.catalog.product.list" template="catalog/product/list.phtml"}}

for version < 1.9

{{block type="catalog/product_new" name="home.catalog.product.list" template="catalog/product/new.phtml"}}

for version > 1.9