---
title: "How to add custom CMS page layout in Magento 2?"
url: "https://magecomp.com/blog/add-custom-cms-page-layout-magento-2/"
date: "2019-02-01T18:48:41+00:00"
modified: "2025-05-29T05:41:03+00:00"
author:
  name: "Dhiren Vasoya"
  url: "https://magecomp.com/"
categories:
  - "How To"
  - "Magento 2"
word_count: 353
reading_time: "2 min read"
summary: "Good Design makes Business good too, and that's how Magento customization comes in! Everyone storeowner wishes to customize their store layout the way they love that's the reason why design and lay..."
description: "How to add custom CMS page layout programmatically in Magento 2. We'll cover process to create a custom page layout, define its structure, and integrate it"
keywords: "How To, Magento 2"
language: "en"
schema_type: "Article"
related_posts:
  - title: "7+ Top Magento 2 Duplicate Categories Extension Providers [2026]"
    url: "https://magecomp.com/blog/top-magento-2-duplicate-categories-extension-providers/"
  - title: "Magento 2: How to Create a Category using Data Patch"
    url: "https://magecomp.com/blog/magento-2-create-category-using-data-patch/"
  - title: "How to Implement Fields Dependency in Custom Admin Form of Magento 2"
    url: "https://magecomp.com/blog/implement-fields-dependency-custom-admin-form-magento-2/"
---

# How to add custom CMS page layout in Magento 2?

_Published: February 1, 2019_  
_Author: Dhiren Vasoya_  

![How to add custom CMS page layout in Magento 2](https://magecomp.com/blog/wp-content/uploads/2019/02/How-to-add-custom-CMS-page-layout-in-Magento-2-1024x332.webp)

Good Design makes Business good too, and that’s how Magento customization comes in! Everyone storeowner wishes to customize their store layout the way they love that’s the reason why design and layout vary from business to business. Layouts represent the structure of all pages and technically, the layout is a .xml file which contains declarations and different instructions. And when you want to modify existing store layout you need to modify existing layout but we never recommend you to make changes in Magento core. The overriding layout file is a safe and secure solution for customizing CMS page layout in Magento 2
Today, we are back again with a small piece of code that will help you to easily override custom CMS page layout in Magento 2.

[![Magento Malware Removal](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-Malware-Removal-CTA-6.webp)](https://magecomp.com/magento-malware-removal.html)
Step 1: First, we need to create **“custom-layout.xml”** file inside your theme at below directory.

**app\design\frontend\Themes\Yourtheme\Magento_Theme\page_layout**

```
<?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>
```

[![Magento 2 Speed & Performance Optimization Services](https://magecomp.com/blog/wp-content/uploads/2023/10/Magento-2-Speed-Performance-Optimization-Services-CTA-4.webp)](https://magecomp.com/magento-performance-optimization.html)

**Step 2:** Lastly, Create **“layouts.xml”** file inside your theme below directory.

**app\design\frontend\Themes\Yourtheme\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-layout">
        <label translate="true">Custom Layout</label>
    </layout>
</page_layouts>
```

That’s it. Simply clear cache and you are done with customizing CMS page layout.
That’s it for today, Let us know if you are facing an issue while implementing using this code by commenting below.

[![hyva theme development](https://magecomp.com/blog/wp-content/uploads/2025/02/hyva-theme-development-CTA-5.webp)](https://magecomp.com/services/hyva-theme-development/)
Happy Coding!


---

_View the original post at: [https://magecomp.com/blog/add-custom-cms-page-layout-magento-2/](https://magecomp.com/blog/add-custom-cms-page-layout-magento-2/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-20 21:11:46 UTC_