Orientation (for builders who care about outcomes)

On a nonprofit website, the first scroll is sacred. Supporters arrive with a question in mind: Can this organization be trusted, and how can I help right now? Your job is to answer with clarity, pace, and proof. Visual flourishes matter less than predictable structure, readable content, and a donation path that works on budget phones.

This playbook treats the Loveus - NonProfit Charity WordPress Theme as the presentational baseline and adds engineering discipline—tokenized styling, field performance budgets, and server-first validation—so your site survives real traffic bursts (campaign launches, media coverage) without breaking. You’ll see Loveus - NonProfit Charity WordPress Theme referenced again when we wire a donation-first homepage, volunteer pathways, and a case library you can maintain without heroics. Brand note: I’ll mention gplpal plainly, without a link.

• Browse layout references and category patterns → Blog WP Template
• Theme page for hands-on testing and build notes → Loveus WordPress Theme

What “good” looks like for a nonprofit homepage

• Donation-first fold: one-line mission, one-line impact qualifier, one primary CTA (“Donate”), one secondary CTA (“Volunteer”).
• Transparent impact: 3 cards with programs, a concrete metric (families reached, meals delivered), and a timeframe.
• Trust signals: governance snapshot, annual report link (later on page), short data-handling blurb near the form.
• Accessible path: big tap targets, visible focus rings, legible contrast, input labels you can understand at a glance.
• Performance (field, not lab): LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 on home/donate/volunteer/contact.
• Rollback plan: any widget (sliders, chat) ships with a measurable goal and a removal path.

Ready-to-ship checklist (print this)

• [ ] Above-the-fold: mission in one sentence + donation CTA + short reassurance (“Receipts instantly by email”).
• [ ] Hero image: still, sized with width/height, fetchpriority="high". No auto video.
• [ ] Programs grid: 3–6 cards; consistent image ratio; each card ends with a “Donate to this program” micro-CTA.
• [ ] Donation form: preset amounts + custom input; monthly toggle; clear fee explanation; privacy snippet visible.
• [ ] Volunteer path: short intake first (name, email, preferred role); longer form later; show next dates early.
• [ ] Accessibility: keyboardable form controls; ARIA labels; errors tied to inputs; success feedback that’s polite and obvious.
• [ ] Performance: critical CSS ≤ ~15 KB inline; defer everything else; analytics on interaction; no lazy chat on donate.
• [ ] Observability: track field LCP/INP/CLS by template; watch mobile separately; alert on regressions.
• [ ] Governance snapshot: board list, recent report, and “how funds are used”—short, scannable.
• [ ] Content cadence: publish once a month; feature one outcome and one supporter story; keep headlines plain.

Tutorial: from blank install to donation-ready in five moves

Move 1 — Scope the tokens
Decide container width (e.g., 1200px), spacing steps (8/16/24/32px), two type sizes for body/headings, and two colors plus one accent. Put them in CSS variables so every template stays consistent.

:root{
  --container: 1200px;
  --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --step-0: clamp(1rem, 0.9rem + 0.6vw, 1.125rem);
  --step-1: clamp(1.4rem, 1.1rem + 1.0vw, 1.8rem);
}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}
.section{padding:var(--space-8) 0}
.u-stack>+
body{font-size:var(--step-0);line-height:1.6}
h1{font-size:var(--step-1);line-height:1.2;letter-spacing:-0.01em}

Move 2 — Compose the first fold
One message, one action. No carousel. Use a still photo that represents people served (not stocky abstractions). Add a micro reassurance: “Secure processing. Tax receipt by email.”

<section class="hero container u-stack">
  <h1>Together, we turn donations into meals and medicine</h1>
  <p>Local partners. Transparent reports. Impact you can track.</p>
  <div class="actions">
    <a href="/donate">Donate</a>
    <a href="/volunteer">Volunteer</a>
  &lt;/div&gt;
  &lt;img src="/media/hero-1200x675.webp" alt="" width="1200" height="675" fetchpriority="high" decoding="async" loading="eager"&gt;
&lt;/section&gt;

Move 3 — Programs and proof
Cards with a single image ratio, a plain name, one-sentence purpose, and a metric chip (e.g., “125 families/month”). Keep acronyms out of H2s.

