To add a donation form to a Newspaper site, install the free Donor Merchant plugin, open your Donate page in tagDiv Composer, add the External Shortcode element and enter [donor_merchant]. If you use tagDiv's Mobile Theme plugin, check the page on a phone, because the Mobile Theme does not show regular page content.
What do I need before I start?
For Donor Merchant you need WordPress 6.2 or newer, PHP 7.4 or newer and HTTPS. Install it from Plugins > Add New, then connect Stripe or PayPal. If readers can give monthly, set up the webhook too; renewals are recorded through it. See recurring donations.
Where do I put the form in Newspaper?
tagDiv added an External Shortcode element to tagDiv Composer for exactly this. tagDiv says it works on pages and on cloud templates. (A separate Single External Shortcode element is for single post templates only.)
- Create a page called "Donate", view it on the front end and click Edit with tagDiv Composer.
- Click Add Element and drag a row onto the page; Composer works in rows and columns.
- Add the External Shortcode element to the row and enter
[donor_merchant]in its settings. - Click Save Changes, then View Page and test it while logged out.
Add the form in Composer, not by typing the shortcode into the WordPress editor of a Composer page. tagDiv's troubleshooting guide says that adding code directly in the backend editor of a Composer page can cause a "model does not match the content" error, and recommends recreating the content with Composer elements instead. tagDiv also does not want Composer and another page builder used on the same page.
Variations:
[donor_merchant campaign="3"]ties gifts to a campaign, such as a year-end appeal. Campaign IDs are under Donor Merchant > Settings > Shortcodes.[donor_merchant_progress campaign="3"]in a second External Shortcode element shows the goal thermometer. See campaigns.
Because External Shortcode also works in cloud templates, you can place a goal thermometer or a short appeal in a single post template so it appears under every article. Keep the full form on the Donate page and link to it, so readers are not loading payment scripts on every story.
Why is the form missing on phones?
This only applies if you installed the tagDiv Mobile Theme plugin. tagDiv describes it as a lighter theme that loads only for mobile devices, with its own templates. Its documentation says the content of custom pages from the main theme does not appear in the Mobile Theme, and that its Mobile Editor cannot render tagDiv Composer shortcodes. So a Donate page built in Composer may show phone visitors something other than your form.
You have two options. tagDiv says the Mobile Theme can be turned off for individual posts or pages from an option in the block editor, so disable it on the Donate page and on any page with a thermometer. Or drop the Mobile Theme altogether; tagDiv notes the main theme is already responsive. Either way, open the Donate page on a real phone before you launch. tagDiv also says that with the Mobile Theme, a cache plugin other than WP Super Cache needs its mobile cache option on, or the mobile version can be shown to desktop visitors.
How do I add a Donate button to the Newspaper header?
Newspaper's Header Builder runs inside tagDiv Composer:
- Open any page in tagDiv Composer and click the Website Manager button.
- Choose the header zone to edit. tagDiv lists four: Main menu, Main menu sticky, Mobile menu and Mobile menu sticky.
- Add a Button element (tagDiv's base button element, which links to a page or URL) and point it at your Donate page.
- Repeat in the Mobile menu zone, and in the sticky zones if you use them. Each zone is separate.
For a plain menu link, add the Donate page in Appearance > Menus to the menu assigned to the Header Main location, or to the menu chosen in your Header main menu element. If you use the Mobile Theme, it has its own main menu setting in the Mobile Theme tab of the Theme Panel.
Should I use tagDiv's Opt-In Builder for donations instead?
Newspaper offers the tagDiv Opt-In Builder, a paywall and subscription plugin. Its Plans area lists Free, Monthly, Yearly, Unlimited, Credit and Donation plan types, and tagDiv's changelog shows donation support arriving in version 1.7. Payments run through Stripe, PayPal or direct bank transfer, and it builds checkout, account and subscription pages for you.
If you already sell memberships through the Opt-In Builder and want one place for everything, its Donation plan may be enough. Donor Merchant is built around donors rather than members: campaigns with goal thermometers, an option for donors to cover processing fees, tribute gifts, designated funds, printable receipts and annual statements, Gift Aid for UK charities, and a donor portal that donors open with an emailed link. Compare those against what you need before choosing. If you run both, send every "Donate" button to one place, so your gift records are not split between two systems.
How do I match the form to Newspaper's colors?
Newspaper's site-wide accent is set in Newspaper > Theme Panel > Theme Color, under General theme colors (Theme accent, which tagDiv says covers hover, links and buttons). Copy that value into Donor Merchant > Settings > Forms > Form style as a custom color and check the live preview, then pick the button shape (pill, rounded or sharp) closest to your Composer buttons. tagDiv notes that colors set on a specific template override the Theme Panel, so compare against the page your Donate link lives on. The form's styles are scoped under .dm-form. See form settings.
Which speed settings affect the form?
tagDiv's speed guide recommends WP Super Cache, gzip, image optimization, Cloudflare, and Autoptimize alongside WP Super Cache.
- WP Super Cache is fine. The donation form has no nonce, so cached copies work, and the donor portal and receipt links send no-cache headers automatically.
- Autoptimize is the one to watch. tagDiv's recommended setup turns on Optimize JavaScript Code and Aggregate JS-files, which combines scripts into one file. If the card fields or the PayPal button do not appear on your Donate page, add
js.stripe.com,www.paypal.com/sdk/jsandwp-content/plugins/donor-merchant/assets/js/donor-merchant.jsto Autoptimize's JavaScript exclusions and clear its cache.
Our cache exclusions guide covers Cloudflare and other plugins.
Sources
- tagDiv: Single External Shortcode and External Shortcode
- tagDiv: How to Use tagDiv Composer
- tagDiv: When tagDiv Composer is Not Working
- tagDiv: Mobile Theme introduction
- tagDiv: The Mobile Theme Settings
- tagDiv: Header Builder
- tagDiv: Main Menu
- tagDiv: tagDiv Composer multipurpose elements (Button)
- tagDiv: Opt-In Builder introduction
- tagDiv: Opt-In Builder Subscriptions (plans and payments)
- tagDiv: Opt-In Builder changelog
- tagDiv: Theme Colors Introduction
- tagDiv: Pagespeed guide
- tagDiv: Cache plugin, install and configure
- tagDiv: Autoptimize, install and configuration