Add Custom Block and Link Header in Magento 2

In this article, we will learn how to call a custom link and block in the header in Magento 2.

So, the file (default.xml) is used to define configurations of the header. This file will be located under app/code/Namespace/Module/view/frontend/layout/. This file calls on every page, that’s why we write code for the header in this file.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
     <referenceBlock name="header.links">
       <block class="Magento\Framework\View\Element\Html\Link" name="webkul-top-link">
         <arguments>
           <argument name="label" xsi:type="string" translate="true">Test Link</argument>
           <argument name="path" xsi:type="string">test/test</argument>
         </arguments>
       </block>
     </referenceBlock>
</body>
</page>

Now If you want to add your custom block inside the header,
The below code will be used :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
     <referenceBlock name="header.links">
       <block class="Webkul\Test\Block\Link" name="webkul-top-link">
         <arguments>
           <argument name="label" xsi:type="string" translate="true">Test Link</argument>
           <argument name="path" xsi:type="string">test/test</argument>
         </arguments>
       </block>
     </referenceBlock>
</body>
</page>

Now, create Link.php at location app/code/Webkul/Test/Block and add the below code.

<?php
 
namespace Webkul\Test\Block;
 
class Link extends \Magento\Framework\View\Element\Html\Link
{
  /**
   * Render block HTML.
   *
   * @return string
  */
  protected function _toHtml() {
    if (false != $this->getTemplate()) {
      return parent::_toHtml();
    }
    $label = $this->escapeHtml($this->getLabel());
    return '<li><a ' . $this->getLinkAttributes() . ' >' . $label . '</a></li>';

  }
}

Now flush the cache of the Magento by running the below command:
php bin/magento cache:flush

You will see the top link on your store like below.

In this way, you can create custom top links.
Hope it will help you. Thank you.

Categories: Magento2

Anuj Gupta 22-February-2024

View Comments Comment or Ask a Question

Quick Links