How to set a theme on a specific route or page

Here you learn about how to set a theme on a specific route or page. Sometimes we have installed any theme on our front end and we need to check a page on the luma or blank theme while debugging any issue with the layout or functionality this might help you to do so.

Here we have a module named Webkul_Debug with routes.xml in Webkul/Debug/etc/frontend/routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="debug" frontName="debug">
            <module name="Webkul_Debug"/>
        </route>
    </router>
</config>

Then we create a controller to test the theme Webkul/Debug/Controller/Index/Index.php

<?php declare(strict_types=1);
namespace Webkul\Debug\Controller\Index;
use Magento\Framework\App\Action\HttpGetActionInterface;
use Magento\Framework\View\Result\Page;
use Magento\Framework\View\Result\PageFactory;
class Index implements HttpGetActionInterface
{
    /** @var PageFactory */
    private PageFactory $pageFactory;
    /**
     * Index constructor.
     * @param PageFactory $pageFactory
     */
    public function __construct(
        PageFactory $pageFactory
    ) {
        $this->pageFactory = $pageFactory;
    }
    /**
     * @return Page
     */
    public function execute(): Page
    {
        return $this->pageFactory->create();
    }
}

Then we create an events.xml file to capture the layout load before event Webkul/Debug/etc/events.xml

<?xml version="1.0" encoding="UTF-8"?>
<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="webkul_debug_set_theme_for_debug" instance="Webkul\Debug\Observer\SetThemeForDebug"/>
    </event>
</config>

Then we create an observer file for our event named “webkul_debug_set_theme_for_debug” SetThemeForDebug.php Path : “Webkul/Debug/Observer/SetThemeForDebug.php”

<?php declare(strict_types=1);
namespace Webkul\Debug\Observer;
use Magento\Framework\App\Request\Http;
use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\View\DesignInterface;
class SetThemeForDebug implements ObserverInterface
{
    /** @var Http */
    private Http $request;
    /** @var DesignInterface  */
    private DesignInterface $design;
    /**
     * @param Http $request
     * @param DesignInterface $design
     */
    public function __construct(
        Http $request,
        DesignInterface $design
    ) {
        $this->request = $request;
        $this->design = $design;
    }
    /**
     * @param Observer $observer
     */
    public function execute(Observer $observer): void
    {
        $pathInfo = $this->request->getPathInfo();
        if (substr($pathInfo, 0, 8) === '/debug') {
            $this->design->setDesignTheme('Magento/blank');
        }
    }
}

In the “setDesignTheme” function you can set any theme just like we passed the “Magento/blank” theme in the above code. And you can also change the condition on which the theme applies.

So that’s how to set a theme on a specific route or page. Now we can see the blank theme on our created route “{base_url}/debug” as shown in the below screenshot.

Here you check our other blogs:

https://webkul.com/blog/magento-2-how-to-configure-and-customize-system-xml/

https://webkul.com/blog/how-to-show-product-stock-remaining-items-in-magento-2/

Here you can check all about Magento 2 themes configuration, and development.

https://developer.adobe.com/commerce/frontend-core/guide/themes/

Please feel free to ask any questions we will try to answer them.

Divya Prakash
1 Badges

14 October 2022