In this blog, I want to share with you how to create a header link in your Magento 2 site.
Before we begin, if you don’t know how to create a simple custom module in Magento 2, please follow Step 1 in our guide here.
Now let’s code!
Step 1: We will create a CMS page. For example, we create a “Custom Link” page with an URL such as //domain.com/custom_link
Step 2: Create a default.xml file in the following path: app\code\Vendor\Module\view\frontend\layout with the following content:
<?xml version="1.0"?> <page xmlns:xsi="//www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="header.links"> <block class=”Vendor_name\Module_name\Block\Link" name="some_link" > <arguments> <argument name="label" xsi:type="string" translate="true">Custom link</argument> <argument name="path" xsi:type="string">test</argument> </arguments> </block> </referenceBlock> </body> </page>
For more details, the previous XML is used to register a Block Class in “Vendor_name\Module_name\Block\Link” . Then, set the Label and URL path for it in the arguments tag.
Step 3: Create the Block class Link with the following content:
<?php namespace Vendor\Module\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(); } return '<li><a ' . $this->getLinkAttributes() . ' >' . $this->escapeHtml($this->getLabel()) . '</a></li>'; } }
Well done, we just completed it. If your code works fine, it should be like the one that I created inside this image: a Membership Plans link beside the sign-in button on top of the page.
Otherwise, if your code doesn’t work or you face any problems in the process of adding a custom header link in Magento 2, our Magento experts are here to help. Don’t hesitate to contact us for more consultancy and solutions.