Magento 2: Adding A Block To Home Page Using Layout File

Magento 2: Adding A Block To Home Page Using Layout File

In Magento 1, if you wanted to insert any block on the home page, you would open theme’s default.xml file and add cms_index_index action and insert block inside a reference tag.

After the release of  Magento 2, default.xml is gone. In order to add a block to the home page or any other page, there are many ways.
One way we use is to create a new module. This is how we are going to proceed.

Before creating a Magento 2 module, you should disable Magento cache and put Magento in developer mode.

Creating the Module

Create the following folders:

app/code/RLTS
app/code/RLTS/Helloworld

The RLTS folder is the module’s namespace, and Helloworld is the module’s name.

Now that we have a module folder, we need to create a module.xml file in the app/code/RLTS/Helloworld/etc folder with the following code:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
 <module name="RLTS_Helloworld" setup_version="1.0.0">
 </module>
</config>

To register the module, create a registration.php file in the app/code/RLTS/Helloworld folder with the following code:

<!--?php </p> <p>\Magento\Framework\Component\ComponentRegistrar::register(<br ?--> \Magento\Framework\Component\ComponentRegistrar::MODULE,
'RLTS_Helloworld',
__DIR__
);

Open your terminal and go to the Magento 2 root. Run from there the following command:

php bin/magento setup:upgrade

If you want to make sure that the module is installed, you can go to Admin → Stores → Configuration → Advanced → Advanced and check that the module is present in the list or you can open app/etc/config.php and check the array for the ‘RLTS_Helloworld’ key, whose value should be set to 1.

Adding Layout File to Add a Block to Home Page

If you want to add any block to any page, you need to create a layout file in following directory.

app/code/RLTS/Helloworld/view/frontend/layout

The name of layout file will depend on the action of page you want layout to apply. In our case, we want to update home page, so we create a file cms_index_index.xml
Put following code in the file to add a block:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
<referenceContainer name="content">
 <block class="Magento\Wishlist\Block\Customer\Sidebar\Interceptor" name="sidebarHome" template="Magento_Wishlist::sidebar.phtml"/>
 </referenceContainer>
</body>
</page>

Here you can see we have added a block in content Container of home page.

Back to blog