Magento 2 - Add a Custom Button to header.phtml

Question

My name is Costin and I am a beginner Magento 2 developer. I have a question regarding on

How to add a button to header.phtml and to be displayed on the frontend?

What I have done until now:

• I create a basic module in

/app/code/Vendor_Name_Module_Name

• Copied the file

vendor/magento/module/theme/view/frontend/templates/html/header.phtml into /app/code/Vendor_Name_Module_Name/theme/view/frontend/templates/html/header.phtml.

what I want to achieve is :

Any help is much appreciated.

Answer 1

You can add this to your default.xml theme layout (inside the header.links) .

<referenceBlock name="header.links">
        <block class="Magento\Framework\View\Element\Html\Link" name="button.link"  before="-">
            <arguments>
                <argument name="label" xsi:type="string">BUTTON</argument>
                <argument name="path" xsi:type="string">buttonpath</argument>
            </arguments>
        </block>
    </referenceBlock>

Or create a cms block , if you want to display a socia media icon for example https://d.pr/free/i/RcbmCO

and in the default.xml add this inside header.links block

 <referenceBlock name="header.links">
        <!--added social media links-->
        <block class="Magento\Cms\Block\Block" name="social.media" before="-">
            <arguments>
                <argument name="block_id" xsi:type="string">social_media</argument>
            </arguments>
        </block>
    </referenceBlock><!-- end header.links -->