Adding a button to menu. Workaround?

You could try adding your button HTML into the navigation hook:

add_action( 'generate_inside_navigation','generate_add_navigation_button' );
function generate_add_navigation_button()
{ ?>
       <a class="my-custom-button" href="button URL">Button text</a>
<?php }

Then you can style your button and float it to the right:

.my-custom-button,
.my-custom-button:visited {
      float: right;
      display: inline-block;
      padding: 10px 15px;
      background: #000000;
      color: #FFFFFF;
}

.my-custom-button:hover {
      background: #FFFFFF;
      color: #000000;
}

Adding PHP: http://generatepress.com/knowledgebase/adding-php-functions/
Adding CSS: http://generatepress.com/knowledgebase/adding-css/

Hi Tom,

I would also like to add a button to my menu. I would like to do what Tyler did on the following website: http://dansplumbingla.com/ where the button is a telephone number which when pressed on a phone will dail that number.

Where do I find the navigation hook? I added the code to the "After Header" hook and got this error:

Parse error: syntax error, unexpected '}' in /home/eersdiek/public_html/DLD/wp-content/plugins/gp-premium/hooks/functions/hooks.php(19) : eval()'d code on line 5

Thank you in advance,
Jan

Sounds like the code you added has an error in it - you can remove that code.

You can do this quite easily using the menu. Just add your phone number as a custom link and add the number as the URL like this: tel:123-456-7890

More info here: https://generatepress.com/knowledgebase/using-menus/

Hey Tom,

Hope you're well mate.

I'm also trying to add a button that sits on the right hand side of my primary nav bar. I'm not sure if I'm doing it right but when I copy and paste the lines of code you provided above into the web hooks section 'after header content', it doesn't work.

Can you guide me the right way to do it?

Cheers Tom,

Andrew

Hi Andrew,

I think a better method would be to give a custom menu item a unique class: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then style it with CSS:

.main-navigation .my-custom-class a {
    border: 1px solid red;
    /* other CSS for your button */
}

Hi Tom,

I too would like to add my phone number on the menu, I just tried to create a custom link and it shows as pending. Am I doing something wrong?

"You can do this quite easily using the menu. Just add your phone number as a custom link and add the number as the URL like this: tel:123-456-7890

More info here: https://generatepress.com/knowledgebase/using-menus/"

Thanks,
Aaron

Hi Aaron,

Not quite sure what you meant that it shows as pending? In addition to filling in the URL like Tom suggested, you also need to fill the link text/navigation label for the custom link to work.
Let us know if it's still not working for you :)

I inserted the php code above and got an error.
-------
Parse error: syntax error, unexpected '}' in /home2/kaikongchan/public_html/thelearningenglish.com/wp-content/plugins/gp-premium/hooks/functions/hooks.php(22) : eval()'d code on line 5
-------

php code into wp_head hook :
---------
add_action( 'generate_inside_navigation','generate_add_navigation_button' );
function generate_add_navigation_button()
{ ?>
Button text
<?php }
--------

How can I add image button into the menu bar?

Sorry are you trying to add a button to the menu?

If so you shouldn't need to use the hook.

If you are trying to add an image, this should work:

add_action('generate_inside_navigation','generate_navigation_image');
function generate_navigation_image()
{
?>
	<div class="navigaiton-image">
		<img src="THE URL TO YOUR IMAGE" alt="" />
	</div>
<?php
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

Let me know :)

And where exactly that code should go?

Which file or location in the theme.?

Adding PHP: https://docs.generatepress.com/article/adding-php/

Looks like you are only looking to add a button and not image from this post: https://wordpress.org/support/topic/how-to-add-image-button-into-menu/

So follow Tom's reply there. But make sure you ask questions on this forum if you are a premium user :)

How can I access the <lu> <li> menu bar in the HTML. If i can access the menu bar I can add my button in manually.
like this.:
-------

<li id="menu-item-419" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-419">

    <a href="https://thelearningenglish.com/logout/?_wpnonce=ccc51a45ba">

        <img src="http://thelearningenglish.com/wp-content/uploads/2017/05/ChineseBuyNowTextButton2.png" width="50" height="30" border="0" alt="" />
    </a>
</li>

--------
I got the above to work in opera inspecter, but I need to access to your HTML to get it to work permanently.

Did you try Toms solution here?
https://wordpress.org/support/topic/how-to-add-image-button-into-menu/

add_action('generate_inside_navigation','generate_navigation_image');
function generate_navigation_image()
{
?>
	<div class="navigaiton-image">
		<img src="THE URL TO YOUR IMAGE" alt="" />
	</div>
<?php
}

I put the above code into Code Snippets but it put my button on top of the menu rather than in the menu.
Is there any way i can put into the menu?