How to set footerlinks

Magento 2 is the new and upgraded version of Magento, a well-known e-commerce platform for managing online businesses. Among thousands of websites, Magento is undoubtedly the number one platform due to its scalability, extensive core functionality, and openness to integrations and extensions.

If you’re a business owner who has recently joined the platform, you want to optimize your store to make the most out of it. One of the many ways to do this is by adding custom footer links. They serve as key elements for any eCommerce store.

Many believe that only the Header is the most important section of your store, but the fact is that the Footer is just as important. Why? Well, simply because it gives you the last chance to grab potential customers’ attention and get them to continue browsing through products. This is why it is essential for you to learn how to utilize it to the fullest.

The footer contains links to the essential sections and pages of the website, and you may want to change default links or add new ones to make your store’s footer even more informative, enticing customers to continue their journey on the website and ultimately make a purchase.

This article aims to provide you with a step-to-step guide on how to add custom footer links in Magento 2 to ensure better navigation, improved user experience, improved conversion rate, and SEO-optimized store.

In this tutorial, we will walk you through the entire process of adding footer links in your Magento 2 store.

Add Custom Header Links in Magento 2 :

Step # – 1 :

To begin with creating custom header links in Magento 2, you would have to create a custom module based on Magento 2 structure in the folder app/code.

Ex: Magento 2 root directory/app/code/Dckap/Newlink/

Step # – 2 :

After that, to define your Magento 2 extension, create a module.xml file in the below path.

Magento 2 root directory/app/code/Dckap/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=”Dckap_Newlink” setup_version=”2.0.1″></module>
</config>

Step # – 3 :

The next step is to create routes.xml in the below path for your custom link.

Magento 2 root directory/app/Dckap/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=”Dckap_Newlink” />
</route>
</router>
</config>

Step # – 4 :

Then, create a layout file in the below path for a custom header.

Magento2 root directory/app/Dckap/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=”Dckap\Newlink\Block\Header” name=”test-link” after=”my-account-link”/>
</referenceBlock>
</body>
</page>

Step # – 5 :

After that, create a block file that is referred to in the layout file in the below path.

Magento2 root directory/app/Dckap/Newlink/Block/Header.php

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

Follow the code shared above for third party URLs.

Step # – 6 :

Create a template file that is referred to as the block file in the below path.

Magento2 root directory/app/Dckap/Newlink/frontend/templates/link.phtml

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

Once you are done with all the steps shared above, run the below Magento 2 upgrade command in the command prompt:

php bin/magento setup:upgrade

After running the above command, clear all the Magento cache and check whether the extension is installed successfully on the Magento 2 admin side.

Add Custom Footer Links in Magento 2:

Step # – 1 :

Now to add a custom footer link, follow the above first three steps and replace the layout file with the below code:

Magento2 root directory/app/Dckap/Newlink/view/frontend/layout/footer.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”>
<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>

There are two ways of getting the argument values:

1. By using a block file. (used for header link)

2. By specifying argument values in the layout file. (used for footer link)

Now follow the above step(step 7).

Check the browser to see your custom header and footer links.

We hope this blog helped you to add custom header and footer links in Magento2 and make the most out of your e-commerce store. If you’re interested to learn more about Magento 2, click <link>.

Get help from a human

Submit a request for help with your Braintree sandbox or production account.

Get Help

Industries

How to set footerlinks

Contact Our Sales Team