How to add a donation form to GeneratePress

GeneratePress keeps things minimal, so you add the Donation Form block to a page, style one menu link as a button, and use Elements if you have GP Premium.

Short answerInstall Donor Merchant, add the Donation Form block to a "Donate" page, and set the page's Layout box to no sidebar. Add the page to your menu with the CSS class nav-button and a few lines of CSS to make it a button. With GP Premium, a Hook or Block Element can put an appeal on other pages.

Does GeneratePress have a donation feature?

No. GeneratePress is a lightweight theme, and its premium add-on, GP Premium, adds modules such as Elements, Menu Plus and Disable Elements. None of them takes payments, so there is nothing to switch off. You add a donation plugin.

First install Donor Merchant (free, every feature included) from Plugins > Add New by searching for "Donor Merchant" (WordPress 6.2+, PHP 7.4+, HTTPS), then follow Getting started.

Where do I put the form in GeneratePress?

  1. Create a page called "Donate" under Pages > Add New.
  2. In the block inserter, search for Donation Form and add it.
  3. You can type an optional heading in the block. For a campaign form, use the shortcode with campaign="3" instead.
  4. Publish.

Use the shortcode for a campaign form, or anywhere blocks are not available: [donor_merchant], [donor_merchant campaign="3"] for a campaign, and [donor_merchant_progress campaign="3"] for a goal thermometer. Donor Merchant > Settings > Shortcodes lists your campaign IDs.

If you use GenerateBlocks, the free block plugin from the same team, place the form inside a Container block with your appeal beside or above it. The form is a white card up to 540 pixels wide that centers itself.

How should I set the Donate page layout?

GeneratePress has a Layout box on each page, usually at the bottom right of the block editor. If you do not see it, enable it in the editor's options. It holds these settings:

  • Sidebar Layout: choose Content (no sidebars) for the Donate page so the form is the only thing competing for attention. The site-wide default lives at Customize > Layout > Sidebars.
  • Content Container (GeneratePress 3.0 and later): Default keeps the customizer's content padding, Full Width makes the content area 100% of the screen and removes the padding, and Contained removes the padding but keeps the width. For a simple page of text and a form, Default is the right choice. Full Width only helps if you are building full-width sections with GenerateBlocks.
  • Disable Elements (GP Premium): tick the box next to a page element to hide it on this page only.

To apply the same settings to several campaign pages at once, GP Premium's Layout Element sets sidebar, footer, disabled elements and content options site-wide or by Display Rules.

How do I add a Donate button to the GeneratePress menu?

GeneratePress does not have a header button element. Its documentation turns a normal menu item into a button with a CSS class:

  1. Go to Appearance > Menus and add your Donate page to the primary menu.
  2. If the item has no CSS Classes field, open Screen Options at the top of the screen and tick it.
  3. Enter nav-button as the class and save the menu.
  4. Add CSS under Appearance > Customize > Additional CSS:

@media (min-width:769px) { .main-navigation .main-nav ul li.nav-button a { background-color: #1950d1; color: #ffffff; border-radius: 10px; line-height: 35px; } }

Swap in your own colors. GeneratePress's example uses a white background with a dark border and notes that the line-height will probably need adjusting to fit your navigation height. The media query limits the button style to wider screens, so on phones "Donate" shows as a normal link in the mobile menu. That keeps it visible without crowding the mobile header.

How do I show an appeal on other pages with Elements?

Elements is a GP Premium module. Activate it under Appearance > GeneratePress, then go to Appearance > Elements and click Add New Element. Two types are useful here.

Block Element (GP Premium 1.11.0 and later)

Choose Block, then the Hook element type. You build it in the block editor, so you can add a short appeal and a button, or the Donation Form block itself. Set the hook location and use Display Rules (Location, Exclude, Users) to choose where it appears. Exclude the Donate page so the appeal does not sit above its own form.

GeneratePress warns that third-party block plugins may not style themselves properly inside Block Elements, because they look for their blocks in the page content to decide which CSS to load. Donor Merchant does not work that way: it loads its stylesheet and scripts when the form renders, wherever that is. Preview one page after publishing to confirm.

Hook Element

The older Hook Element takes plain content in a text box. Paste [donor_merchant] or your own HTML, pick a Hook, and tick Execute Shortcodes. That box is optional in the settings, but the shortcode only runs when it is ticked. Leave Execute PHP alone; it is not needed here, and GeneratePress notes it cannot be used when DISALLOW_FILE_EDIT is enabled, which some security plugins add by default.

Do GeneratePress performance settings affect the form?

GeneratePress's own options are about CSS. Its team recommends setting the CSS Print Method under Customize > General to External File when you use Perfmatters. That does not change how the payment fields load.

GeneratePress's blog recommends pairing the theme with Perfmatters, including its Defer JavaScript and Delay JavaScript options, and says to add exclusions when something stops working. If you use either option, exclude these on the Donate page:

  • js.stripe.com
  • www.paypal.com/sdk/js
  • wp-content/plugins/donor-merchant/assets/js/donor-merchant.js

Also check Perfmatters' Script Manager. If you disabled scripts site-wide, make sure Donor Merchant's are still allowed on the Donate page. The same post suggests turning off Cloudflare's Rocket Loader. Rocket Loader also changes how scripts load, so if your card fields do not appear, try the Donate page with it off. The page itself is safe to cache; see the page cache exclusions guide.

How do I match the form to GeneratePress colors?

Take the accent color you use for links and buttons from Appearance > Customize > Colors, and the color you used in the nav-button CSS above. In Donor Merchant > Settings > Forms > Form style, choose Custom, paste it and check the live preview. Pick the button shape (pill, rounded or sharp) that matches your menu button's border-radius.

What should I check before going live?

  • Make a test gift in Stripe or PayPal test mode on a phone and on a desktop.
  • Set up webhooks if you take recurring gifts, so renewals are recorded.
  • If you set a thank-you page under Donor Merchant > Settings > General, give it the same Layout settings.

We checked these steps against GeneratePress's documentation in October 2026. Menus change between versions, so if a label differs in yours, look for the equivalent setting.

Sources

Get Donor Merchant

Free from WordPress.org, with recurring giving included.

Download Donor Merchant free Or try the demo first.