Magento 2: How to Add Custom Header and Footer Links

In this blog, I am going to show you how to add custom header and footer links in your Magento 2 website.

Define a new module:

Here we are going to create a new custom module based on Magento 2 structure for adding custom header and footer links.

Path: <Magento 2 root directory>/app/code/YourCompanyName/YourModuleName/

Create a module.xml file in the below file path to define the new module,

File Path: app/code/YourCompanyName/YourModuleName/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="YourCompanyName_YourModuleName" setup_version="1.0.0">
    </module>
</config>

Next, create a registration.php file in the below file path,

File Path: app/code/YourCompanyName/YourModuleName/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'YourCompanyName_YourModuleName',
    __DIR__
);

Add Custom Header Links:

Step 1: Create a layout XML file in the below path for add custom header.

File Path: app/code/YourCompanyName/YourModuleName/view/frontend/layout/default.xml

<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body> 
        <referenceBlock name="header.links"> 
            <move element="custom-link" destination="header.links"/> 
            <block class="YourCompanyName\YourModuleName\Block\Header" name="custom-link" after="my-account-link"/>
        </referenceBlock> 
    </body> 
</page>

Step 2: Create a block file in the below path that is referred in the layout file.

File Path: app/code/YourCompanyName/YourModuleName/Block/Header.php

<?php 
namespace YourCompanyName\YourModuleName\Block; 
class Header extends \Magento\Framework\View\Element\Html\Link 
{ 
    protected $_template = ‘YourCompanyName_YourModuleName::link.phtml'; 
    
    public function getHref() { 
        return__( 'customlink'); 
    } 

    public function getLabel() { 
        return __('Custom Header Link'); 
    } 
}

Step 3: Create a template file in the below path that is referred to the block file.

File Path: app/code/YourCompanyName/YourModuleName/view/frontend/templates/link.phtml

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

Step 4: After completing the above steps, go to the [Magento 2 root directory]/bin directory and run the below command in your CLI to enabling the new extension,

php magento module:enable YourCompanyName_YourModuleName

Then, run the below command in CLI to upgrade the setup,

php magento setup:upgrade

Then, clear the cache and check your frontend.

Reference image:

Magento 2: How to Add Custom Header and Footer Links

Add Custom Footer Links:

Step 1: Create a layout XML file in the below path for add custom footer.

File Path: app/code/YourCompanyName/YourModuleName/view/frontend/layout/default.xml

<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body> 
        <referenceBlock name="footer_links">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="custom-link-2">
                <arguments>
                    <argument name="label" xsi:type="string">Custom Footer Link</argument>
                    <argument name="path" xsi:type="string">custom_footer_link</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body> 
</page>

Step 2: After completing the above steps, run the below command in CLI to upgrade the setup,

php magento setup:upgrade

Then, clear the cache and check your frontend.

Reference image:

Magento 2: How to Add Custom Header and Footer Links

Hope this blog helped you to add custom header & footer links in Magento2.

2 Comments on “Magento 2: How to Add Custom Header and Footer Links”

    1. Thanks for your comment.

      We can create the header links in both ways. In our blog, we used .phtml to add the header links. If you don’t want to create the .phtml file, then do some small changes in your default.xml file as follows,

      <?xml version="1.0"?>
      <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
          <body> 
              <referenceBlock name="header.links">
                  <block class="YourCompanyName\YourModuleName\Block\Header" name="custom-header-link">
                      <arguments>
                          <argument name="label" xsi:type="string" translate="true">Custom Header Link</argument>
                          <argument name="path" xsi:type="string" translate="true">customlink</argument>
                      </arguments>
                  </block>
              </referenceBlock>
          </body> 
      </page>
      

      And change the Header.php file as follows,

      <?php
      namespace YourCompanyName\YourModuleName\Block; 
      class Header extends \Magento\Framework\View\Element\Html\Link 
      {
          protected function _toHtml() {
      
              if (false != $this->getTemplate()) {
                  return parent::_toHtml();
              }
              return '<li><a ' . $this- rel="nofollow">getLinkAttributes() . ' >' . $this->escapeHtml($this->getLabel()) . '</a></li>';
          }
      }
      

Leave a Reply

Your email address will not be published. Required fields are marked *