Custom Magento CMS page layout

30th MAR 2009 | Posted by in Administration, Magento
Featured Image

Last week I had a request to add new custom layout for few cms pages in one Magento shop. It’s really useful for different static pages of your shop. First create extension with only config file in it: app/code/local/Inchoo/AdditionalCmsPageLayouts/etc/config.xml

<?xml version="1.0"?>
<config>
<global>
<page>
<layouts>
<custom_static_page_one>
<label>Custom static page 1</label>
<template>page/custom-static-page-1.phtml</template>
</custom_static_page_one>
</layouts>
</page>
</global>
</config>

Then activate it: app/etc/modules/Inchoo_AdditionalCmsPageLayouts.xml

<?xml version="1.0"?>
<config>
<modules>
<Inchoo_AdditionalCmsPageLayouts>
<codePool>local</codePool>
<active>true</active>
</Inchoo_AdditionalCmsPageLayouts>
</modules>
</config>

Add your page/custom-static-page-1.phtml template file (or copy some default one for start) and you’re done ;) There is also tutorial about this on Magento Wiki. However i don’t like approach of duplicating and overriding Mage files from /local, if it can be avoided, so i decided to write this small and useful example of adding or overriding default Magento settings through separated config files. And yes, Magento values can be overridden this way. Default layouts config can be found in app/code/core/Mage/Cms/etc/config.xml along with used xml code structure, so check it out. Thank you for listening!

41
Top

Enjoyed this post?

Subscribe to our RSS Feed, Follow us on Twitter and spread it to your friends!

Author

Ivan Weiler

Team Leader

Ivan is a team leader and a senior web developer. He gained lots of experience managing some of the most complex Magento projects we had at Inchoo.

Other posts from this author

Discussion 41 Comments

