How to Add a Give Form Popup to Your Main Menu

Adding a modal popup button to your navigation menu is one of the most effective ways to improve your online donation conversion rate.
Interracial couple holding a Donate button, next to a Give Form popup.

Adding a modal popup button to your navigation menu is one of the most effective ways to improve your online donation conversion rate.

Adding a donation button to your menu makes your donation form really obvious and places it on every page of your whole site. What if you could add your Give form into your main menu and have it pop up in a modal without knowing any code? That’s what this tutorial is going to show you.

NOTE: Every theme handles menus differently. It’s possible this method might not work well with your theme. If so, the snippet provided below might be a better route for you. Reach out to your theme support for guidance.

How to Add a Donation Form Popup to Your Main Menu

Here’s a quick video tutorial to walk you through the process of adding a Give form popup to your main navigation menu, followed by written instructions.

Our Give forms have a great widget, shortcode, and block that allows you to determine the form display style per instance. One of those display modes is “Button.” Essentially, you can have a simple button output that says “DONATE.” When it’s clicked, your whole Give form opens in a modal window.

Unfortunately, getting your widget, shortcode, or block into your menu is nearly impossible unless you’re a developer.

So in order to make this happen, we’re going to do the following:

  1. Use the “Widget Menuizer” plugin to add a Sidebar into the main menu.
  2. Place the Give Form Widget into your Sidebar and choose “Button” display mode.
  3. Then head over to Menus and add the Sidebar into the main menu.

There’s a few other details of this implementation to consider as well, so make sure to read to the bottom.

Using Widget Menuizer

Before we install the Widget Menuizer plugin, let’s make sure we have a sidebar that has our Give form in it.

Head over to “Appearance > Widgets.” Then grab the “Give Form” widget from the left-hand available widgets, and drag it into any sidebar you want. While you’re there, open it up and make sure you set “Display Style” to “Button.” Add text to the “Button Text” option. This will be the text of your donate button in your menu item. Something like “Donate” is good for now.

In the Give Widget Settings, set the Title field to say 'Main Menu Donate Button' or something similar. Choose the Give form you want to appear. Select the button display style and set the button text to 'DONATE.' Make sure floating labels are disabled and the content display is set to none.

Now we’re ready to install the Widget Menuizer plugin. Install and activate, then head over to “Appearance > Menus.” Once there, you should see the option “Sidebars” in the vertical menu options. If you don’t see it, then click on “Screen Options” in the top right of the screen and make sure that the “Sidebars” option is enabled.

Sidebars should be checked off in the screen options section of the widget page to show the sidebar settings..

Now add your sidebar with the Give form in it and you’re all set!

When you click on the "donate" button a modal donation form pops up in the window.

The Widget Menuizer provides a couple of settings that you might need to tweak a little. Here you’ll want to set the “Label Display” to “None.” The “Container Element” and “Widget Layout” options are nice if you’re doing very complex things, but generally, you can tweak those as you need. Using “div” and “Horizontal” works just fine most of the time.

Adding Custom Sidebars

One caveat to this method is that often you are already using all your sidebars. If you add a Give form to one of your sidebars, then it will appear in that place, which you don’t want. So to do this without altering your existing sidebars, you’ll need to create custom sidebars that won’t appear anywhere and work seamlessly with the Widget Menuizer plugin.

There are quite a few free plugins that promote the ability to create custom sidebars, but many of them do far too many things in addition to custom sidebars. Ocean Custom Sidebars is the only one I tested that meets all of our qualifications that is focused on doing its job well and cleanly.

Once you have it installed and activated, head to “Appearance > Widgets” and you’ll see the ability to add new custom sidebars there. Using these custom sidebars ensures that the content of the sidebar isn’t output anywhere on your site that you don’t want it and you can use the Widget Menuizer perfectly.

Consider Responsiveness

Another big caveat is how many menu items you already have in your menu, how your menu breaks into lines when there are too many items, and generally how it handles responsiveness on smaller screens.

One simple way to test your menu responsiveness with the donation button is to use WordPress’ built-in Customizer. It has convenient screen-sizing options.

In the customizer settings, clicking on the different device symbols allows testing of the page in different sizes.

Add a Little Style

Since you’re in the Customizer, you might want to spice up that button a bit. With my example, I wanted it to blend well with the other items, and just added a subtle hover effect. Here’s what I used:

Sample Give Button Styling for the Main Menu

nav .give-btn-modal {
	background: transparent;
	color: white;

nav .give-btn-modal:hover {
	background: rgba(255,255,255,0.35);
	color: white;

If you’re not used to using CSS, the “nav” element is to ensure that I’m only targeting the Give modal button when it’s inside a navigation element. Not every theme uses the “nav” element for their menu outputs, but it’s a fairly safe bet. See our documentation for more help adding custom CSS to your site.

For Developers

If you are a developer or work with one, you might want to do this manually, without any plugins at all. Here’s a snippet that can get you on your way:

Add Give Button to Main Menu

 * Add Give Button to Main Manu
 * @param $form_id

// Hook into the Name Menu Items
add_filter('wp_nav_menu_items', 'add_give_donate_to_main_menu', 10, 2);

function add_give_donate_to_main_menu($items, $args) {
	// Only target the Primary menu
	if( $args->theme_location == 'primary' )

		$items .= '
 			<li class="menu-item">' . do_shortcode("[give_form id='585' display_style='button']"). '	</li>; 
		return $items; 

Show Us Your Buttons

This would be a great option for your major fundraisers, like a Giving Tuesday campaign, to ensure every visitor sees it and can donate quickly.

Have you implemented a donation button with a modal popup on your website? Is it converting well for your donors? Let us know in the comments below.

Liked what you read?

We have a lot more where that came from! Join 15,197 subscribers who stay ahead of the pack.

Share this post

Share on facebook
Share on twitter
Share on linkedin

You might also like

9 Responses

  1. I did all of the steps and was able to create a new sidebar using the DIVI theme, however, that sidebar is showing an “invalid” message in the menu sidebar giving the reason that “cannot be displayed as it is not from the current active theme”.

    I would love for this to work and appreciate any tips or suggestions to override that error.


    1. Hi Erica, I updated the blog article to include a PHP snippet which might be better suited for your purposes. Please keep in mind we provide these tutorials as examples of how to extend Give — we can’t promise perfect compatibility with every theme and/or plugin, but I hope the tutorial helps get you most of the way there.

  2. Hi

    We implemented this about one year ago. I actually thought we might have been the only organisation to see this opportunity. I even thought that there might be a reason that was not more widely deployed like this. Its great to see that you are recommending this! :)

    1. Nice to hear! It’s honestly one of the main reasons why we developed “button mode” years ago. But the way menus work in WordPress it’s really not intuitive or easy to make this happen, and it’s definitely not the responsibility of GIVE to do this, thus I felt the tutorial would be helpful. I think the PHP snippet is most likely the most stable/reliable method but the plugin(s) are helpful for those who don’t code too. Thanks for your verbal support and for using Give!

  3. Nice article. I have learned something new from this article. I have tried to add a modal popup button to the navigation menu by watching this suggestion and it worked nicely. Thank you for recommending this.

  4. In the “For Developers” section, should the last “” before the semicolon (line 16) be “” (a closing tag) instead?

Leave a Reply

Your email address will not be published. Required fields are marked *

Share on facebook
Share on twitter
Share on linkedin

Like what you're reading?

Subscribe and stay ahead of the curve.