how to create custom layout page in custom theme

Question

I want to create a custom page layout in my custom theme. I have created a custom theme named "ktheme" with a parent theme. I created cutome_home.xml in the layout folder but I am just getting a blank home page.

How can I get the header to display on the home page?

• Arunendra: share your theme code here
• Rohan Hapani: Check this one : rohanhapani.com/add-new-page-layout-option-in-magento-2

Answer 1

Your question is very brief, it sounds like you're trying to create a new page layout? If that's correct you need to also declare it in layouts.xml.

Official documentation

How to Create a Custom Page Layout

Add your layout

In this example I'll create a layout named Test Layout, it's the exact same as the one column layout but you can add your own here.

Create this file (changing the name to suit your layout):

app/design/frontend/**VENDOR**/**THEME**/Magento_Theme/page_layout/test-layout.xml

Content:

<?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="empty"/>
 <referenceContainer name="page.wrapper">
 <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
 <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
 <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
 </referenceContainer>
</layout>

My test layout is based off the empty page layout so it's starting from scratch, you can also create a layout based another layout, such as 2columns-left or 3columns. To do that just replace <update handle="empty"/> with the layout you wish to use, e.g <update handle="3columns"/>

Inform Magento of your layout

Create this XML file:

app/design/frontend/**VENDOR**/**THEME**/Magento_Theme/layouts.xml

This is where you declare your custom layouts, like so.

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
 <layout id="test-layout">
 <label translate="true">Test Layout</label>
 </layout>
</page_layouts>

And now we can use our new layout either in the XML or the admin:

Page Layout

• kalpak savaliya: when i select test layout.. my home page is coming blank... what i should do to add header in home page..
• Ben Crook: You will need to add/edit your layout in the xml file to get it to display what you want, in my example it would be test-layout.xml. If you don't know how to add containers via the XML I suggest reading the documentation - devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/…. If you still don't understand then if you provide your code we should be able to help further.
• Michelangelo: Following your sample I get these error in my system.log gist.githubusercontent.com/anonymous/…
• Ben Crook: @Michelangelo - I don't think most those errors are related to this apart from No element found with ID 'before.body.end'. Did you copy and paste the code from above? As that error doesn't make sense to me, we haven't told Magento before.body.end is an element, it's a block name.
• Hugh Wood: So many examples don't mention to put it in the Magento_Theme sub folder of the theme, this is the only and first place I have found this information. Props. This solution works for Magento 2.2