Additional wrapper inside page.wrapper

Question

I need to add additional wrapper in my Magento2 custom theme layout, so it would be

<div class="page-wrapper">
  <div class="my-custom-wrapper">
     ... all other cotainers ....
  </div>
</div>

How can I do that?

Answer 1

What you call wrappers are Magento 2 containers. You can add containers easily via XML with code like this:

<referenceContainer name="page.wrapper">
    <container name="my.custom.wrapper" htmlTag="div" htmlClass="my-custom-wrapper" />
</referenceContainer>

I suggest you read the official documentation for layout customization tasks as it's quite well documented: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-overview.html

Answer 2

It works when I added it to app\design\frontend\Vendor\MyTheme\Magento_Theme\page_layout\empty.xml

<container name="page.wrapper" as="page_wrapper" htmlTag="div" htmlClass="page-wrapper">
        <container name="my.custom.wrapper" as="my.custom.wrapper" htmlTag="div" htmlClass="my-wrapper">
            <container name="global.notices" as="global_notices" before="-"/>
            .....
        </container>
</container>

And also change parent container from page.wrapper to my custom, in app\design\frontend\Vendor\MyTheme\Magento_Theme\page_layout\1column.xml

<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="my.custom.wrapper">
    <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>
    .....