Skip to main content

Adding a custom body class to a page in Magento 2

· 2 min read

In this tutorial we will show how to add a custom body class to a specific page (or every page) in a Magento 2 store.

The code provided in this article was tested on Magento 2.1.0

Body clases in Magento​

Magento adds classes to the <body> tag on every page to help the developers make custom designs per page.

If you go for example to a product page, and look at the <body> tag, you will see something like -

<body class="catalog-product-view product-fusion-backpack page-layout-1column"> ... </body>

The body classes of this page are:

  • catalog-product-view
  • product-fusion-backpack
  • page-layout-1column

Now you can use any of those classes in you CSS files to add specific design changes to this page.

Adding a custom body class to a page​

If you want to add a custom body class to some specific page (or to all pages), you can do this using a plugin:

Step 1: Create a basic plugin Myvendor/Mymodule​

To create the basic plugin, create the following file -

app/code/Myvendor/Mymodule/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Myvendor_Mymodule" setup_version="1.0.0" />
</config>

and the following file -

app/code/Myvendor/Mymodule/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Myvendor_Mymodule',
__DIR__
);

Step 2: Add a configuration in frontend/di.xml​

In app/code/Myvendor/Mymodule/etc/frontend/di.xml add the following code:

app/code/Myvendor/Mymodule/etc/frontend/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
    <type name="Magento\Framework\View\Result\Page">
        <plugin name="myModuleResultPage" type="Myvendor\Mymodule\Plugin\Result\Page"/>
    </type>
</config>

Step 2: Implement the plugin​

Create the following file -

app/code/Myvendor/Mymodule/Plugin/Result/Page.php
<?php
namespace Myvendor/Mymodule\Plugin\Result;

use Magento\Framework\App\ResponseInterface;

class Page
{
    private $context;

    public function __construct(
    \Magento\Framework\View\Element\Context $context
    ) {
        $this->context = $context;
    }

    public function beforeRenderResult(
    \Magento\Framework\View\Result\Page $subject,
    ResponseInterface $response
    ){
        if($this->context->getRequest()->getFullActionName() == 'checkout_cart_index'){
        $subject->getConfig()->addBodyClass('my_custom_class');
        }

        return [$response];
    }
}

The Result​

Try going to checkout/cart page in your website. You should see the "my_custom_class" class added to the <body> tag.

If you want to add the body class to a different page, just change the "checkout_cart_index" to the full action name of the desired page. Or just remove the "if" statement, if you want to add your custom class to all pages.