Articles in this series

Author - Paryank Kansara

I have extensive experience in web development of community based and enterprise level applications. My expertise includes sectors like: e-Commerce, Social Networking Portals, Content Management Systems, etc.

More Info » Follow me on Twitter »

Reader Comments (45)

  1. Chris
    Chris
    October 12, 2010 at 10:38 pm /

    Great! Really looking forward to the rest in the set!

    Reply
  2. Matthew Ellis
    October 27, 2010 at 11:36 pm /

    This is awesome! Thanks so much. The official docs for Magento are really, really poor. This one page alone is worth more that a whole day on the Magento forums! Hope part 2 comes soon.

    Reply
    1. Joe Fletcher
      November 3, 2010 at 9:03 am /

      I’ll second that! This is seriously the “missing manual” on how to learn Magento’s XML system. I’ve been doing Magento sites for a few years now, but just now getting the hang of the XML for layout as opposed to hardcoding in the phtml template files.

      Reply
    2. John
      John
      July 21, 2011 at 9:55 am /

      I third that. Bravo Paryank!

      Reply
      1. Robert Popovic
        July 22, 2011 at 9:21 am /

        Yes, understanding the layout XML is very important and gives powerful tools and techniques for customizing Magento.

        We’re glad you guys find the material here useful.

        Reply
        1. Alex
          Alex
          July 22, 2011 at 4:17 pm /

          Awesome website you guys have here. Keep it up! Thanks a bunch for sharing your knowledge.

          Reply
  3. Matt
    Matt
    November 3, 2010 at 9:38 am /

    Really useful, thanks! Would be great to see some advice on working with local.xml to control layouts in the future.

    Reply
    1. Robert
      November 3, 2010 at 9:49 am /

      @Matt

      In our second installment that’s already under way, we will talk about local.xml. In fact, it’s such an important “trick” that we will post a Quick Tip just about local.xml very soon.

      Reply
  4. Matt
    Matt
    November 3, 2010 at 10:53 am /

    Good to know! Some things I’ve been struggling with local.xml were/are: firstly simply just finding the reference names for the parts of the layout I want to alter! Then finding the handle name for the specific parts I want to work with eg ‘tags_popular’.

    I’ve been looking for a definitive reference for action names and their uses. Loads of tutorials cover just removing stuf but not seemingly simple stuff like moving and reordering the page components.

    I could go on and on! I look forward to future posts.. really useful resource, thanks again.

    Reply
  5. osdave
    osdave
    November 11, 2010 at 2:23 am /

    this is just awesome! thank you so much for this.

    Reply
  6. katzkie
    katzkie
    November 22, 2010 at 4:29 pm /

    hey, thanks for the info. this really helps me a lot. I can’t wait for the part 2. I bookmarked your site hoping I could get some solutions from you. Looking forward for more tutorials.

    Reply
  7. Kristof
    November 26, 2010 at 9:33 am /

    @Matt you should check out CommerceBug by Alan Storm. It gives a whole lot of useful information about the current page including the complete xml which Magento loaded. It’s worth the money considering how much time you could spent searching for this information.

    Reply
  8. Matt
    Matt
    November 26, 2010 at 11:55 pm /

    @Kristof – that looks like just what I need! Really useful, thanks for the info.

    Reply
  9. David
    March 16, 2011 at 2:06 am /

    Thanks guys, very useful, im slowly building up my knowledge of Magento.

    Reply
  10. Banners Anywhere With Magento Widget Instances – Tutorials – Magebase

    [...] for selection. You may be using a theme developed for Magento 1.3 or lower. You can reference our Layout XML article for hints on how to add the block labels to your [...]

  11. Ally
    May 26, 2011 at 10:33 pm /

    Superb article – just wish I had found it about 6 months ago. Really helps clear up a lot of misunderstanding in regards to xml layout.

    Reply
  12. Craig
    June 2, 2011 at 2:21 am /

    What a great article after reading some guides on the Magento website came across this and things are becoming alot clearer especially what the layout elements and block types mean. Thanks

    Reply
  13. 5 useful tricks for your Magento local.xml – Tutorials – Magebase

    [...] have covered a lot about Magento’s layout XML in our past 2 articles [1] [2]. We saw that Magento will read the layout XML files in a specific order and that the local.xml [...]

  14. Creating Custom Layout Handles – Tutorials – Magebase

    [...] discussed in previous articles about Magento’s Layout XML, Layout Handles in Magento’s layout XML are XML nodes which contain the definition of updates [...]

  15. Luglio7
    September 20, 2011 at 4:50 am /

    Waaa, just what i’m looking for ! thank you very much.

    Reply
  16. Gustavo
    October 10, 2011 at 11:08 am /

    Man, this is amazing.

    Reply
  17. 5 Useful Tricks For Your Magento local.xml | 奇才哥的外贸B2C SEO,SEM点滴

    [...] have covered a lot about Magento’s layout XML in our past 2 articles [1] [2]. We saw that Magento will read the layout XML files in a specific order and that [...]

  18. Frank Kemmer
    January 12, 2012 at 2:26 pm /

    We want to be able to re-order the attributes displayed when we compare products. Currently the attributes are displayed in the order they were created. For example when comparing attributes they display as::

    Name
    Manufacturer
    Item Number
    Brightness
    Weight
    Color
    Size

    If we want to add a new attribute such as “LUMENS”, it will display at the bottom of the list, but we would like to have it display between Brightness and Weight.

    We cannot find a way to reorder the display to order the attributes as we would like them to display. Do you have a suggestion or would you be able to assist us with this project?

    Reply
    1. Dani
      Dani
      January 18, 2012 at 9:17 am /

      Frank in admin section in attribute edit page you have position for every attribute at the layer nav …this can help you order your attributes :)

      Reply
  19. mobinaute
    mobinaute
    March 22, 2012 at 10:33 pm /

    Hi,
    thank you so much for this very rich article that made things about magento’s layout clear to me.
    I just have a question about how far can we take advantage of, can we make it responsive using one of those responsive web desing’s frameworks?
    thanks a lot :)

    Reply
    1. Robert Popovic
      March 24, 2012 at 12:24 pm /

      Magento’s layout xml is for controlling the content that appears on the pages in the various areas of the site.

      This doesn’t affect the implementation of the responsive design frameworks since those mainly affect the skin CSS using @media queries which are independent from the layout.

      Look at is this way:
      The layout xml governs the generation of the HTML and content on the pages. Your skin CSS and JS govern what happens with the HTML and content on the browser front-end which is where the responsive design is active.

      Reply
    2. mobinaute
      mobinaute
      March 25, 2012 at 12:43 pm /

      Hi,
      Thank you so much Robert for replying, Yes I see clearly now, the changes could affect the templates too, I ve noticed that there’s no header or nav tag of HTML5 in there, which using media queries does require. I ve spent 2 days just trying to make the categories responsive, but it seems to be very hard work!! my question if you allow me is: could magento existing themes turn reponsive? or they have to be created that way from zero? in the two cases it seems to me that it would be the hardest choice for a cross media strategy, am I right?

      Reply
  20. david
    david
    March 25, 2012 at 2:16 am /

    hi,
    you say in the article:

    ifconfig can only be used within an action element

    And I was thinking the same, but I have just seen in the rss.xml this attribute applied to a block. In the default handle, line 36:
    {code} {/code}
    do you know something about thi particular use of ifconfig
    regards

    Reply
  21. david
    david
    March 25, 2012 at 3:13 am /

    sorry for the double posting, here is the code I was refering to:

            <block type="rss/list" name="head_rss" ifconfig="rss/config/active" />
    Reply
  22. john
    April 12, 2012 at 4:25 am /

    Thanks a lot for writing this post!

    Reply
  23. Understanding the Grid Serializer Block – Tutorials – Magebase

    [...] Here, the root block is core/text_list type. So all children blocks are automatically rendered in sequence. See Demystifying Magento’s Layout XML Part 1. [...]

  24. Magento Tips | Peter Zhou's Blog
    June 13, 2012 at 4:15 am /

    [...] Magento’s Layout XML VN:F [1.9.7_1111] please wait… Rating: 10.0/10 (2 votes cast) [...]

  25. Ben Marks
    August 15, 2012 at 7:31 am /

    Great writeup. One note: the layout update handles derived from the action’s full action name are based on the router configuration node name, not the frontname value which is incorrectly identified above as

    [module_front_name]_[controller_name]_[action_name]

    .

    Reply
  26. Ruiwant Magento
    August 30, 2012 at 2:12 am /

    Thank you very much. A wonderfull layout tutorial of magento!!!

    Reply
  27. Peter
    October 24, 2012 at 4:57 am /

    Section about layout handles:

    maybe I just didn’t understood this properly but for me this wasn’t 100% clear and I thought [module_front_name] was a value from node which is not.

    it’s

    [name_of_route_in_your_config_xml_routers]_[controller_name]_[action_name]

    Peter

    Reply
  28. Peter
    October 24, 2012 at 5:00 am /

    Can’t edit comments for some reason :( Just delete my previous comment and keep this one.

    Section about layout handles:

    maybe I just didn’t understood this properly but for me this wasn’t 100% clear and I thought [module_front_name] was a value from frontName node which is not.

    it’s

    [name_of_route_in_your_config_xml_routers]_[controller_name]_[action_name]

    Peter

    Reply
  29. Mens Boxers
    November 4, 2012 at 10:22 am /

    Excellent tutorial just what i was after

    Reply
  30. A Linn
    A Linn
    December 5, 2012 at 8:24 pm /

    Thanks for the great tutorial. There seems to be so many ways to accomplish a particular layout. What’s the best way to format the home page so that the top row has two columns (slider left, video right) with the rest of the page being two-column right?

    Reply
    1. Mubashir
      Mubashir
      December 7, 2012 at 1:30 am /

      You can create a static block and put your static block inside home page….

      Reply
  31. Mubashir
    Mubashir
    December 7, 2012 at 1:24 am /

    very good explanation of the layouts and blocks…It helped me a lot to have a clear understanding about layouts and blocks in Magento

    Reply
  32. Path to layout xml files in magento | Code and Programming

    [...] but I have read at magebase and at magentocommerce that we can place our layout files [...]

  33. Magento Homepage | 迷途花开
    February 2, 2013 at 5:50 am /

    [...] Demystifying Magento’s Layout XML – Part 1 This entry was posted in Magento by admin. Bookmark the permalink. [...]

  34. Jirka Chmiel
    Jirka Chmiel
    March 7, 2013 at 3:26 am /

    Hello,

    Thank you for great post. I have a little note:

    If you want to translate asubnode use separator . between the node names.

    Ex.:

    <action method="addCrumb" translate="name params.label params.title">
      <name>Cart</name>
      <params>
        <label>Cart / Pay</label>
        <title>Cart / Pay</title>
        <link></link>
       </params>
    </action>
    
    Reply
  35. Comprendiendo el layout y el renderizado de los XML en Magento

    [...] Artículo original en inglés [...]

  36. John Yotis
    John Yotis
    June 23, 2013 at 7:19 pm /

    Excellent work. Congratulations!
    That is how MAGENTO should be explained in the official documents.

    Reply

Add a Comment & Join the Discussion

Insert small snippets of code by using [code]{your_code_here}[/code]
For larger code blocks please use http://pastebin.com and paste your link.

You may also use the following HTML in your comment: <a href="" title=""> <abbr title="">
<acronym title=""> <blockquote cite=""> <cite> <em> <strike> <strong>