Adding a custom body class to a page in Magento 2

Sep 14, 2017

by Mexbs team

Magento Tutorials

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 Magetno 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 -

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

with the following content

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

with the following content -

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

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">

</config>

Step 2: Implement the plugin

Create the file app/code/Myvendor/Mymodule/Plugin/Result/Page.php

With the following content -

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