What Are Layout Files?

As the denomination suggests, layout files are subsidiary in rendering front pages of Magento. Layout files are XML files that reside in app > design > frontend > your interface > your theme > layout.
Here, you can visually perceive that there are many layout files for any given module. Each Magento module has its own layout files like the customer module has the customer.xml layout file. Layout files contain structural blocks and content blocks.

The file structure of our new module should look like this:

       
      app
        - code
           - local
             - Customer
               - Layout
                 - etc
                    - config.xml

 
etc
 - modules
   - Customer_Layout.xml

Go to app > design > frontend > base > layout and open the customer.xml file. Here, all blocks are wrapped around main tag. You can optically discern the different which contains concrete blocks.

<customer_account_create translate="label">
    <label>Customer Account Registration Form</label>
    <!-- Mage_Customer -->
    <remove name="right"/>
    <remove name="left"/>

    <reference name="root">
        <action method="setTemplate"><template>page/1column.phtml</template></action>
    </reference>
    <reference name="content">
        <block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml">
            <block type="page/html_wrapper" name="customer.form.register.fields.before" as="form_fields_before" translate="label">
                <label>Form Fields Before</label>
            </block>
        </block>
    </reference>
</customer_account_create>

Handle

Handles are the main entity through which Magento identifies which block to load when a particular module is being called. <custome_account_create> is the module-categorical handle. This handle is being triggered when someone opens the customer registration page.

</custome_account_create>

Each handles content-nested block categorical to the page. Some of layouts files contain the handle. Module-concrete handles only render the blocks inside it when that module is being rendered in browser whereas default handle loads in most of the page.

block

Inside the handle there is the different different blocks which designate the template file to be render when that block is being called. Blocks are of two types:

1. Structurer Blocks
2. Content Blocks

In our layout file we are defining only the Content Blocks and then we wrap them in Structurer Blocks. For example, if someone is calling a customer registration page and we optate to load it on left, right, content, or footer, we wrap that block in its respective structurer block. Here, we have wrapped two blocks inside the "content" block which is a structurer block.

Blocks contains attributes like following:

• type defines the block classes in which we can define the different functionality


• name defines the unique name of particular block so the other blocks can make a reference of subsisting block by name and elongate it


• before/after are attributes that we can set that sanction us to define the position of our block inside structurer block


• template defines the genuine phtml file name and path where our HTML and PHP code goes


• action sanctions us to trigger any action like loading JavaScript and all by utilizing this attribute.


• as is an attribute is mainly utilized for structurer blocks

reference

The <reference> tag is use to elongate the blocks that already subsist. In this case, we have elongated the content block and inserted our own block into it. You must utilize the correct block name that you optate to elongate.</reference>

abstract

The <abstract> tag is use to abstract the concrete block. For example, verbalize that on your account registration page you, don't optate to exhibit the right and left columns.</abstract>

Child block

When you wrap one block under another block, that wrapped block is called child block. Whenever our parent block is called by our module, the child block is automatically called.

<block type="core/template" name="parent" 
 template="parent.phtml">
<block type="core/template" name="child"
 template="child.phtml">
</block>

You can call child block discretely too with below syntax in you template file

echo $this->getChildHtml(child');
root <block>

Open page.xml layout file, you will find the <root> block that is looks homogeneous to below

<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

Magento commences rendering from the root block. All other blocks are child blocks of the root block. The root block defines the structure of the page. Here, you can visually perceive that currently it's set to 3columns.phtml, you can transmute this to 1column.phtml, 2columns-right.phtml or 2columns-left.phtml.
</block>

Adding CSS and JavaScript to the Layout XML

For any particular page you can integrate CSS and JavaScript files into layout tag like this:

<customer_account_create>
 <reference name="head">
  <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
  <action method="addJs"><script>varien/js.js</script></action>
 </reference>
</customer_account_create>

In Magento versions file structures are different, default themes do not contain the layout and template directories. In that case you can engender your layout and template file in app > design > frontend > base directory.