How to Add Custom Header and Footer Links in Magento 2 Store?

September 03, 2020

Today, we’re going to teach you guys how to add custom header and footer links in Magento 2.

Not many people believe this, but Header and Footer are some of the key elements of a website as well as an eCommerce store.

Both Header and Footer basically contain links to the important pages on your site, which your potential customers might often want to visit before placing their orders.

In fact, the Header is the first thing that all store visitors see when they arrive at your eCommerce store. Therefore, it is critically necessary to include the most important information in the header to entice your potential customers to explore your eCommerce store.

Footer, on the other hand, is just as important as the Header as it is the last chance for you to grab potential customers’ attention and get them to continue browsing through products.

So, it’s important for you to learn how to add custom header and footer links to maximize the time spend on your store and ultimately increase your sales.

And in this tutorial, we will show the entire process to add custom header and footer links in your Magento 2 store.

Step-by-Step Process to Add Custom Header and Footer Links in Magento 2

First of all, we will start by learning the process to add custom header links in Magento 2.

Follow the below steps to add custom header links in your Magento 2 store.

Step #1

First, we need to create a custom module on top of the Magento 2 default structure in the app/code folder:

<span style="color: #003366;">Ex: Magento 2 root directory/app/code/MageDelight/Newlink/</span>

Step #2

Next, we need to create a module.xml file in the directory/app/code/MageDelight/Newlink/etc/ folder and copy the following code:

<?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="MageDelight_Newlink" setup_version="2.0.1"></module>

</config>

Step #3

After that, we now need to create a routes.xml file in the directory/app/MageDelight/Newlink/etc/frontend/ folder and copy the following code:

<?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="MageDelight_Newlink" />

</route>

</router>

</config>

Step #4

Now, create a layout file titled header.xml in the directory/app/MageDelight/Newlink/view/frontend/layout/ folder and add the following code:

<?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="MageDelight\Newlink\Block\Header" name="test-link" after="my-account-link"/>

</referenceBlock>

</body>

</page>

Step #5

Next, we need to create a block file titled Header.php that will be referred in the layout file we just created in the directory/app/MageDelight/Newlink/Block/ folder and copy the following code:

<?php

namespace MageDelight\Newlink\Block;

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

{

protected $_template = 'MageDelight_Newlink::link.phtml';

public function getHref()

{

return__( 'testuser');

}

public function getLabel()

{

return __('Test Link');

}

}

?>

Step #6

After that, we also need to create a template file titled link.phtml, which will be referenced to the block file in the directory/app/MageDelight/Newlink/frontend/templates/ folder and copy the following code:

<li>

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

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

</a>

</li>

Step #7

Lastly, once you’ve performed all of the above steps, perform the following command in the command prompt.

php bin/magento setup:upgrade

After executing the above command, clear the cache and check the results.

As you can see in the above screenshot, we have successfully added the custom header link “History”.

Now, let’s move forward and see the entire process to add custom footer links in Magento 2.

Follow the below steps to add custom footer links in your Magento 2 store.

Step #1

In order to add a custom footer link, follow the first 3 steps we saw above for adding a custom header link and replace the layout file header.xml with the footer.xml file in the directory/app/MageDelight/Newlink/view/frontend/layout/ folder and add the following code:

<?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">

<page>

<referenceBlock name="footer_links">

<block class="Magento\Framework\View\Element\Html\Link\Current" name="2custom-link">

<arguments>

<argument name="label" xsi:type="string">Footer Link</argument>

<argument name="path" xsi:type="string">testuser</argument>

</arguments>

</block>

</referenceBlock>

</page>