Add custom link in header in Magento 2

add-custom-header-link-magento-2

In this blog,  I want to share with you the way 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 the Step 1 in our guide here : //magenest.com/manage-cookie-magento-2/

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

Subscribe to our newsletter

Disclaimer:By clicking submit, you agree to share your contact information with us to receive news, announcements, and resources when they are available.
Relevant Entries
How to manage Cookies in Magento 220170510145610
How to debug Magento 2 code with Xdebug and PhpStorm (Part 1)20170421072230
How to use Knockout JS on a Magento 2 Frontend Page20170324041205