Add Comment
  1. regges
    08-04-2009 at 8:41 | #

    Hi,
    Sorry but it doesn’t seems to work for me. I run the 1.3 version. Could I ask for some description (docuemntation?!) of the config.xml file and how to work with them.
    Thanks

  2. Jason
    08-04-2009 at 21:14 | #

    I tried this as well with Magento v1.2.1.2 and my new template did not show up either using your details described above.

    I verified the syntax of my xml files and phtml – no errors.

  3. Ivan Weiler
    09-04-2009 at 17:20 | #

    Hello and thank you for reporting this. I got some troubles while publishing xml in this post.

    Anyway, i just updated tag “codepool” to “codePool” in post. I think that may be the problem.

    @regges: Sorry, but there is no official Magento documentation. Many things can be found on Magento wiki and forum. My co-worker blog is also nice tutorial resource.

  4. samser
    20-04-2009 at 18:20 | #

    Thanks for this nice tutorial.

    Working great!

  5. samser
    22-04-2009 at 18:42 | #

    @Ivan Weiler
    On my local machine (XP), its working but surprisingly its not working onto server (Linux). I have uploaded files properly. Not showing new layout at admin panel.

    Any idea?

    Thanks in advance!

  6. nicolas
    19-06-2009 at 15:53 | #

    Since 1.3 version, due to files re-organization you have to replace “cms” tag by “page” like :

  7. Ivan Weiler
    20-06-2009 at 14:45 | #

    Thanks for the info !!

    Yes i just checked, <cms> is replaced with <page> in newer versions. I’m sorry your example got stripped :(

  8. yoni
    09-07-2009 at 23:01 | #

    don’t forget this newest addition to config.xml, which i saw in another forum:

    page_homepage

  9. yoni
    09-07-2009 at 23:02 | #

    uh, tags stripped.. here you go

  10. TestUser
    23-07-2009 at 13:14 | #

    I have created custom template and done all the neccessary changes in Config.xml and module.xml file but my layout is not lising in cms page.

    anyone can help me out

  11. Shahid
    20-08-2009 at 8:36 | #

    @Ivan Weiler
    I would say simply amazing stuff.

    Can you please reply on this thread?
    http://www.magentocommerce.com/boards/viewthread/52488/

    Thanks a lot for sharing information.

  12. Sankho Mallik
    13-12-2009 at 6:31 | #

    Hey, not trying to oneup you guys or anything but I recently blogged about a nice way to include static pages in Magento.

    It doesn’t use any config.xml – just a little shortcode in the CMS, and then you can edit your own phtml file

    Check it out!

    http://blog.sankhomallik.com/2009/12/11/magento-pages-using-text-editor-not-cms/

  13. John Swaringen
    23-01-2010 at 22:12 | #

    I REALLY appreciate this. It works and is easy to adjust.

  14. John Swaringen
    28-01-2010 at 5:13 | #

    Ivan (and anybody else)

    Opps… spoke too soon.

    It works great on my local dev environment (Win7, Apache 2.2, PHP 5.2) however the same code won’t run on a staging server (Linux, Apache 1.3.33,PHP 5.2). I’ve done the following:

    - Checked permissions on the files and dirs. (set to 755 but changed to 777)
    - Disabled and re-enabled in “advanced”
    - Tried different names, and encodings (default is UTF-8)
    - Made sure all files are present.

    Ok.. now I’m stumped any thoughts?

    Thanks again.

  15. Joshua Lee
    13-04-2010 at 5:32 | #

    sounds good! I’ll hava a try!

  16. johoo
    24-05-2010 at 0:37 | #

    Thanks, this is what i was looking for ;)

  17. Shakti
    26-06-2010 at 9:18 | #

    John, I faced the exact same thing… were you able to find a solution for this?

  18. Shakti
    26-06-2010 at 10:26 | #

    if any one is interested, i solved this by doing the following :
    In the edit cms page, i chose the default “Empty” layout and added the following the Layout Update XML:

    
    page/home.phtml

    my home.phtml now works exactly like it should work in Ivan’s article above.

  19. Shakti
    26-06-2010 at 10:27 | #

    Sorry! the tag didn’t work as expected. here’s the xml code

    page/home.phtml

  20. JeremyFP
    24-08-2010 at 16:51 | #

    Hey, I just wanted to give you a quick heads up because there’s a slight bug with this method as you have it right now.

    You need to add a line in config.xml for “layout_handle” (it holds the id used for layout caching). Otherwise, you’re likely to get an error that says,
    “Invalid id or tag: must use only [a-zA-Z0-9_]”
    if layout caching is turned on.

    Here’s an example:
    [/code]

    Custom static page 1
    page/custom-static-page-1.phtml
    page_custom_static_page_one

    [/code]

    Ta, and thanks for the great resource, inchoo!

  21. JeremyFP
    24-08-2010 at 16:52 | #

    D’oh! put that wrapper on wrong. Sorry, here’s the right code:

    
     Custom static page 1
     page/custom-static-page-1.phtml
	 page_custom_static_page_one

    Sorry ’bout that.

  22. JeremyFP
    24-08-2010 at 16:54 | #

    Hmm. it still didn’t format correctly. Check out magentocommerce.com/boards/viewreply/151194/ for the right stuff.

  23. kashyap
    01-10-2010 at 10:48 | #

    Plz help me………..
    I have 1 index.html file which contains link to css and js files in section and page layout .
    my css,js and images are placed in skin folder new package/new theme/….
    but its not working so any body tell me where and how can i put my html file so that i can get correct result….and the type of thing i’m creating should look like this
    go to : http://www.sourcebits.com/nerve/
    thank you

  24. kashyap
    01-10-2010 at 12:18 | #

    and anyone know about this mail me at niranjan.kashyap@gmail.com

  25. bristol web designer
    05-10-2010 at 16:31 | #

    Hey, this is a great post! As far as understanding the Magento templating process this has bought me just that little bit closer. Thanks!

  26. HotCustard
    16-01-2011 at 14:47 | #

    Many Thanks, worked for me with the latest 1.5 beta 1.

  27. Lukasz Waszczuk
    20-01-2011 at 22:40 | #

    I had few problems with Magento Enterprise 1.8.0.0

    The config.xml file had to have a config module included 

    <config>

    <modules>
        <Inchoo_AdditionalCmsPageLayouts>
            <version>0.1.0</version>
        </Inchoo_AdditionalCmsPageLayouts>
    </modules>

 <global>
  <cms>
   <layouts>
    <custom_static_page_one>
     <label>Custom static page 1</label>
     <template>page/custom-static-page-1.phtml</template>
    </custom_static_page_one>
   </layouts>
  </cms>
 </global>
