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
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>
-
-
Can you please tell me any error log generate or?Rohan Hapani– Rohan Hapani2018年10月22日 19:15:19 +00:00Commented Oct 22, 2018 at 19:15
-
1How do I find my "custom cms page identifier"?br4nnigan– br4nnigan2020年02月27日 17:42:57 +00:00Commented Feb 27, 2020 at 17:42
-
2@br4nnigan, it's page's url keyVladyslav Sikailo– Vladyslav Sikailo2020年09月07日 15:00:02 +00:00Commented Sep 7, 2020 at 15:00
-
1To add to this, the xml file you create should be added to the Magento_Cms/layout directory within your themeKarl Stephens– Karl Stephens2021年01月25日 00:29:11 +00:00Commented Jan 25, 2021 at 0:29
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.
-
It's not working for me :(Jayesh– Jayesh2018年10月22日 19:04:49 +00:00Commented Oct 22, 2018 at 19:04
-
I want to create in my custom module. not in themeJayesh– Jayesh2018年10月22日 19:13:51 +00:00Commented Oct 22, 2018 at 19:13
-
How can I add custom
CSSin thecolumn-full.xml?Rafael Perozin– Rafael Perozin2019年11月12日 13:48:57 +00:00Commented 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– izzulmakin2022年10月18日 08:01:23 +00:00Commented Oct 18, 2022 at 8:01
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
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