Sometimes you need to add custom code to your menu. You need a custom menu item that basically is just some html code. You don’t want another sidebar and widget, you just want to add some text. You need to add some Leadpages html code to display a button to opt-in maybe? How to add Leadpages Form to WordPress Menu?

Best Approach

Well, after some research and a lot of help form WP Explorer I realized it is not that hard. When the AWeber embed code is styled OK with inline styles or your own external styles in your CSS stylesheet you can add an extra menu item – being just some html code – with relative ease. And, no, you won’t be needing a plugin for it. I tried Widgets in Menu by Yapapaya before though. But it did not give me the flexibility to order items properly. Fortunately, you can just add some code – read filter –  to the functions.php file of your child theme.

wp_nav_menu_items Filter

There is a a great filter that allows you to add a menu item to your WordPress generated menu. It is wp_nav_menu_items . With it you can indicate for what menu position you would like to add a new item and you can give it the right priority. This way you can decide its position within the menu. Something that normally matter a lot.

In our case we wanted the AWeber code to be loaded last, after all other menu items. A priority of 11 worked for us. This depends on the no. of menu items you have though. Perhaps you need a higher priority. Anyways, here is the final code:

https://gist.github.com/jasperf/8f31b684340a1c7f5bfa86b34cb33907

Button Trigger Code

This really loads the text and button that triggers the signup form really, but it is all that is needed. Code generated at Aweber. We only tweaked the inline style somewhat to our liking. Once the button is clicked the form will be loaded automatically.

Final Result

The final result at the website looks like this (image links to actual site):

 

NB Code has been slightly altered to remove our unique LP no.

Bonus

If you would like to target another menu, not the main one you can use the menu name. It is primary here below, but you can use the theme location name you used to register the menu

add_filter('wp_nav_menu_items','top_right_menu_button', 10, 2);
function top_right_menu_button( $nav, $args ) {
 if( $args->theme_location == 'primary' )
 return $nav."<li class='my-custom-menu-item'>Hell Yeah!</li>";
return $nav;
}