How to Add a Donate Button to WordPress

Button, form and page: use all three

Think of the button as a signpost, not as the whole donation process. A donate button that opens a PayPal payment window with no context, no organization name and no confirmation that the money reaches the right place will make some visitors hesitate before they tap it.

• The button is the visible call to action in the header, menu or sidebar.
• The page explains who you are, what the gift supports and, if relevant, how much has been raised so far.
• The form collects the amount, the donor details and the payment, and issues a record you can look up later.

A standalone PayPal donate button skips the page and the WordPress record. That is fine for a one-off experiment. It becomes a problem as soon as you need history, emails you control, more than one campaign, or a receipt you can send without logging into PayPal to check.

Add a Donate item to the navigation

In WordPress, create a page titled Donate (or Support us), add your donation form with the FundCollector Gutenberg block or shortcode, then add that page to Appearance → Menus. Give the menu item a short label: “Donate” or “Give”. Short labels read faster than “Support our mission” in a crowded menu bar.

Many themes let you style one menu item as a button (a filled background, higher contrast). If your theme has a “button” or “highlight” CSS class for menu items, use it so Donate does not look like another text link. If your theme does not offer that option in the menu settings, you can add a small custom rule in Appearance → Customize → Additional CSS, targeting the menu item by its text, for example:

.menu-item a[href*="/donate"] {
  background: #2e7d32;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
}

Adjust the selector and colors to match your theme. Preview the change on desktop and mobile before publishing, since some themes wrap menu items in extra markup that changes how the selector matches.

Header, sidebar and footer

A header button is the highest-visibility option and works well on desktop. On mobile, confirm that the button is still easy to tap after the menu collapses into a hamburger icon: on some themes the Donate item ends up buried at the bottom of a long dropdown, which defeats the purpose.

A sidebar button helps on long articles, similar to a tip jar for creators. It works because the reader is already engaged and does not have to scroll back up to find it. The footer is a fallback, not the main path: people who scroll that far already decided, or they already left.

A floating or sticky button, fixed to a corner of the screen while the visitor scrolls, is another option worth testing on content-heavy pages such as blog posts or a news feed. Keep it small and unobtrusive so it does not sit on top of text or block a “close” button on mobile.

Do not place three competing donate buttons on the same screen. One strong header action plus the form on the donate page is enough. Extra buttons scattered across a page usually add visual noise rather than more conversions, and they make it harder to tell which one you should track.

Style the button so it stands out, without shouting

A donate button should be readable at a glance. A color that contrasts with the rest of the header, a label with a verb (“Donate now” rather than just “Donate”), and enough padding to make it feel clickable on a touchscreen all help. Avoid a color so bright it clashes with your brand palette; the goal is to draw the eye, not to look like an ad.

Give the link a clear aria-label if the visible text is short (“Give”), so that screen reader users hear a fuller description such as “Donate to our organization”. This is a small addition that improves accessibility without changing how the button looks.

Where the button should point

Point every donate button to the same canonical donation page unless you are running a named campaign. Campaign buttons can use a campaign-specific URL, then return to the main donate page when the campaign ends, so old links in emails or social posts still lead somewhere useful.

Test the path on a phone: tap Donate in the menu, confirm the form loads, complete a sandbox payment. If that path fails, the button is decoration. It is worth repeating this check after any theme update or plugin update, since a routine update is a common way for a working donate button to silently stop working.

If you track site analytics, consider tagging the donate button with an event so you can see how many visitors click it versus how many complete the form. A large gap between the two usually points to a problem on the donation page itself, not the button.