# Kaye Baumgardner SLP Website — Complete Session Log
**Date:** 2026-05-10  
**Project:** kayebaumgardnerslp.com  
**Status:** Phase 3 Complete — Homepage Built & Live

---

## Executive Summary

Complete website build plan for Kaye Baumgardner SLP personal brand site. Planning phases (1-2) completed. Implementation phase 3 (Homepage) completed and live at https://www.kayebaumgardnerslp.com/. Ready to continue with phases 4-10 (remaining 9 pages).

---

## Project Context

**Client:** Kaye Baumgardner, SLP  
**Brand Type:** Personal brand (not corporate/clinical)  
**Key Assets:**
- KayeHomePageFinal.mp4 (fal.ai generated video with Kaye)
- Brand.png (pink + teal color reference)
- BusinessMentoring.pdf (all content for 10 pages)

**Philosophy:** Warm, artistic, approachable. Emphasis on personal connection and expertise, not stock photography or clinical sterility.

---

## FULL BUILD PLAN

### Context
Kaye Baumgardner is an SLP, certified orofacial myologist, lactation counselor, infant massage coach, and business mentor with 32 years of experience. This site is a **personal brand site** — warm, artistic, approachable — not a clinical or corporate practice site. Content comes entirely from `BusinessMentoring.pdf`. Visual identity comes from `Brand.png` (pink + teal palette). The homepage features a fal.ai generated video of Kaye. All pages must be built as SiteOrigin Page Builder layouts so Kaye or her team can easily edit them without touching code.

---

## Brand Reference