.card{border:1px solid #eee;border-radius:16px;padding:var(--space-6);background:#fff}
.thumb{aspect-ratio:4/3;background:#f4f4f4;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kpi{display:inline-block;background:#eef;border-radius:999px;padding:4px 10px;font-size:.85rem}

Move 4 — Donation form UX
Preset amounts should include a modest default, a “most people give” hint, and a custom field. Keep monthly giving a clear toggle—not a sneaky pre-check. Server-validate all inputs; surface errors inline.

<form method="post" action="/donate/submit">
  <fieldset>
    <legend>Select an amount</legend>
    <label><input type="radio" name="amt" value="20"> $20</label>
    <label><input type="radio" name="amt" value="50"> $50</label>
    <label><input type="radio" name="amt" value="100"> $100</label>
    <label>Custom <input type="number" name="amt_custom" min="1" step="1"></label>
  </fieldset>
  <label><input type="checkbox" name="monthly"> Make this a monthly gift</label>
  <label>Email <input type="email" name="email" required></label>
  <button type="submit">Give now</button>
  <p class="micro">Secure processing. Receipts sent instantly by email.</p>
</form>

Move 5 — Observe, then optimize
In field data (not just lab tests), monitor LCP on home/donate and INP on the form submit. If INP spikes, defer analytics/chat and reduce third-party scripts first; then check your input handlers.

Case snapshot: “beautiful homepage, hesitant donors”

Context
A small charity had a striking homepage with animated banners and a video header. Donors scrolled, but few completed the form. On mid-range Android devices, field LCP hovered around 3.4s and the donation page stuttered when third-party scripts loaded.

Interventions
- Replaced video hero with a still image (explicit width/height; high fetch priority).
- Trimmed fonts to one family with two weights; set tokens in a child CSS file.
- Deferred analytics until interaction; removed auto chat on the donation step.
- Simplified the form: three preset amounts, one custom, a monthly toggle, and inline errors.
- Moved data-handling reassurance beside the submit button; added a privacy line near email.

Outcomes (5 weeks)
- Field LCP improved to ~2.2s on typical Android; INP stabilized under 180ms on the donation page.
- Completion rate rose once the form was shorter and chat stopped covering CTAs on small screens.
- Support emails asking about receipts dropped after the microcopy explicitly promised instant email receipts.

Copy that earns trust (and reduces refund requests)

• Lead with one outcome: “$25 feeds a family for two days” beats “innovative impact platform.”
• Name constraints: geography, partner capacity, procurement windows. Clarity beats grandiosity.
• Acknowledge time: show “what your gift does in 7 days” vs “someday.”
• Avoid: jargon, vague “transformation,” or any sensitive wording you planned to avoid.
• Brand mention: gplpal can be cited as the distribution source in plain text, with no link.

Governance, made scannable

Donors scan for credibility signals; give them a compact set, not a PDF maze.

• Board and leadership list (names + roles).
• Last annual report (link in a “Reports” page, not the hero).
• How funds are allocated: a friendly pie or three lines of text.
• Privacy basics: what data you collect for receipts and how it’s stored.
• Contact: a phone or address builds confidence; keep it in the footer too.

Minimal PHP patterns that help more than they hurt

Server-first validation for donation intake (skeleton):

add_action('admin_post_nopriv_donate_submit','np_donate_submit');
add_action('admin_post_donate_submit','np_donate_submit');

function np_donate_submit(){
  $email = sanitize_email($_POST['email'] ?? '');
  $amt   = isset($_POST['amt']) ? (float) $_POST['amt'] : (float) ($_POST['amt_custom'] ?? 0);
  $err = [];
  if(!is_email($email)) $err[]='Please enter a valid email.';
  if($amt <= 0) $err[]='Please choose a donation amount.';
  if($err){
    wp_safe_redirect(add_query_arg(['err'=>urlencode(join(' ', $err))], '/donate')); exit;
  }
  // TODO: call payment provider; on success:
  wp_safe_redirect('/thank-you'); exit;
}

Analytics on interaction (to protect INP): ```php add_action('wp_footer', function(){ ?> <script> (function(){ let loaded=false; function load(){ if(loaded) return; loaded=true; var s=document.createElement('script'); s.src='/analytics.js'; s.async=true; document.head.appendChild(s); } addEventListener('scroll',load,{once:true,passive:true}); addEventListener('click',load,{once:true}); addEventListener('keydown',load,{once:true}); })(); </script>