How to Include Custom Header Links in Magento 2?

  • Posted by Envision Ecommerce
  • /
  • December 19, 2016
Custom Header Links in Magento 2

As you all know ‘First Impression is the Last Impression’. So likewise, the header of your Magento 2 store is the first thing that any visitor will notice when they just open your website. It is the first impression that is going to leave the last impression on your store visitors and encourage them to explore your store further. That’s why you need to add sufficient information (or we can say custom header links) in your store’s header. To help you with your “How to”, we have come up with a “How to” blog on this topic.

You can follow the steps mentioned below so as to add custom header links to your existing Magento 2 based website and make it more eye-catching, clear and informative.

Here is how to include custom header links in Magento 2:

Step 1:

First off, create a custom module on the basis of Magento 2 structure under the folder app/code.

For instance: Magento 2 root directory/app/code/Envision/Newlink/

Step 2:

Now, you need to make a module.xml file in the path mentioned below to express your Magento 2 extension.

Magento 2 root directory/app/code/Envision/Newlink/etc/module.xml

<?xml version=“1.0”?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
<module name="Envision_Newlink" setup_version="2.0.1"></module>
</config>

Step 3:

Now, the next step is to produce routes.xml in the path mentioned below, only for your custom link:

Magento 2 root directory/app/code/Envision/Newlink/etc/frontend/routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
<router id="standard">
<route id="newlink" frontName="newlink">
<module name="Envision_Newlink" />
</route>
</router>
</config>

Step 4:

After creating routes.xml, you need to create a layout file in the following path for a custom header:

Magento2 rootdirectory/app/code/Envision/Newlink/view/frontend/layout/header.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="header.links">
<move element="test-last" destination="header.links"/>
<block class="Envision\Newlink\Block\Header" name="test-link" after="myaccount-link"/>
</referenceBlock>
</body>
</page>

Step 5:

Now, create a block file which is stated in the layout file in the following path.

Magento2 root directory/app/code/Envision/Newlink/Block/Header.php

<?php
namespace Envision\Newlink\Block;
class Header extends \Magento\Framework\View\Element\Html\Link
{
protected $_template = 'Envision_Newlink::link.phtml';
public function getHref()
{
return__( 'testuser');
}
public function getLabel()
{
return __('Test Link');
}
}
?>

Step 6:

After creating a block file as mentioned above, it is essential to create a template file as mentioned in the following path.

Magento2 root directory/app/code/Envision/Newlink/frontend/templates/link.phtml

<li>
<a <?php echo $block->getLinkAttributes() ?>><?php echo $block->escapeHtm($block->getLabel())?>
<?php echo($block->getCounter()) ? '<span>' . $block->escapeHtml($block->getCounter()) . '</span>' : ''; ?>
</a>
</li>

Step 7:

After performing all these steps, you need to run the following Magento 2 upgrade command in the command prompt:

php bin/magento setup:upgrade

If you are having any doubts, feel free to contact us at [email protected] . However, if you do have any additional tips or method on this “How to”, you can suggest them in the comment section below.

Stay tuned for more How to blog on Magento 2. Till then Happy Magento 2 Coding!