Adding Custom Code to the Header of the Website

Home Forums Auberge Adding Custom Code to the Header of the Website

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #19735

    DigitalEvolution
    Participant

    Adding Custom Code to the Header of the Website

    Resolved

    Hi Oliver –

    I am using a third party website for people to order food online. The third party has provided a code to be added to my website. This code generates a button that the user can just click on and the online ordering menu will pop-up while they remain on my website.

    How would I add this code so that it appears on the header of the website at all times? I prefer it to be on the right side (opposite of the logo and website name)

    Code to be Added:

    <span class="glf-button" data-glf-cuid="2fda7b9a-0744-42e7-b38c-52ee41e0beff" data-glf-ruid="5fed2288-0244-400e-81c1-15deda2d0c07" style="padding:20px; font-size: 20px; border-radius:30px; background-color:#F2AA0C
    >Order Online</span>

    Thank-you in advance for your help!

    • This topic was modified 1 week, 6 days ago by  Oliver Juhas. Reason: Formatting code
    #19737

    Oliver Juhas
    Keymaster

    Hi DigitalEvolution,

    First, please note that the code you’ve provided will definitely not be clickable (you need to use a <button> or <a> HTML element for that) and will not open any pop-up window (you need JavaScript code for that). Please double check with your 3rd party food order service website the code you need to use.

    If you want to put the code into a website header, please use this PHP code in your child theme‘s functions.php file:

    function child_theme_food_order() {
    	?>
    	YOUR HTML CODE HERE
    	<?php
    }
    add_action( 'tha_header_top', 'child_theme_food_order', 140 );

    Please note that you might still need to style your custom HTML code in header using custom CSS.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19783

    DigitalEvolution
    Participant

    Hi Oliver!

    First, I want to thank-you for all your help with the questions I have had on my website!

    So in my previous ticket, I was trying to insert a custom code into the functions.php for my Online Ordering button, however, it looks like I don’t have the child theme. What I was seeing in the functions.php section was different than what you copied and pasted in the previous ticket.

    Anyways though, I took a different approach, and inserted the code into a widget in the Social Media Icons section. The button work great and all, however, I just notice that the button stretches weird. I have attached a couple screenshots of what the button looks like on desktop and mobile view.

    Is there a custom CSS I can add to override what I am currently seeing and show the normal size of the button, without the stretching?

    #19785

    Oliver Juhas
    Keymaster

    Hi DigitalEvolution,

    To explain the previous ticket more:
    My previous resolution should work perfectly fine.
    There is no child theme on your website as you need to create it first on your own. Please follow the links in “YOU MIGHT BE INTERESTED…” section of my previous reply to find out how to create and use a child theme (or download a sample one).
    And the code I’ve provided is not a copy & paste. I’ve created it specifically for your needs and it should be inserted into a child theme‘s functions.php file. It is a new code, so you won’t find it in any file right now. But you should not put it into actual Auberge (parent) theme as it will be overwritten once you update the theme in the future – that’s why you need to use a child theme.

    To resolve this issue, please use your browser code inspector to determine the CSS code you need to use for you theme modifications. Here is an example of custom CSS you can start with:

    .glf-button {
    	line-height: 1.62;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #19786

    Oliver Juhas
    Keymaster

    Also, I’m merging this ticket with the previous one as it is continuous issue.

    Best regards,

    Oliver Juhas
    WebMan Design

    #19794

    DigitalEvolution
    Participant

    Hi Oliver –

    Thank-you for the clarification in regards to the child theme. I believe I have that all squared away now. The custom css code you provided for the button also worked!!!

    Thanks again for all your help!

    Renee

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.