How to Add Custom Header Links in Magento 2

Posted On: March 25, 2017
Step 1:

Create a custom extension based on Magento 2 structure in the folder app/code.

Ex: Magento 2 root directory/app/code/vk/hd/

Step 2:

Create module.xml file in the below path to define your Magento 2 extension.

Magento 2 root directory/app/code/vk/hd/etc/module.xml

<?xml version=“1.0”?>

<config xmlns:xsi=”” xsi:noNamespaceSchemaLocation=”../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd”>

<module name=”vk_hd” setup_version=”2.0.1″></module>


 Step 3:

Create routes.xml in the below path for your custom link. Magento 2 root directory/app/vk/hd/etc/frontend/routes.xml

<?xml version=”1.0″?>

<config xmlns:xsi=”” xsi:noNamespaceSchemaLocation=”../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd”>

<router id=”standard”>

<route id=”hd” frontName=”hd”>

<module name=”vk_hd” />




Step 4:

Create layout file in the below path for a custom header. Magento2 root directory/app/vk/hd/view/frontend/layout/header.xml

<?xml version=”1.0″?>

<page xmlns:xsi=”” layout=”1column” xsi:noNamespaceSchemaLocation=”../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd”>


<referenceBlock name=”header.links”>

<move element=”test-last” destination=”header.links”/>

<block class=”vk\hd\Block\Header” name=”test-link” after=”my-account-link”/>




Step 5:

Create block file that is referred in the layout file in the below path. Magento2 root directory/app/vk/hd/Block/Header.php


namespace vk\hd\Block;

class Header extends \Magento\Framework\View\Element\Html\Link


protected $_template = ‘vk_hd::link.phtml’;

public function getHref()


return__( ‘testing’);


public function getLabel()


return __(‘Test Linking’);




Step 6:

Create template file that is referred to the block file in the below path. Magento2 root directory/app/vk/hd/frontend/templates/link.phtml


<a <?php echo $block->getLinkAttributes() ?>><?php echo $block->escapeHtml($block->getLabel())?>

<?php echo($block->getCounter()) ? ‘<span>’ . $block->escapeHtml($block->getCounter()) . ‘</span>’ : ”; ?>



Step 7:

After completing the above steps run the below Magento2 upgrade command in the command prompt:

php bin/magento setup:upgrade

Also Read :   Websites to find Freelance Writing Work
Subscribe to our newsletter
Subscribe to our newsletter today to receive updates on the latest news and offers.
100% Privacy. No spam guaranteed
webe tutorial