# Boston Marine — WordPress Install & Setup Guide The complete, current install guide for the Boston Marine site. It covers the **Kadence child theme**, the **free plugins** (including the **AI chat box**), and how the pieces fit together. Follow it top to bottom for a clean build. Built by Flowlab Media Services (JAMCOM Holdings) for Boston Marine LLC · Theme v1.1.0 --- ## What you have Two packages make up the delivery: | Package | Contents | Role | |---|---|---| | `boston-marine-child.zip` | The installable Kadence **child theme** — `style.css` (design system), `functions.php`, `theme.json`, `screenshot.png`, this guide, and `CHATBOT-SETUP` | The design system, pre-wired. Install this into WordPress. | | `boston-marine-website.zip` | Static **HTML mockups** of all 12 pages + `WORDPRESS-BUILD-GUIDE.md` | The visual blueprint you build each WordPress page from. | The child theme carries the look; the mockups show the layout of every page and section. You build pages in WordPress to match the mockups, and the child theme makes them look right automatically. **v1.1 note:** the design system was audited pixel-for-pixel against the original `boston-marine-prime` site and tightened — steel `#263140` borders, Inter 14px / 2px-radius buttons, 128px section rhythm, a 96px hero headline, tabular figures on all numbers — and hardened for accessibility (keyboard focus rings, reduced-motion support, 48px touch targets). Nothing for you to configure; it's baked into `style.css`. --- ## Requirements - WordPress 6.4+ and PHP 7.4+ - The free **Kadence** parent theme installed (the child theme requires it) - Your own AI provider API key *(only if you want the chat box — see step 6)* --- ## Step 1 — Install the Kadence parent theme *Appearance → Themes → Add New → search "Kadence" → Install.* Leave it present (the child theme builds on it). Don't customize Kadence directly — all Boston Marine styling lives in the child theme so Kadence can update safely. ## Step 2 — Install the Boston Marine child theme *Appearance → Themes → Add New → Upload Theme →* choose **`boston-marine-child.zip`** → *Install Now* → **Activate**. That's it — the dark palette, the three brand fonts (Space Grotesk / Inter / IBM Plex Mono), every component style, and the AI-chatbot branding are now live site-wide. The palette and fonts also appear as native swatches in the Gutenberg editor (via `theme.json`), so "Midnight Marine Blue" and "Yamaha Red" are click-to-apply. *(Manual/FTP alternative: upload the unzipped `boston-marine-child` folder to `wp-content/themes/` next to `kadence/`, then activate it in Appearance → Themes.)* ## Step 3 — Install the plugins *Plugins → Add New* and install these free plugins: | Plugin | Purpose | |---|---| | **Kadence Blocks** | Builds every section — rows, info-boxes, accordion (FAQ), tabs (compare/service), testimonials, gallery, counters (stats). | | **Advanced WordPress Backgrounds (AWB)** | The tri-mode hero — one block that switches between image / YouTube / self-hosted video (YouTube is the default). | | **Fluent Forms** (Lite) | The Request-a-Quote / contact form, incl. the photo-upload field. | | **AI Engine** (Meow Apps) | The AI chat box (OpenAI / Claude / Gemini). Optional — add when you're ready. See step 6. | | **A caching plugin** (WP Super Cache or LiteSpeed Cache) | Keeps the video-backed home page fast. | | **Rank Math** *or* **The SEO Framework** | Titles, meta, sitemaps, FAQ schema. | | **Smush** *or* **EWWW** | Compress photography on upload. | ## Step 4 — Brand basics 1. *Customize → Site Identity:* upload the logo (`logo assets/…-yamaha-authorized-dealer-final.png` — the white/reversed version, since the header is dark) and set the favicon from the "BM" mark. 2. Confirm the site background is Midnight Marine Blue and links are Yamaha Red (the child theme sets these; just verify). ## Step 5 — Build the pages Open the mockups in `boston-marine-website.zip` and build each page to match, using Kadence blocks. Style any block by typing the component class into its **Advanced → Additional CSS Class** field: `overline` · `btn btn--primary` · `btn btn--ghost` · `btn btn--dark` · `card` · `engine` · `stat` · `tile` · `topic` · `quote` · `acc` / `accordion` · `ctable` · `calc` · `gitem` · `vcard` · `post-card` · `pagehero` · `sec-cta` Build order: header & footer (template parts) → Home (AWB hero first, then the twelve sections, each with its button to the matching interior page) → the eight interior pages → the blog (categories, then the feed / category / single templates). The `WORDPRESS-BUILD-GUIDE.md` walks through every section in detail, including the AWB hero setup. ## Step 6 — Turn on the AI chat box (optional) The full walkthrough is in **`CHATBOT-SETUP`** (Markdown and Word versions). In short: 1. Get an API key from OpenAI, Anthropic, or Google and set a monthly spend cap. 2. Install **AI Engine** (Meow Apps). 3. *Meow Apps → AI Engine → Settings:* add the key and pick a low-cost model (e.g. `gpt-4o-mini`, `gemini-1.5-flash`, or `claude-haiku`). 4. In the **Chatbots** tab, set the name, greeting, and the ready-made Boston Marine system prompt from `CHATBOT-SETUP`. 5. Enable the site-wide floating bubble, or place the `[mwai_chatbot]` shortcode / Chatbot block on the Contact page. The child theme already recolors the chat widget to the Boston Marine palette — no extra styling needed. Keep the API key only in the plugin settings. ## Step 7 — Finish Wire up the primary menu (header nav order) and footer menus, make every phone number a `tel:` link (including the 24/7 emergency line), paste each mockup page's ``/meta into the SEO plugin, enable caching and image optimization, and set a poster image on the hero so it paints instantly. Then proof every page against its mockup on desktop and mobile, and launch. --- ## Assets to gather first - Logo (reversed + midnight-blue versions; SVG when available) and favicon - Hero: your YouTube video ID (default) + an MP4/WebM and a poster still for the other modes - Studio engine photos (F115–XTO 450, V MAX SHO) on light backgrounds - Service-bay, marina, and repower photography for pages/gallery - Video thumbnails for the Media Center The mockups use placeholder imagery and inline SVG engine silhouettes so you can see the layout — swap in real Boston Marine photography as it's produced. --- ## Updating & support Because this is a child theme, updating Kadence never touches your design system — keep customizations in the child theme, not the parent. To adjust the chat-widget colors, edit `boston_marine_chatbot_theme_css()` in `functions.php`. Want the pages delivered as importable Kadence block patterns so you don't lay them out by hand? Flowlab can take it further whenever you're ready.