Magento 2: Add class to body from PHP

Question

I need to create a extension which adds a class to the body tag.

The class should be defined in the magento 2 backend in the extension settings.

How can I do this?

Answer 1

You can achieve your requirement by following steps:

Step 1. Create registration.php under

app/code/M2Expert/Classes/registration.php

with below content:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'M2Expert_Classes',
    __DIR__
);

Step 2. Create module.xml under

app/code/M2Expert/Classes/etc/module.xml

with below 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="M2Expert_Classes" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Backend"/>
        </sequence>
    </module>
</config>

Step 3. Create system.xml under

app/code/M2Expert/Classes/etc/adminhtml/system.xml

with below content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="m2expert" translate="label" sortOrder="10">
            <label>Mage 2 Expert</label>
        </tab>
        <section id="m2expert" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Body Class</label>
            <tab>m2expert</tab>
            <resource>M2Expert_Classes::class_config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>General Configuration</label>
                <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Enable</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="classes" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Classes</label>
                    <comment>These classes will be added to body tag on the frontend.</comment>
                    <depends>
                        <field id="m2expert/general/enable">1</field>
                    </depends>
                </field>
            </group>
        </section>
    </system>
</config>

Step 4. Create events.xml under

app/code/M2Expert/Classes/etc/frontend/events.xml

with below content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="layout_load_before">
        <observer name="m2expert_add_body_class" instance="M2Expert\Classes\Observer\AddClassToBody" />
    </event>
</config>

Step 5. Create AddClassToBody.php under

app/code/M2Expert/Classes/Observer/AddClassToBody.php

with below content:

<?php
namespace M2Expert\Classes\Observer;

use Magento\Framework\View\Page\Config as PageConfig;
use Magento\Framework\Event\ObserverInterface;

class AddClassToBody implements ObserverInterface
{
    protected $pageConfig;

    protected $scopeConfig;

    public function __construct(
        PageConfig $pageConfig,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->pageConfig = $pageConfig;
        $this->scopeConfig = $scopeConfig;
    }

    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        if (!$this->isEnabled()) {
            return;
        }

        if ($classes = $this->getClasses()) {
            foreach (explode(',', $classes) as $class) {
                $this->pageConfig->addBodyClass($class);
            }
        }        
    }

    private function isEnabled()
    {
        return $this->scopeConfig->getValue("m2expert/general/enable", \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
    }

    private function getClasses()
    {
        return $this->scopeConfig->getValue("m2expert/general/classes", \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
    }
}

Thats it! Now goto extension settings enable the module and put single or multiple classes(with comma separated) and use it!