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.

4 Answers 4

13

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>
9
  • It's not working.
    – Jayesh
    Oct 22, 2018 at 19:12
  • Can you please tell me any error log generate or? Oct 22, 2018 at 19:15
  • No log file generated about error
    – Jayesh
    Oct 22, 2018 at 19:20
  • 1
    How do I find my "custom cms page identifier"?
    – br4nnigan
    Feb 27, 2020 at 17:42
  • 2
    @br4nnigan, it's page's url key Sep 7, 2020 at 15:00
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.

4
  • It's not working for me :(
    – Jayesh
    Oct 22, 2018 at 19:04
  • I want to create in my custom module. not in theme
    – Jayesh
    Oct 22, 2018 at 19:13
  • +1 for answer :)
    – Jayesh
    Oct 22, 2018 at 19:23
  • How can I add custom CSS in the column-full.xml? Nov 12, 2019 at 13:48
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
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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