Orientation (for builders who ship)

Creative agencies rarely struggle with ideas; they struggle with clarity under load. Your homepage has one job: turn curiosity into a conversation. If the first scroll doesn’t answer three questions—what you do, why it matters, how to talk to a human—the prettiest gradient won’t save the bounce.

In this field guide, we’ll treat Motto - Creative Agency & Startup WordPress Theme as the presentational baseline and pair it with developer discipline: strict performance budgets, predictable templates, lean plugins, and server-first validations. We’ll mix two styles—Founder Journal (#5) for narrative honesty and Engineering Playbook (#7) for code and process—so the page you ship tomorrow is measurably better than the deck you designed last week.

You’ll see Motto - Creative Agency & Startup WordPress Theme referenced again when we wire tokens, a portfolio grid you can actually maintain, and a contact flow that respects time zones. Brand note: I’ll reference gplpal plainly (no link) as requested. The article uses exactly two hyperlinks—see the anchors section.

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

Founder Journal: the week we stopped decorating and started shipping

Day 1 — Naming the promise
We wrote a single sentence: “We design acquisition pages that close deals faster.” Everything else had to serve it. That meant no slider, no parallax, and no motion that didn’t move metrics.

Day 2 — The proof that fits on one fold
We chose three projects that mapped to outcomes: qualified leads up, time-to-first-call down, conversion through pricing up. Each card showed sector, problem, and a single metric with timeframe. No buzzwords, just a number.

Day 3 — The contact flow we’d use ourselves
Two fields first (email and intent), long form later. We added a timezone hint (“We reply within 1 business day, UTC±X”) and a fallback address. We removed the floating chat that covered CTAs on mobile.

Day 4 — Killing unbounded features
We deleted the “mega animation” header and replaced it with a still hero image with explicit dimensions. Field LCP stabilized. We deferred analytics until interaction. The page felt calm.

Day 5 — The first scroll that finally worked
One promise. One subline. One CTA. Three case cards. A compact services snapshot. A footer with the basics. The rest of the flair went into the portfolio detail pages where it belonged.

What “good” looks like for an agency website

• Above the fold: one-line value promise + one-line qualifier + single CTA (“Book a discovery call”).
• Case proof: 3–6 cards max; sector, problem, one outcome, timeframe.
• Service clarity: 3–5 pages with scope, deliverables, timeline, and an “entry project” example.
• Contact that respects time: short form first, longer scoping later; visible response window.
• Performance budget: field LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 on home/services/case/contact.
• Accessibility: keyboardable menus, focus-visible, contrast ≥ 4.5:1.
• Rollback plan: every widget ships with an owner, a KPI, and a kill switch.

Engineering Playbook: the minimal stack that scales

1) Child theme bootstrap (assets you can defend)

Keep one source of truth for layout rhythm and type. Control load order.

// functions.php (child theme)
add_action('wp_enqueue_scripts', function () {
    // Dequeue heavy or duplicate assets from parent/plugins as needed
    wp_dequeue_style('unused-icons'); // example handles
    wp_dequeue_script('slider-lib');

// Core CSS (tokens first)
wp_enqueue_style('child-core', get_stylesheet_directory_uri().'/assets/css/core.css', [], '1.0');

// Minimal JS, footer true
wp_enqueue_script('child-core', get_stylesheet_directory_uri().'/assets/js/core.js', [], '1.0', true);


}, 20);

/* assets/css/core.css — tokens & rhythm */
:root{
  --container: 1200px;
  --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --step-0: clamp(1rem, 0.9rem + 0.6vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.9vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2rem);
}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}
.section{padding:var(--space-8) 0}
.u-stack>*+*{margin-top:var(--space-4)}
body{font-size:var(--step-0);line-height:1.6}
h1{font-size:var(--step-2);line-height:1.2;letter-spacing:-0.01em}
h2{font-size:var(--step-1);line-height:1.3}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid #111;border-radius:12px}
.btn:focus-visible{outline:2px solid #0a84ff;outline-offset:2px}

2) First-screen discipline (predictable LCP)

Give the browser dimensions; keep motion out of the critical path.

// template-parts/hero.php
?>
<section class="hero container u-stack">
  <h1>Make the first scroll count</h1>
  <p>We design acquisition pages that close deals faster—measurably.</p>
  <a href="/contact">Book a discovery call</a>
  &lt;img
    src="&lt;?= esc_url( get_stylesheet_directory_uri().'/assets/media/hero-1200x675.webp' ); ?&gt;"
    alt="" width="1200" height="675" fetchpriority="high" decoding="async" loading="eager"&gt;
