Add a Donation Form to the X Theme (Cornerstone)

To add a donation form to a site built with X, install the free Donor Merchant plugin, open the page in Cornerstone, drag in a Raw Content element and paste [donor_merchant] into it. Save, then check the live page. The same steps work in Pro, because both themes use Cornerstone and share THEMECO's documentation.

What do I need before I start?

You need WordPress 6.2 or newer, PHP 7.4 or newer, and HTTPS. Go to Plugins > Add New, search for "Donor Merchant", install and activate it. Then connect Stripe, PayPal or both, using the Stripe setup and PayPal setup guides. If you plan to take recurring gifts, add the webhook as well (see webhooks), because renewals are recorded through it.

One difference between the two themes matters here. THEMECO's comparison says X users install Cornerstone as a separate plugin and get the Page Builder and Component Builder, while Pro has Cornerstone built in, including the Layout Builder and a Header Builder. The page steps below are the same in both. The header steps differ.

Where do I put the form in X?

Create a page called "Donate" and open it in Cornerstone.
Search the element library for Raw Content and drag it onto the canvas. THEMECO describes it as the element to use when you want to add your own code to a page, and it has a single option, Content.
Paste [donor_merchant] into Content. To tie the form to a campaign, use [donor_merchant campaign="3"], with the ID shown under Donor Merchant > Settings > Shortcodes. To change the heading, use [donor_merchant title="Support our work"].
Save and open the published page in a new tab.

THEMECO's support staff have pointed people to either the Raw Content element or the Text element for third-party shortcodes. If you prefer to write an intro paragraph and the form in one block, the Text element is the other option. Judge the result on the live page: the builder preview does not always show what a plugin shortcode renders, and payment fields only load on the real page.

A goal thermometer goes in its own Raw Content element with [donor_merchant_progress campaign="3"]. Place it above the form so donors see progress before they choose an amount. See campaigns for goals and suggested amounts.

What about the old shortcode system?

X's settings include an option to enable the old shortcode system, and the classic elements still exist. THEMECO says they remain supported but no longer recommends them for new sites. You do not need either for Donor Merchant. Its shortcode is a normal WordPress shortcode and works in Raw Content without that option.

How do I add a Donate button to the X header?

In X: headers are set in Theme Options > Header (THEMECO's docs place Theme Options under Cornerstone > Theme Options in current versions). The simplest route is a menu item. Go to Appearance > Menus, add your Donate page to the menu your header uses, and save. If you want it to stand out, THEMECO support has suggested the topbar for this: Theme Options > Header > Topbar Content accepts a custom link, so you can add a link to your Donate page there.

In Pro: build the header in the Header Builder. Create a header, add a Bar, then add a Button element that links to your Donate page, and set where the header is assigned. THEMECO support has recommended exactly this for header call-to-action buttons. If the header looks wrong after changes, THEMECO suggests clearing your caches and using the clear style cache button under Cornerstone's settings (the System section).

Does X include its own donation system?

No. THEMECO's documentation does not describe a donation or payment feature in X, Pro or Cornerstone, so there is nothing to switch off. Donor Merchant supplies the form, Stripe and PayPal payments, recurring gifts, receipts and donor records. If you used another donation plugin before, see moving donor history to a new plugin.

How do I match the form to my X design?

Go to Donor Merchant > Settings > Forms > Form style. Pick one of six accent swatches or enter a custom color with live preview, and choose a button shape: pill, rounded or sharp.

Color: X and Pro keep a site palette in Cornerstone's Color Manager. Copy your main brand color's value from there into the custom color field so the donate button matches your other buttons.
Shape: X's global button settings live in Theme Options > Buttons, with a Button Shape choice of Square, Rounded or Pill. Pick the Donor Merchant shape that matches: sharp for Square, rounded for Rounded, pill for Pill.

The form's styles are scoped under the .dm-form class, so the form's styles do not change the rest of your site. X's site-wide styles can still reach the form, so check the Donate page after changing them. If you add your own CSS, target .dm-form so it does not leak into the rest of the page. More options are in form settings.

Which caching and speed settings affect the form?

THEMECO's performance article recommends W3 Total Cache, with page cache, minify set to "auto", database and object caching, plus a CDN such as Cloudflare. That setup is fine for the donation page:

Page caching is safe. The form uses no nonce, so a cached copy still works. The donor portal and receipt links send no-cache headers on their own.
Minify and defer are where problems start. If a minify, combine, defer or "delay JavaScript" setting is on and the card fields or PayPal button do not appear, exclude js.stripe.com, www.paypal.com/sdk/js and wp-content/plugins/donor-merchant/assets/js/donor-merchant.js from that setting, or turn it off for the donation page. A 2018 THEMECO support thread lists X's own scripts to keep out of defer settings, so if you defer JavaScript, test the whole site, not only the form.

Our page cache exclusions guide covers the common caching plugins in more detail.

Anything else to check?

Give the form room. The form is a white card that stops at 540 pixels wide and centers itself, so a full-width section works, and so does a 2/3 column beside your appeal.
Thank-you page. Optional. Set it under Donor Merchant > Settings > General, and build it in Cornerstone like any other page.
Donor portal. Create a page with [donor_merchant_portal] in a Raw Content element so donors can see their giving history and print receipts. Donors with a Stripe recurring gift can also update their card or cancel there; PayPal donors are asked to reply to a receipt email. See donor portal.

Checked against THEMECO's documentationWe checked these steps against THEMECO's X, Pro and Cornerstone documentation in October 2026. We have not tested Donor Merchant inside X or Pro ourselves. Theme menus change between versions; if a label differs in yours, look for the equivalent element.

How to add a donation form to the X theme