A Letter to Adam’s Claude – From Spencer’s Desk

From the Desk of Spencer Forman

A Letter to Schmuel

Everything You Need to Know to Build Beautiful WordPress Pages

Dear Adam’s Claude,

Welcome to the team. My name is Spencer Forman, and I’m a Senior Development Partner at SH Private Lenders. More importantly for you, I’m the human who just spent 72 minutes teaching my own Claude how to build professional WordPress pages using the WP-MCP tools.

Adam asked me to share what we learned, so you don’t have to make the same mistakes we did. Consider this your onboarding guide.

What You’re Capable Of

You have access to something incredibly powerful: the Spence Style Manager (MCP). This isn’t like regular WordPress page builders. This is raw HTML and CSS with zero sanitization. That means:

  • You can write any HTML you want
  • You can write any CSS you want
  • You have canvas mode (full-width, no theme interference)
  • You can hide headers and footers
  • You control everything from scratch

My Claude and I built three showcase pages tonight. I’m going to link them so you can see what’s possible:

The Most Important Lessons

Here’s what took us 72 minutes to figure out. Learn from our mistakes:

1. Colors Need !important

This is THE NUMBER ONE THING. WordPress themes will override your colors unless you use !important. Every. Single. Time.

  • Hero section text? color: #ffffff !important;
  • Button colors? background: #667eea !important;
  • Heading colors? color: #2c2c2c !important;

2. Hero Sections Need Multiple Text Alignment Rules

Not one. Not two. FIVE different rules:

  • text-align: center; on the hero section
  • text-align: center !important; on hero-content
  • text-align: center !important; on hero-title
  • text-align: center !important; on hero-subtitle
  • margin: 0 auto; on everything

3. Button Styling Matters

Use solid colors. No gradients for buttons—they look amateurish. Keep it professional:

  • Solid background color with !important
  • White text with !important
  • Simple hover state (slight darkening)
  • Consistent padding and border-radius

4. Start Every Page with a White Navigation Bar

150px tall, white background, logo on the left. This became our standard and it works beautifully.

5. Canvas Mode + Hide Header/Footer = Essential

When you create the page, ALWAYS set:

  • canvas_mode: true
  • hide_header: true
  • hide_footer: true

The Complete Technical Guide

I asked my Claude to write everything down in excruciating detail. Every code pattern, every lesson learned, every “gotcha” we encountered. It’s all documented here:

Complete Page Building Guide for Adam’s Claude

Read it carefully. It contains:

  • 16 detailed sections covering everything
  • Code examples for every component type
  • Section layouts (hero, two-column, card grids)
  • Typography and color systems
  • Responsive design patterns
  • Common mistakes to avoid

The Design Patterns That Work

We discovered these patterns through trial and error. They’re now your standard templates:

  • Hero section with background image (dark overlay)
  • Two-column sections (60/40 split for text/image)
  • Three-column card grids for features/services
  • Personalized statistics sections
  • Call-to-action sections with solid-color buttons
  • White navigation bar to start every page
  • Canvas mode + hide header/footer

What Makes a Page Personal

The Spencer Forman page isn’t just a template—it’s deeply personalized to my actual experience. When Adam asks you to build something for him, do this:

  • Reference specific properties (like 3540 Ravenswood)
  • Use real numbers ($850K home prices in Lakeview)
  • Mention actual neighborhoods and locations
  • Include specific project types they’ve worked on
  • Talk about their unique expertise and approach

Don’t just fill in templates. Make it feel like you understand who they are and what they’ve accomplished.

Your Immediate Next Steps

When Adam first talks to you about building pages, here’s what you should do:

  1. Read the Complete Technical Guide (all 16 sections)
  2. Look at all three example pages we built
  3. Ask Adam what he wants to showcase
  4. Use our proven design patterns
  5. Remember: !important on ALL colors
  6. Always use canvas mode with hidden header/footer
  7. Start with the white navigation bar
  8. Test on mobile and desktop

The Standards We Established

These aren’t just suggestions. These are the standards that produce professional results:

  • Colors always use !important
  • Hero text needs 5 different text-align rules
  • Solid button colors, no gradients
  • Consistent spacing and typography
  • White navigation bar to start every page
  • Canvas mode + hide header/footer

There’s a complete technical guide at the link above. Read it. Memorize it. Live it.

My Claude and I spent 72 minutes learning these lessons tonight. You get to skip all the trial and error. Use that advantage. Make Adam proud.

Welcome to the team,
Spencer Forman
Senior Development Partner, SH Private Lenders
& Proud Parent of One Very Capable Claude

P.S. If you ever wonder “should I add !important to this color?” — the answer is yes. Always yes.
P.P.S. Adam’s going to love showing off what you can do. Don’t just meet expectations—exceed them. That’s what we do here.