&lt;/section&gt;
 'Cases',
        'public' =&gt; true,
        'supports' =&gt; ['title','editor','thumbnail','excerpt'],
        'has_archive' =&gt; true,
        'rewrite' =&gt; ['slug' =&gt; 'cases'],
        'show_in_rest' =&gt; true,
    ]);
    register_taxonomy('sector', 'case', [
        'label' =&gt; 'Sectors',
        'public' =&gt; true,
        'rewrite' =&gt; ['slug' =&gt; 'sector'],
        'show_in_rest' =&gt; true,
    ]);
});

// archive-case.php — grid without shifts
get_header(); ?>
<main class="container">
  <h1>Client Outcomes</h1>
  <div class="grid">

      <article class="card">
        <a href="&lt;?php the_permalink(); ?>">
          'lazy']); ?&gt;
        </a>
        &lt;h2&gt;&lt;/h2&gt;
        &lt;p&gt;&lt;/p&gt;
      &lt;/article&gt;

  &lt;/div&gt;
&lt;/main&gt;
urlencode(implode(' ', $err))], wp_get_referer()) ); exit;
  }
  // wp_mail(...) or enqueue CRM job
  wp_safe_redirect( add_query_arg(['contact_ok'=&gt;1], wp_get_referer()) ); exit;
}

<form method="post" action="/wp-admin/admin-post.php">
  <input type="hidden" name="action" value="motto_contact">
  <label>Name <input name="name" required></label>
  <label>Email <input name="email" type="email" required></label>
  <label>Need <input name="need" placeholder="Landing page / Brand refresh" required></label>
  <label>Message <textarea name="message" minlength="20" required></textarea></label>
  <button class="btn" type="submit">Request a proposal</button>
</form>

5) Analytics on interaction (INP sanity)

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>

  <h1>Briefs, not bling</h1>
  <p>We help founders ship calm, credible pages that convert demos into decisions.</p>
  <a href="/contact">Book a discovery call</a>
  &lt;img src="/media/hero-1200x675.webp" alt="" width="1200" height="675" fetchpriority="high" decoding="async" loading="eager"&gt;
&lt;/section&gt;

These simple patterns keep the layout predictable on real devices. You don’t need twelve frameworks to earn trust; you need consistency.

On-page SEO that isn’t cargo-cult

• Title/H1: promise + audience (“Acquisition pages for B2B SaaS”).
• Intro: what changes after you work together.
• Headings: outcome-oriented (“Shorten time-to-first-call”).
• Schema: Organization, BreadcrumbList, Article (notes), FAQPage (real questions), Service (service pages).
• Internal links: minimal, meaningful; point from problems to services to cases.
• Media: explicit dimensions; lazy-load below the fold; one hero per page.

Comparison: minimalist baseline vs. “feature-first” bundles

Minimalist baseline (recommended)
- Pros: faster first action, fewer regressions, easier accessibility, and clearer analytics.
- Trade-offs: copy and screenshots must carry the weight; you can’t hide weak cases.

Feature-first bundles
- Pros: impressive demos, animated everything.
- Trade-offs: duplicated CSS/JS, modal labyrinths, fragile performance budgets—especially on mobile.

Principle: features aren’t bad; unbounded features are. Decide what the homepage is for (start a qualified conversation), and give everything else a metric—or it doesn’t ship.

FAQ (short, honest, useful)

Q1: Do we need motion to feel premium?
Purposeful micro-motion (<200ms) is enough. Premium is clarity under load.

Q2: How many services should we list?
Three to five. Each needs scope, deliverables, timeline, and an entry engagement.

Q3: Should we show pricing?
Where possible, yes—even a range. Pair with “what’s included” and the next step.

Q4: Where do we reference our source?
Plain text—like gplpal—no link, neutral tone.

Q5: What breaks Core Web Vitals fastest?
Un-sized images, cinematic sliders, site-wide third-party widgets, and chat overlays on critical pages.

Launch Checklist (tick every box)

• [ ] Promise + qualifier + single CTA above the fold
• [ ] Hero image sized (width/height) + fetchpriority="high"
• [ ] Cases as a CPT with stable card ratios
• [ ] Services pages with scope/deliverables/timeline
• [ ] Contact form with server validation + timezone/response SLA
• [ ] Critical CSS inline ≤ 15 KB; defer the rest
• [ ] Analytics/chat on interaction, not on page load
• [ ] Keyboardable menus; focus-visible; contrast ≥ 4.5:1
• [ ] Field LCP/INP/CLS monitored per template
• [ ] Removal path documented for every widget/vendor

Closing

Creative work sells through clarity. Treat Motto as your UI baseline and let discipline do the rest: one source of tokens, honest proof, a contact path you can defend, and defaults that won’t collapse under real traffic. When your pages stop repainting and your copy stops meandering, calendars fill with qualified calls—proof that the boring engineering choices were the brave creative ones all along.