In this post, we will learn how to create and use a block. Click here if you missed out the introduction to Magento blocks.

We need to create a module first. Click here to see the steps of creating a module.

Now create a new folder named Block under the Test\Basic folder. Create a file named date.php in this folder with the following code:

<?php
class Test_Basic_Block_Date extends Mage_Core_Block_Template{

    public function getCurrentDate(){
        return date("Y-m-d");
    }
}

Next we will define the block location in our etc\config.xml file. Add the <global> node like this:

<?xml version="1.0" ?>
<config>
    <modules>
        <Test_Basic>
            <version>1.0</version>
        </Test_Basic>
    </modules>
    <global>
        <blocks>
            <basic>
                <class>Test_Basic_Block</class>
            </basic>
        </blocks>
    </global>
</config>

So inside the <blocks> tag, we added a tag <basic> which is our module name. In the class section, we are telling Magento to find block classes in Test\Basic\Block folder.

Next, we will create a template file for our block. Create a folder named custom (or you can give any name) inside your theme’s template folder and then create a file current-date.phtml inside it. If you have installed sample data for Magento, it has a theme named rwd. So, you can create your folder in:

app\design\frontend\rwd\default\template\custom\current-date.phtml

In this file, we can call methods of our block. Add following line in this file:

<?php echo $this->getCurrentDate(); ?>

Next we need to tell Magento where we want to use this block. This can be done in three ways:

  1. Go and edit existing layout xml files ( never recommended )
  2. Create a local.xml file and do it there. This file contains all local changes for the current theme.
  3. Create your own layout update file and do it there ( recommended)

I’m not going to discuss point 1.

Layout update via local.xml

Create a new file ( if doesn’t exist ) local.xml in current theme’s layout folder. If you are using rwd theme, then the path would be:

app\design\frontend\rwd\default\layout\local.xml

Now add following code in this file:

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="header">
            <block type="basic/date" name="basic_date" template="custom/current-date.phtml"/>
        </reference>
    </default>
</layout>

reference is used to refer to an existing block. Here we are telling Magento that our block is available to the existing header block as a child. Hence, we can access our block in header.phtml by using getChildHtml(‘basic_date’) method.

How do we know we can access our block in header.phtml?

Open the file page.xml provided from Magento that contains all the pre-defined blocks. Find the following line in it:

<block type="page/html_header" name="header" as="header">

Here we can see that no template attribute defined. This means, the template for the block page/html_header must be defined in the block class.

Go ahead and open the file: app\code\core\Mage\Page\Block\Html\Header.php

You will find following in it:

public function _construct()
{
    $this->setTemplate('page/html/header.phtml');
}

This is how we know that header block is associated with page/html/header/phtml template.

Too confusing haan!

Remember, templates can be assigned to blocks from xml ( the layout file ) or code ( the block class ).

Lastly, to use our block, open the file:

app\design\frontend\rwd\default\page\html\header.phtml

Put the following line anywhere you want in this file:

Today's date is <?php echo $this->getChildHtml('basic_date'); ?>

Refresh your cache and refresh the page, you should see Today’s date string.

Layout update via our own xml file

This is the recommended approach as local.xml gets messy if too many updates are defined in it. Here are the steps for this:

  1. Create a new file named basic_date.xml in the following directory ( where you created your local.xml )
    app\design\frontend\rwd\default\layout\basic_date.xml
  2. Now add the same code as above in it:
    <?xml version="1.0"?>
    <layout>
        <default>
            <reference name="header">
                <block type="basic/date" name="basic_date" template="custom/current-date.phtml"/>
            </reference>
        </default>
    </layout>
  3. Next, we will specify this layout update file in our module’s configuration file etc\config.xml. Make sure it looks similar to this:
    <?xml version="1.0" ?>
    <config>
        <modules>
            <Test_Basic>
                <version>1.0</version>
            </Test_Basic>
        </modules>
        <global>
            <blocks>
                <basic>
                    <class>Test_Basic_Block</class>
                </basic>
            </blocks>
        </global>
        <frontend>
            <layout>
                <updates>
                    <basic>
                        <file>basic_date.xml</file>
                    </basic>
                </updates>
            </layout>
        </frontend>
    </config>
  4. Refresh your cache and reload your home page. You should see the date string at the top.

Finally, this long tutorial comes to end 🙂