How to Create Custom Blocks in Magento

The Magento platform is flexible enough to let you create CMS pages and call a Magento custom block from within these pages. But sometimes you need more than that, like to create a block and apply it to other areas of Magento layout which are untouchable from CMS pages in Magento backend.

In this tutorial, we’re gonna show you how to create a Magento custom block, as well as how to allocate it to a specific page using the widget tool. 

Create custom block

Step 1: Module Installation XML file

Create the custom block in /app/etc/modules directory, for example “MyExtensions_HelloBlock.xml”

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <MyExtensions_HelloBlock>
            <active>true</active>
            <codePool>local</codePool>
        </MyExtensions_HelloBlock>
    </modules>
</config>

Step 2: Module Configuration XML file

/app/code/local/MyExtensions/HelloBlock/etc/config.xml

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <modules>
        <MyExtensions_HelloBlock>
            <version>0.0.1</version>
        </MyExtensions_HelloBlock>
    </modules>
    <global>
        <blocks>
            <helloblock>
                <class>MyExtensions_HelloBlock_Block</class>
            </helloblock>
        </blocks>
    </global>
</config>

Step 3: The Block Class

Create the block class (Hello.php, for example) under /app/code/local/MyExtensions/HelloBlock

<?php
class MyExtensions_HelloBlock_Block_Hello extends Mage_Core_Block_Template
{
    public function hello()
    {
        echo “hello”;
    }
}
?>

Step 4: Template file for your custom block

Create a template file to use for your block

<?php
$this->hello();
?>

Enter the following code to create this block dynamically in any existing template file

//helloblock matches <helloblock> in the module config file
//hello matches the block class name
echo $this->getLayout()->createBlock('helloblock/hello')->setTemplate('helloblock/hello.phtml')->toHtml();

To insert this block by adding it to a existing layout file

<block type="helloblock/hello" name="helloblock" template="helloblock/hello.phtml"/>

For example, to insert this to the category product view xml,

MageRoot/app/design/frontend/base/default/layout/catalog.xml

<catalog_product_view translate="label">
	<label>Catalog Product View (Any)</label>
	<!-- Mage_Catalog -->
	<reference name="root">
		<action method="setTemplate">
			<template>page/2columns-right.phtml</template>
		</action>
	</reference>
	<reference name="head">
		<action method="addJs">
			<script>varien/product.js</script>
		</action>
		<action method="addJs">
			<script>varien/configurable.js</script>
		</action>
		<action method="addItem">
			<type>js_css</type>
			<name>calendar/calendar-win2k-1.css</name>
			<params/>
			<!--<if/><condition>can_load_calendar_js</condition>-->
		</action>
		<action method="addItem">
			<type>js</type>
			<name>calendar/calendar.js</name>
			<!--<params/><if/><condition>can_load_calendar_js</condition>-->
		</action>
		<action method="addItem">
			<type>js</type>
			<name>calendar/calendar-setup.js</name>
			<!--<params/><if/><condition>can_load_calendar_js</condition>-->
		</action>
	</reference>
	<reference name="content">
		<!--This is the line added to this catalog.xml file-->
		<block type="helloblock/hello" name="helloblock_hello" template="helloblock/hello.phtml"/>

Step 5: Refresh cache after added the hello block, then you will see the Hello on a product detail page.

Magento 2 Duplicate CMS Page/Block

$79,00

Position a block using Widget

Step 1: Choose the widget type

1. On the Admin sidebar, go to Content > Elements > Widgets.
2. In the upper-right corner, click Add Widget.
3. In the Settings section, set Type to CMS Static Block > Continue.
4. Verify that Design Theme is set to the current theme > Continue.

5. In the Storefront Properties section, do the following:

• Enter a title in Widget Title.
• For Assign to Store Views, select the store views where the widget will be visible.
  You can select a specific store view, or All Store Views. 

To select multiple views, hold down the Ctrl key (PC) or the Command key (Mac) and click each option.

Step 2: Complete the widget layout updates

1. In the Layout Updates section, click Add Layout Update.
2. Set Display On to the category, product, or page where you want the block to appear.
3. To place the block on a specific page:
   • Choose the Page where you want the block to appear.
   • Choose the Block Reference that identifies the place where the block is displayed on the page.
   • Accept the default setting for Template, which is set to CMS Static Block Default Template.

Step 3: Place the block

1. In the left panel, select Widget Options.
2. Click Select Block… and choose the block that you want to place from the list.
3. Click Save when complete.
   The app now appears on the list.
4. When prompted, follow the instructions at the top of the page to update the index and page cache.
5. Return to your storefront and verify that the block appears in the correct location.
   You can reopen the widget to move the block to a different page or change the block reference.