1

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

  • do you want custom header and footer in your theme ? – Pawan Oct 24 '18 at 4:14
  • yes "webexpertise.us/wedding/index1" this is my html – neha rani Oct 24 '18 at 4:19
  • did you try my answer ? – Pawan Oct 24 '18 at 4:42
  • Yes its working fine And now please let me know for header code(default.xml) – neha rani Oct 24 '18 at 9:25
  • Did you checked my update ? – Pawan Oct 25 '18 at 13:11
1

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

  • i create a block in admin then call in defult.xml file. "<block class="Magento\Cms\Block\Block" name="bottom_footer"> <arguments> <argument name="top_video" xsi:type="string">bottom_footer</argument> </arguments> </block>" – neha rani Oct 24 '18 at 5:14
  • Then please let me know how to call this footer.phtml template. – neha rani Oct 24 '18 at 5:15
  • <?xml version="1.0"?> <page xmlns:xsi="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> – neha rani Oct 24 '18 at 9:03
  • Its working... please let me know for header template – neha rani Oct 24 '18 at 9:04
  • i apply same code for header everything ok left navigation menu please let me know how to call dynamic category menu. prntscr.com/lal8cb please check my screenshot. – neha rani Oct 26 '18 at 3:51
0

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

  • I am working on live server but i am confused in last step. "php bin/magento setup:upgrade && php bin/magento setup:static-content:deploy -f" please explain – neha rani Oct 24 '18 at 4:26
  • Because on root bin folder i have 2 text file "htaccess" and "magento" – neha rani Oct 24 '18 at 4:29
  • you should not be supposed to worry about php bin/magento setup:upgrade && php bin/magento setup:static-content:deploy -f unless and unless if you don't write code directly into pub/static files and you should also not write into core files(vendor/magento), if you don't need to also run static content deploy if you are in production mode(bin/magento deploy:mode:show = prodcution) – Hitesh Oct 24 '18 at 4:30
  • Don't worry your "htaccess" and "magento" files will be there, will not remove from root – Hitesh Oct 24 '18 at 4:32
  • php bin/magento setup:upgrade will do just re-deploy your module, core modules, core/custom theme code into pub/static folder and will compile it into generated and var/view_preprocessed folder and will re-create cache that's it – Hitesh Oct 24 '18 at 4:33
0

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.

  • i finished this step already when i put our html in header.phtml file then we have coming both content default and our html. – neha rani Oct 24 '18 at 4:33
  • From other method also you apply? I think because of 2 overwrite it will call both? – Mayur Oct 24 '18 at 4:34
  • Please let me know how to call static block in footer template? – neha rani Oct 24 '18 at 5:39
  • @neharani here is the link. magento.stackexchange.com/questions/156411/… – Mayur Oct 24 '18 at 8:56
  • Please mark as useful if answer is help you. – Mayur Oct 24 '18 at 8:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.