custom theme implement magento 2.2.6 issue

magento.stackexchange https://magento.stackexchange.com/questions/247582

  •  05-02-2021
  •  | 
  •  

Question

How to implement custom header, footer HTML design in our custom theme in Magento 2.2.6 version?

Our theme structure:

app/design/frontend/Cloudways/m2-theme/Magento_Theme

Was it helpful?

Solution

For adding custom footer you need to create following file:

app/design/frontend/Cloudways/m2-theme/Magento_Theme/layout/default.xml

With following content: 

<?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>
        <referenceContainer name="footer-container">
            <block class="Magento\Theme\Block\Html\Footer" name="footer" template="html/footer.phtml"/>
        </referenceContainer>
    </body>
</page>

Now you need to create footer.phtml at

app/design/frontend/Cloudways/m2theme/Magento_Theme/Magento_Theme/templates/html

Now you can call all content using static block in footer.phtml.

Update I

If you need custom header you need to add following code same as footer i.e 

<referenceContainer name="header.container">
    <block class="Magento\Theme\Block\Html\Footer" name="myheader" template="html/myheader.phtml" before="-"/>
</referenceContainer>
    <move element="minicart" destination="myheader"/>
    <move element="top.search" destination="myheader"/>
    <move element="logo" as="logo" destination="myheader"/>
    <move element="catalog.topnav" as="nav" destination="myheader"/>

Above code will Set new template for header and move tag will move existing element to new header.

Now you need to echo this element in your custom header with following code.

<?php echo $this->getChildHtml('minicart'); ?>
<?php echo $this->getChildHtml("logo"); ?>
<?php echo $this->getChildHtml("topSearch"); ?>
<?php echo $this->getChildHtml("nav"); ?>

Source

OTHER TIPS

You can do by overwrite the existing templates by copying them into your theme and making changes to the template files.

So copy these two files:

vendor/magento/module-theme/view/frontend/templates/html/header.phtml
vendor/magento/module-theme/view/frontend/templates/html/footer.phtml

Into your theme:

app/design/frontend/VENDOR/THEME/Magento_Theme/templates/html/header.phtml
app/design/frontend/VENDOR/THEME/Magento_Theme/templates/html/footer.phtml

Now you can change as per you want and your custom header and footer will complete.

You can create by custom extension also.

You can overwrite the existing templates by copying them into your theme and making changes to the template files.

So copy these two files:

vendor/magento/module-theme/view/frontend/templates/html/header.phtml vendor/magento/module-theme/view/frontend/templates/html/footer.phtml

Into your theme:

app/design/frontend/VENDOR/THEME/Magento_Theme/templates/html/header.phtml app/design/frontend/VENDOR/THEME/Magento_Theme/templates/html/footer.phtml

run below command after your changes if you are in developer mode

php bin/magento setup:upgrade && php bin/magento setup:static-content:deploy -f

run below command after your changes if you are in production mode

php bin/magento setup:upgrade

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top