</config>

    Now I was trying to have it being disabled in the System Advance configurations and when I turn it off it does not work. Is there a way to have it disabled when picking a different website. I have multiple website on single install and i just want to enable the Module for the site that it was build for.

  28. mike
    05-02-2011 at 22:00 | #

    Perhaps this example is outdated. I’m working on the current version of magento and nothing shows when I try this.

  29. Craig
    02-03-2011 at 10:27 | #

    I don’t usually post comments on blogs, but this article helped me out a lot, so thanks for your help.

    Only thing I must add, I would change the colour of the code, as it is impossible to see in white text.

    Great Article

  30. Tim
    13-03-2011 at 11:16 | #

    Just wanted to give a shout out and say that your solutions worked perfectly in under two minutes.

    Two copy pastes, create folder structure, upload, done.

    Thanks.

  31. Istvan
    26-03-2011 at 20:40 | #

    Hi, thanks for your article, it’s very helpful.
    Maybe this post is not the right place, but I have a question.
    I want to put in cms page a few div ‘s with toggle button to show/hide the div (this works with javascript). When save the cms page and test it works, then i go back and let’s say just edit the div text and save again the cms page, and now when I test the page, it does not work anymore.
    any sugestion???

  32. Vicky Thakur
    15-04-2011 at 7:46 | #

    Thanks for article.Its really pull me out from custom home page this problem.
    Thanks Agian!

  33. Web Design Glossop
    12-05-2011 at 11:00 | #

    This is very helpful, I have just implemented it into my latest project.

    Thankyou!

  34. Helder
    28-05-2011 at 5:57 | #

    Even when this post helped me a lot to understand the process, I even refined it here: http://j.mp/k9nf3N. I explain the “why” for some things and also, the code is visible (I don’t know what happened on the code section on this post, but for me it’s very hard to read the light font color over light background).

  35. Matt W
    27-06-2011 at 23:19 | #

    Thanks again, guys. More great work! Works like a charm on my 1.5.1 install!

    Keep up the great work!

  36. Joao
    03-08-2011 at 16:58 | #

    There’s any way of adding new page layouts using exclusively local.xml in design folder? If yes, how?!…

    Thank you!

  37. eggplanet(gowri)
    02-11-2011 at 7:30 | #

    Thank you works perfectly !

  38. mike
    26-01-2012 at 8:48 | #

    Thanks a lot!! Saved me a lot of goggling and research. Right on.

  39. Roxana
    10-05-2012 at 10:45 | #

    It is not working in case of Magento ver. 1.6.2.0 .
    I can see it in the admin panel and chose the layout but the page uses the 3columns.phtml template.
    Any idea?

  40. Shakti
    16-05-2012 at 8:43 | #

    In the later version, you need mark the page block know you’ve applied the new template.

    Here’s the new code:

    <reference name="root">
<action method="setTemplate">
<template>page/custom_page.phtml</template>
</action>
<action method="setIsHandle">
<applied>1</applied>
</action>
</reference>
  41. Shakti
    16-05-2012 at 8:46 | #

    FYI, you can add the above code in CMS > Design > “Layout Update XML” field and select any template from the dropdown.
    No need to edit any file or create an unnecessary module just to get an option in the dropdown.

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top