3

In Magento 2, is there any solution to creating a custom layout XML file for custom cms page?

I want to add XML code and CSS and Js only for my custom cms page.

I know about there is one field available at admin side. But, XML code is the little bit large. So, it's not a better way.

Can anyone guide me how to create it?

Thanks.

Improve this question

4 Answers 4

Reset to default
15

You can create a custom CMS page layout file by using this below way.

File name should be like this :

cms_page_view_selectable_<CMS Page Identifier>_<Layout Update Name>.xml

=> For eg : If your cms page identifier is customhome, then file name should be cms_page_view_selectable_customhome_customhomelayout.xml

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/layouts/xml-manage.html search : For CMS Pages:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add your css and js file tag here-->   
    </head> 
    <body>
            <!-- Add your reference container, ref block etc. here -->
    </body>
</page>
Improve this answer
9
  • It's not working.
    – Jayesh
    Commented Oct 22, 2018 at 19:12
  • Can you please tell me any error log generate or?
    – Rohan Hapani
    Commented Oct 22, 2018 at 19:15
  • 1
    How do I find my "custom cms page identifier"?
    – br4nnigan
    Commented Feb 27, 2020 at 17:42
  • 2
    @br4nnigan, it's page's url key
    – Vladyslav Sikailo
    Commented Sep 7, 2020 at 15:00
  • 1
    To add to this, the xml file you create should be added to the Magento_Cms/layout directory within your theme
    – Karl Stephens
    Commented Jan 25, 2021 at 0:29
1

app/design/frontend/Vendor/theme/Magento_Theme/page_layout/column-full.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="1column"/>
    <referenceContainer name="page.wrapper">
        <referenceContainer name="header.container" htmlClass="header" />
        <referenceContainer name="main.content" htmlClass="main-content" />
    </referenceContainer>
</layout>

app/design/frontend/Vendor/theme/Magento_Theme/layouts.xml

<?xml version="1.0"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="column-full">
        <label translate="true">Column Full</label>
    </layout>
</page_layouts>

Now you can use layout="column-full" in your XML file or you can select "Column Full" in CMS page > Layout Dropdown.

Hope it helps.

Improve this answer
4
  • It's not working for me :(
    – Jayesh
    Commented Oct 22, 2018 at 19:04
  • I want to create in my custom module. not in theme
    – Jayesh
    Commented Oct 22, 2018 at 19:13
  • How can I add custom CSS in the column-full.xml?
    – Rafael Perozin
    Commented Nov 12, 2019 at 13:48
  • @RafaelPerozin you can't add custom CSS in head with this. This is page_layout (page_layout.xsd) and not layout (page_configuration.xsd). Technically you can add custom css in body with this. But the question is custom layout XML file for custom cms page. Which is completely different thing from this answer.
    – izzulmakin
    Commented Oct 18, 2022 at 8:01
0

You can create custom page XML layout file within your custom theme at:

app/design/frontend/Vendor/theme/Magento_Cms/layout/cms_page_view_id_page-url-key.xml
Improve this answer
0

I have a CMS page with URL key corporate, create following file worked

app/code/<VENDOR>/<MODULE_NAME>/view/frontend/layout/cms_corporate_index.xml

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.