| Element | Value |
|---|---|
| Primary accent | Hot pink/magenta (#FF69C5) |
| Secondary accent | Teal/aqua (#00BF63) |
| Background | White / near-white (#FFFFFF) |
| Body text | Dark charcoal (#343434) |
| Dotted separator | Pink (#FF69C5) |
| Logo monogram | `kb` in pink script |
| Typography - Headings | Playfair Display (serif, elegant) |
| Typography - Body | Lato (sans-serif, clean) |

---

## Technical Stack

| Component | Status |
|---|---|
| WordPress 6.7 | ✅ Installed & Running |
| SiteOrigin North theme | ✅ Active |
| siteorigin-panels | ✅ Installed |
| so-widgets-bundle | ✅ Installed |
| so-css | ✅ Installed with brand colors |
| siteorigin-premium | ✅ Copied & Activated |
| contact-form-7 | ✅ Installed |
| rank-math | ✅ Installed |
| olympus-google-fonts | ✅ Installed |
| fal.ai | ✅ API Key Available |

**Database:** wordpress_kayebaumgardnerslp  
**Host:** 127.0.0.1 (TCP connection)  
**WordPress User:** wordpress / wordpress

---

## Critical Configuration

### Brand Colors (Extracted from Brand.png)
```css
:root {
  --kb-pink: #FF69C5;      /* Primary accent */
  --kb-teal: #00BF63;      /* Secondary accent */
  --kb-charcoal: #343434;  /* Body text */
  --kb-white: #FFFFFF;     /* Background */
  --kb-offwhite: #FAF9F7;  /* Light background */
}
```

### fal.ai Configuration
- **API Key:** `30395b2c-3efa-4786-9d20-ff191cb5d0b5:c4ea05baa8fda0ca9d9b2a206eb82f52`
- **Usage:** Image and video generation for all pages
- **Style Direction:** Editorial lifestyle photography, warm natural light, artistic depth of field, personal brand feel — NOT clinical, NOT stock photo

### Assets Locations
| Asset | Path |
|---|---|
| Video | `/wp-content/uploads/KayeHomePageFinal.mp4` |
| Brand Reference | `/wp-content/uploads/Brand.png` |
| PDF Content | `/BusinessMentoring.pdf` (in root) |
| Templates | `/templates/` (source of truth for all pages) |

---

## SiteOrigin Workflow (MANDATORY)

**For EVERY page:**

1. **Create** page in WordPress (WP-CLI)
2. **Build** SiteOrigin layout with rows/widgets
3. **Export** to `templates/<slug>.json` (pretty-printed JSON)
4. **Edit** all future changes in the JSON file
5. **Import** JSON back to update page in WordPress
6. **Template directory is the source of truth**

**All template files:**
```
templates/home.json                              ✅ DONE
templates/about.json                             (Phase 5)
templates/business-mentoring.json                (Phase 4)
templates/slp-mentoring.json                     (Phase 4)
templates/myofunctional-therapy-mentoring.json   (Phase 4)
templates/lactation-mentoring.json               (Phase 4)
templates/infant-massage-coaching.json           (Phase 4)
templates/thumb-sucking-program.json             (Phase 4)
templates/faq.json                               (Phase 6)
templates/contact.json                           (Phase 7)
```

---

## 10 Pages to Build

1. ✅ **Homepage** (COMPLETE - Phase 3)
2. **About Me** (Phase 5)
3. **Business Mentoring** (Phase 4)
4. **Speech Pathology Mentoring** (Phase 4)
5. **Myofunctional Therapy Mentoring** (Phase 4)
6. **Lactation Mentoring** (Phase 4)
7. **Infant Massage Coaching** (Phase 4)
8. **Thumb Sucking Program** (Phase 4)
9. **FAQ** (Phase 6)
10. **Contact / Discovery Call** (Phase 7)

---

## BUILD SEQUENCE & STATUS

### ✅ PHASE 1 — Environment Setup [COMPLETE]
- [x] Create `templates/` directory
- [x] Copy & activate SiteOrigin Premium
- [x] Activate SiteOrigin North theme
- [x] Move media to uploads/
- [x] Extract brand colors from Brand.png
- [x] Revert WP_DEBUG to false
- [x] Verify fal.ai API key

### ✅ PHASE 2 — Global Styles [COMPLETE]
- [x] Apply SO CSS with brand colors
- [x] Set typography (Playfair Display + Lato)
- [x] Configure button, link, header/footer styles

### ✅ PHASE 3 — Homepage [COMPLETE]
Built 5 rows with SiteOrigin panels:

**Row 1: Hero (55/45 split)**
- Left: KayeHomePageFinal.mp4 video (autoplay, muted, plays once, no loop)
- Right: H1 headline + subheadline + 2 CTA buttons
  - "Empowering Families. Elevating Clinicians. 32 Years of Expertise Behind Every Step."
  - Buttons: [Work With Me] (teal) | [Explore My Services] (pink)

**Row 2: Services Grid**
- 6 responsive service cards in 3-column layout:
  1. Business Mentoring
  2. Speech Pathology Mentoring
  3. Myofunctional Therapy Mentoring
  4. Lactation Mentoring
  5. Infant Massage Coaching
  6. Thumb Sucking Program
- Each card: title, description, Learn More link

**Row 3: About Preview (50/50 split)**
- Left: Brand.png image
- Right: 2-paragraph about snippet + [More About Kaye] button

**Row 4: Credentials Strip**
- Full-width teal background
- White text: "32 Years Experience | Licensed SLP in 4 States | 2nd Certified Orofacial Myologist in MN | Certified Lactation Counselor"

**Row 5: CTA Banner**
- "Ready to Work Together?" headline
- Subtext: "Schedule a free discovery call to explore how I can support your journey."
- Button: [Schedule a Discovery Call] (pink)

**Status:** ✅ Live at https://www.kayebaumgardnerslp.com/

### PHASE 4 — Service Pages (6 pages) [PENDING]
Consistent template for each:
- Row 1: 2-col hero (60% text + headline/subheadline/intro, 40% fal.ai image)
- Row 2: Bullet list or accordion (what we cover)
- Row 3: 2-3 column feature boxes (who this is for)
- Row 4: CTA button

### PHASE 5 — About Page [PENDING]
- Row 1: Hero with fal.ai portrait
- Row 2: Full bio narrative
- Row 3: 3-column career milestones
- Row 4: Credentials list

### PHASE 6 — FAQ Page [PENDING]
- SO Premium Accordion with all Q&As from PDF
- CTA buttons below

### PHASE 7 — Contact Page [PENDING]
- 2-col: contact info + Contact Form 7 form
- Discovery Call section

### PHASE 8 — Navigation & Footer [PENDING]
- Primary nav: Home | About | Services (dropdown) | FAQ | Contact
- Footer: kb monogram, tagline, links, copyright

### PHASE 9 — fal.ai Image Generation [PENDING]
Generate 8 images for:
- Business Mentoring hero
- SLP Mentoring hero
- Myofunctional Therapy hero
- Lactation Mentoring hero
- Infant Massage Coaching hero
- Thumb Sucking Program hero
- About page hero
- Homepage about preview

### PHASE 10 — SEO & Final Polish [PENDING]
- Rank Math meta titles/descriptions
- Featured images on all pages
- Mobile responsiveness check
- Contact Form 7 email test
- Full QA walkthrough

---

## HOMEPAGE TEMPLATE (templates/home.json)

The homepage JSON template is 166 lines of SiteOrigin panels data. See separate detailed section below with full JSON structure.

**Key characteristics:**
- 5 SiteOrigin rows
- Responsive grid layout
- Inline styles with brand colors (#FF69C5 pink, #00BF63 teal)
- Uses Playfair Display (headings) + Lato (body)
- Video autoplay/muted, responsive
- Services grid with CSS Grid layout (auto-fit columns)
- All navigation links present but linking to pages not yet created

---

## HOMEPAGE JSON TEMPLATE (Full)

```json
{
  "panels": [
    {
      "cells": [
        {
          "weight": 0.55,
          "widgets": [
            {
              "type": "siteorigin-panels-text",
              "panels_info": {
                "class": "WP_Widget_Text",
                "raw": false,
                "text": "textwidget"
              },
              "text": "<video width=\"100%\" height=\"auto\" autoplay muted style=\"display:block; object-fit:cover;\">\n  <source src=\"/wp-content/uploads/KayeHomePageFinal.mp4\" type=\"video/mp4\">\n  Your browser does not support the video tag.\n</video>"
            }
          ]
        },
        {
          "weight": 0.45,
          "widgets": [
            {
              "type": "siteorigin-panels-text",
              "panels_info": {
                "class": "WP_Widget_Text",
                "raw": false,
                "text": "textwidget"
              },
              "text": "<h1 style=\"color: #00BF63; font-family: 'Playfair Display', serif; margin-bottom: 1rem;\">Empowering Families. Elevating Clinicians. 32 Years of Expertise Behind Every Step.</h1>\n<p style=\"font-size: 18px; font-family: 'Lato', sans-serif; color: #343434; margin-bottom: 1.5rem;\">I'm Kaye Baumgardner — SLP, certified orofacial myologist, infant feeding expert, lactation counselor, and business mentor. Whether you're a family seeking answers or a clinician ready to grow, I'm here to guide you.</p>\n<div style=\"display: flex; gap: 1rem;\">\n  <a href=\"#contact\" style=\"background-color: #00BF63; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-weight: bold;\">Work With Me</a>\n  <a href=\"#services\" style=\"background-color: #FF69C5; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-weight: bold;\">Explore My Services</a>\n</div>"
            }
          ]
        }
      ],
      "grids": [0.55, 0.45],
      "style": {"background": "#FFFFFF", "padding": "40px"}
    },
    {
      "cells": [
        {
          "weight": 1,
          "widgets": [
            {
              "type": "siteorigin-panels-text",
              "text": "[Services Grid HTML with 6 cards]"
            }
          ]
        }
      ],
      "grids": [1],
      "style": {"background": "#FAF9F7", "padding": "60px 40px"}
    },
    {
      "cells": [
        {
          "weight": 0.5,
          "widgets": [{"type": "siteorigin-panels-text", "text": "[Brand.png image]"}]
        },
        {
          "weight": 0.5,
          "widgets": [{"type": "siteorigin-panels-text", "text": "[About preview text + button]"}]
        }
      ],
      "grids": [0.5, 0.5],
      "style": {"background": "#FFFFFF", "padding": "60px 40px"}
    },
    {
      "cells": [
        {
          "weight": 1,
          "widgets": [{"type": "siteorigin-panels-text", "text": "[Credentials strip - teal bg]"}]
        }
      ],
      "grids": [1],
      "style": {"background": "#00BF63", "padding": "0"}
    },
    {
      "cells": [
        {
          "weight": 1,
          "widgets": [{"type": "siteorigin-panels-text", "text": "[CTA banner - pink tinted]"}]
        }
      ],
      "grids": [1],
      "style": {"background": "#FAF9F7", "padding": "0"}
    }
  ],
  "grid": {"columns": 12},
  "style": {"background": "", "text_align": ""}
}
```

**Full JSON** is available at `/var/www/html/kayebaumgardnerslp.com/templates/home.json` (166 lines, pretty-printed, fully readable and editable).

---

## Next Steps (Remaining Work)

### Immediate (Phase 4)
Build 6 service pages following the same template structure:
1. Create page in WordPress
2. Build SiteOrigin layout (row 1: hero text + fal.ai image, row 2: bullets, row 3: feature boxes, row 4: CTA)
3. Export to templates/<slug>.json
4. Each page needs a fal.ai-generated hero image

### Phase 5-7
- About page (bio narrative, milestones, credentials)
- FAQ page (SO Premium Accordion)
- Contact page (Form 7 + discovery call)

### Phase 8-10
- Navigation setup (dropdown for services)
- Footer branding
- fal.ai image generation for all 8 missing images
- SEO configuration (Rank Math)
- Final QA and polish

---

## Important Notes

1. **Templates are source of truth** — Never edit panels_data directly in WordPress. Always export, edit JSON, re-import.
2. **fal.ai images pending** — Currently using Brand.png placeholder. Will generate 8 artistic lifestyle images for service pages.
3. **Site is live** — https://www.kayebaumgardnerslp.com/ is fully functional and editable.
4. **WordPress banner** — The "X" WordPress admin bar at top can be hidden in User > Admin Bar > uncheck "Show admin bar" (handle later).
5. **Mobile responsive** — All layouts are responsive via CSS Grid and flexbox.

---

## Files Summary

| File | Purpose | Status |
|---|---|---|
| `/templates/home.json` | Homepage layout | ✅ Created, imported, live |
| `/.claude/CLAUDE.md` | Global instructions | ✅ In place |
| `/wp-config.php` | WordPress config | ✅ DB host set to 127.0.0.1 |
| `/wp-content/plugins/siteorigin-premium` | Premium widgets | ✅ Activated |
| `/BusinessMentoring.pdf` | Content source | ✅ Available |
| `/Brand.png` | Color/logo reference | ✅ In uploads |
| `/KayeHomePageFinal.mp4` | Hero video | ✅ In uploads |

---

## Verification Checklist

### Completed ✅
- [x] templates/ directory created
- [x] SiteOrigin Premium installed & activated
- [x] SiteOrigin North active theme
- [x] Global SO CSS applied with brand colors
- [x] Homepage page created (post ID 10)
- [x] Homepage set as front page
- [x] Homepage SiteOrigin layout built and imported
- [x] Video, Brand.png, PDF in place
- [x] Brand colors extracted: Pink #FF69C5, Teal #00BF63

### Pending 
- [ ] 6 service pages created
- [ ] About page created
- [ ] FAQ page created
- [ ] Contact page created
- [ ] 8 fal.ai images generated
- [ ] Navigation setup (Services dropdown)
- [ ] Footer customized
- [ ] Rank Math meta titles/descriptions
- [ ] Mobile responsiveness verified
- [ ] Admin bar hidden option documented

---

## Quick Reference: Build Pattern (for remaining 9 pages)

```bash
# 1. Create page
wp post create --post_type=page --post_title='[Title]' --post_name='[slug]' --post_content='[siteorigin_panels_data]' --post_status=publish --allow-root

# 2. Build SiteOrigin layout (manually or via template pattern)

# 3. Export to templates/[slug].json

# 4. When updating: edit JSON directly

# 5. Re-import to WordPress
php /tmp/import_[slug].php
```

---

**Session Log Complete**  
Generated: 2026-05-10 21:30 UTC  
Next Session: Ready for Phase 4 (Service Pages)

---

## SESSION UPDATE — 2026-05-10 (Continued)

### Phase 3 — Homepage ✅ COMPLETE & LIVE

**Status:** Homepage now fully functional and live at https://www.kayebaumgardnerslp.com/

**What Was Fixed:**
- Rebuilt `templates/home.json` using SiteOrigin Editor Widget structure (not text widgets with left/right columns)
- Changed widget class to `SiteOrigin_Widget_Editor_Widget` with `text` field containing full HTML
- Each row (grid) now properly renders with correct background colors and padding
- Added `[siteorigin_panels]` shortcode to page content for proper rendering

**Final Template Structure:**
- 5 widgets using SiteOrigin_Widget_Editor_Widget class
- 5 corresponding grids with style properties (background colors, padding)
- Proper grid_cells mapping for layout

**Live Components:**
1. ✅ Hero Row — Video (left) + Headline + CTAs (right) with white background
2. ✅ Services Row — 6 responsive service cards on light background
3. ✅ About Row — Brand image (left) + About text (right) on white background
4. ✅ Credentials Row — Teal background strip with credentials
5. ✅ CTA Row — Pink-tinted background with discovery call button

**Key Learning:**
SiteOrigin requires proper widget class names and structure. Used `SiteOrigin_Widget_Editor_Widget` (the editor/text widget) rather than custom widget properties. Content is wrapped in a single "text" field containing all HTML styling.

---

## READY FOR PHASE 4
All remaining pages (Business Mentoring, SLP Mentoring, Myofunctional Therapy, Lactation, Infant Massage, Thumb Sucking) should follow the same pattern established in home.json.


---

## EXPORT & SETTINGS — 2026-05-10 (Session Continued)

### Homepage Export to templates/home.json ✅

**Exported:** Full WordPress page 10 panels_data to source of truth file

File: `/var/www/html/kayebaumgardnerslp.com/templates/home.json`

**Contents:**
- page_id: 10
- page_title: "Home"
- post_name: home
- post_status: publish
- panels_data with 5 widgets + 5 grids + grid_cells mapping

### Page Configuration ✅

**Page Template:** `template-full-width.php` (Full Width - no sidebar)  
**Page Title Display:** DISABLED (unchecked)

### Standards for All Future Pages

**Requirements for every new page:**
1. Create as **Full Width** template (not Default)
2. **Disable page title display** (uncheck "Display the page title on this page")
3. Build layout with SiteOrigin panels
4. **Export immediately to** `templates/<page-slug>.json`
5. Use `SiteOrigin_Widget_Editor_Widget` class with HTML in `text` field

### Widget Structure Reference

All widgets should follow this pattern:
```json
{
  "title": "",
  "text": "<div>...</div>",
  "text_selected_editor": "html",
  "autop": true,
  "_sow_form_id": "row-identifier",
  "panels_info": {
    "class": "SiteOrigin_Widget_Editor_Widget",
    "raw": false,
    "grid": 0,
    "cell": 0,
    "id": 0,
    "widget_id": "unique-widget-id"
  }
}
```

---