Magento 2: Making a custom footer that’s easy for non-technical content creators to edit.

Mars Cureg July 21, 2016 6,947 Views

When you hire magento developers to create website for your technical people to update and manage, they make it. But do they really provide the best solution? These solutions are complicated and to make them least complicated to use, team of developers will explain the process to make an easy custom footer that any non-technical content developer can edit.

Most websites that developers build are made for others to update and manage. Often times the person creating content will not be overly technical. As developers it’s our job to remove all the guesswork and create a platform within Magento 2 that’s easy for people to update.

That means using a framework like Twitter’s Bootstrap. Frameworks are well developed by experienced teams of developers. They are also well documented online to where a novice can find helpful information and use it without having to hire a developer.

Let’s get started on creating your new custom footer. Below is a stepped process to do so.

Step 1.

Create a new block in the admin area.

To Create a new block:

In the Magento 2 admin navigate to Content > Blocks
Create 4 new blocks by filling in the fields on the screen. Make note of the “Block Identifier.” You will need it later.
Each on of these blocks will be a column in your footer. In this example we will be using a four column layout.
Paste and edit the code below as you see fit.

<h3>
Column Two
</h3>
<ul class=”list-unstyled”>
<li>
<a href="#">Item One</a>
</li>
<li>
<a href="#">Item Two</a>
</li>
<li>
<a href="#">Item Three</a>
</li>
<li>
<a href="#">Item Four</a>
</li>
</ul>

Step 2.

Create a new phtml file named “custom-footer.phtml” and place in the Magento_Theme > Template >html folder.

Within this new template file paste in the below code. It is designed to give you a fluid, full-width layout with an inner container for the content. In your CSS use the id’s of “full-width-footer-outer” and “footer-inner” to style accordingly.

<div id="full-width-footer-outer" class="container-fluid">
<div id="footer-inner" class="container">

<div class="row">

<div class="col-md-3">

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

</div>

<div class="col-md-3">

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

</div>

<div class="col-md-3">

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

</div>

<div class="col-md-3">

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('block_identifier')->toHtml();?>

</div>

</div>

</div>

</div>

Step 3.

Now that you have your working code and blocks you need to tell Magento 2 of your intentions. Open up the default.xml and paste in the code below. This will remove the default footer and insert your custom footer.

<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" remove="true" />

<referenceBlock name="customFooter" template="Magento_Theme::custom-footer.phtml"/>

</body>

</page>

These steps will make it easier on all those involved with the site. Your hire magento programmers can work on new features and bug fixes and content creators can stay away from the codebase and work efficiently in the admin area with the CMS. These steps can be repeated and different block names used.