0

Magento 2.1.6 custom theme page layouts broken

Hi, I have my theme set up and working correctly but now I want to add a custom homepage layout. I have set it up like so:

Sulman

....Sulmantheme

........Magento_Theme

............page_layout

................custom_home.xml

............layouts.xml

layouts.xml:

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="custom_home">
        <label translate="true">Custom Home</label>
    </layout>
</page_layouts>

custom_home.xml: (copied from 1column.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="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>

The new custom page layout can now be selected in the CMS page:

enter image description here

I then clear cache and deploy static content.

But when I visit the page in the browser it is blank. When I view source I see the bare bones html, which is coming from /vendor/magento/module-theme/view/base/templates/root.phtml

<!doctype html>
<html lang="en-GB">
    <head >
        <script>
    var require = {
        "baseUrl": "http://sulman.local/pub/static/version1494324423/frontend/Sulman/Sulmantheme/en_GB"
    };
</script>
        <meta charset="utf-8"/>
<meta name="description" content="lorem ipsum"/>
<meta name="keywords" content="lorem ipsum"/>
<meta name="robots" content="NOINDEX,NOFOLLOW"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<link  rel="stylesheet" type="text/css"  media="all" href="http://sulman.local/pub/static/version1494324423/frontend/Sulman/Sulmantheme/en_GB/mage/calendar.css" />
<link  rel="stylesheet" type="text/css"  media="all" href="http://sulman.local/pub/static/version1494324423/frontend/Sulman/Sulmantheme/en_GB/css/styles-m.css" />
<link  rel="stylesheet" type="text/css"  media="screen and (min-width: 768px)" href="http://sulman.local/pub/static/version1494324423/frontend/Sulman/Sulmantheme/en_GB/css/styles-l.css" />
<link  rel="stylesheet" type="text/css"  media="print" href="http://sulman.local/pub/static/version1494324423/frontend/Sulman/Sulmantheme/en_GB/css/print.css" />
<link  rel="icon" type="image/x-icon" href="http://sulman.local/pub/static/version1494324423/frontend/Sulman/Sulmantheme/en_GB/Magento_Theme/favicon.ico" />
<link  rel="shortcut icon" type="image/x-icon" href="http://sulman.local/pub/static/version1494324423/frontend/Sulman/Sulmantheme/en_GB/Magento_Theme/favicon.ico" />
<script  type="text/javascript"  src="http://sulman.local/pub/static/version1494324423/frontend/Sulman/Sulmantheme/en_GB/requirejs/require.js"></script>
            </head>
    <body data-container="body" data-mage-init='{"loaderAjax": {}, "loader": { "icon": "http://sulman.local/pub/static/version1494324423/frontend/Sulman/Sulmantheme/en_GB/images/loader-2.gif"}}' class="cms-page-view page-layout-custom-home">
            </body>
</html>

It seems like no content is being loaded?? Any one have a clue? Thankyou.

0

You have created wrong directory structure Please follow the folder structure below to get the desired output

Sulman

....Sulmantheme

........Magento_Theme

............view

.................frontend

....................page_layout

........................custom_home.xml   

....................layouts.xml
  • Thanks but I'm pretty sure those paths are incorrect. I tried them but now the new layout doesn't even show up in the admin. – sulman May 9 '17 at 10:56
  • Please refer vendor\magento\module-theme\view\frontend for further reference – Paras Arora May 9 '17 at 11:23
  • I appreciate your help but I don't think you are correct. Google shows nothing to suggest your paths are correct. Also the path you gave for me to check is for a module? I am referring to a theme. – sulman May 9 '17 at 11:44
  • Please see official Magento docs: devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/… – sulman May 9 '17 at 11:49
  • please refer my new answer below – Paras Arora May 9 '17 at 12:01
0

Path app\design\frontend{{Vendor}}{{Theme}}\Magento_Theme\page_layout create file custom_home.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="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>

This will be the reference to your new layout. Now initialize the new layout to your theme

in the directroy **app\design\frontend{{Vendor}}{{Theme}}\Magento_Theme**

layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="custom_home">
        <label translate="true">Custom Home</label>
    </layout>
</page_layouts>
  • That is exactly what I have put in my original question that isn't working!? Have I missed something?! I even copied and pasted your code juts in case I had a typo somewhere. Nope. Exactly the same output... – sulman May 9 '17 at 12:04

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.