Add Links to Magento 2 Luma theme Footer

The default footer that comes with Luma theme is the following :Default Luma Footer links

Using the admin interface, you may enable/disable some links but for a full customization, there is work to achieve.

You can refer to Magento2 dev documentation for more information, here we will focus on a simple and efficient method to add a link  to the left column you see above.

To help you with the task of finding the right block to update, you need to turn on the Hint debug feature of Magento2 :

Block Names Hint

 

Once done, you will see this on the frontend side whenever you are connected as admin :

Hints - debug Frontend- magento2

From the red lines, you can now determine from which module template or layout the content is displayed, for instance here in the footer links, the module being called sits in :

vendor/magento/module_theme/view/frontend/layout/default.xml

I invite you to browse the whole directories under layout and templates.

What is the block name for footer links ?

In our case, we use the Luma theme, if you look at the red lines, you will see that the theme depends on the magento-theme module and if you look at the files inside this module you will discover the following file under html/vendor/magento/module-theme/view/frontend/layout/default.xml :

 <referenceContainer name="footer-container">
<container name="footer" as="footer" label="Page Footer" htmlTag="div" htmlClass="footer content">
<block class="Magento\Store\Block\Switcher" name="store_switcher" as="store_switcher" template="switch/stores.phtml"/>
<block class="Magento\Framework\View\Element\Html\Links" name="footer_links">
<arguments>
<argument name="css_class" xsi:type="string">footer links</argument>
</arguments>
</block>
<block class="Magento\Theme\Block\Html\Footer" name="copyright" template="html/copyright.phtml"/>
<block class="Magento\Framework\View\Element\Template" name="report.bugs" template="Magento_Theme::html/bugreport.phtml" />
</container>
</referenceContainer>

The block we are taking care of is the footer_links one.

Let’s first add a new page link within those links.

Use of default.xml

To add a new link, we will extend the default.xml file from the module_theme frontend view within our custom theme. In order to do it add the new file under app/design/frontend/CustomName/customtheme/Magento_Theme/layout :


<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="default_head_blocks"/>
<body>

<referenceBlock name="footer_links">
<block class="Magento\Framework\View\Element\Html\Link\Current" name="custom-page">
<arguments>
<argument name="label" xsi:type="string">Title of your page</argument>
<argument name="path" xsi:type="string">url-key-of-your-page</argument>
</arguments>
</block>
</referenceBlock>

</body>
</page>

Upload the default.xml file to your server and clean up the cache. You should see a link at the bottom of the list inside the footer.

If you are in single mode for your Magento2 website, then you might end up with a 404 error whenever you click on your new page from your front store. In order to fix this issue, disable the single mode and flush Magento caches.

Add footer links - Magento2

If you’ve followed these simple steps, you are now able to add any links to the footer left column, in a next tutorial we will see how to add a new column to add social media icons in it in a responsive way.

 

Adding Content to the footer via Admin interface

If you need to load some content, for instance a Facebook follow us link, in your footer next to the column we’ve just updated, you may achieve this using the administrative interface of Magento2 as follow :

Magento2 footer links - adding content

  1. Click onto Content -> Blocks
  2. Create a new Block by clicking on the orange button
  3. Input any title under Block title as well as an identifier, leave the rest as default or select the appropriate view
  4. Put the content you need (ie : follow us buttons)
  5. Once saved, get to Content -> Widgets
  6. Create a new Widget
  7. Select the CMS Static Block and you Theme
  8. Continue
  9. IN Storefront Properties, pick up Footer links and assign to your store view
  10. Click on Add Layout Update
  11. Display on All Pages or whatever pages you need
  12. Choose the following Container : CMS Footer links
  13. Click on the Options tab
  14. Pick up the  block you’ve created
  15. Save and flush caches

Next we will go further in updating the footer by adding a column at the right of the main one.

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: