Claude SEO & Content Optimizer (Gutenberg Edition)

A WordPress plugin that uses the Anthropic Claude API to automatically generate and optimize content directly in the Gutenberg editor — tailored for the Feuerwehr Wolfurt website.

Features

• AI-powered content generation via the Claude API (Haiku 4.5 / Sonnet 5 / Opus 5)
• Two modes of operation:
  • Einsatzberichte (Posts): Generates professional incident reports from post metadata + editor notes, including a Social Media text
  • Seiten (Pages): Optimizes existing page content into the custom "Einsatzmannschaft" Gutenberg block design
• Configurable output limit and streaming response parsing for long generations
• Gutenberg-native output: All generated content uses native WordPress block markup (``)
• Custom CSS injection: Claude generates page-specific CSS saved as post meta and injected into <head>
• Yoast SEO integration: Automatically writes the generated meta description to _yoast_wpseo_metadesc
• Social Media text (for posts): Saved separately as base64-encoded post meta
• Configurable prompts with a full version history (up to 30 versions per prompt type), with restore functionality
• Full-width meta box below the editor with a responsive card layout (desktop two-column, mobile single-column with a sticky action bar), a per-post custom instruction field with a live character counter, a status chip, and a debug log panel
• Security: nonce verification, capability checks, input sanitization throughout, encrypted API-key storage with a random IV, and per-user rate limiting on generation requests

Requirements

• WordPress 6.0+
• PHP 7.4+
• An Anthropic API key (console.anthropic.com)
• Yoast SEO plugin (optional, for SEO field integration)

Installation

1. Upload the claude-optimizer folder to /wp-content/plugins/
2. Activate the plugin in Plugins > Installed Plugins
3. Go to Settings > Claude API and enter your Anthropic API key
4. Select the Claude model (default: claude-sonnet-5)
5. Configure the prompts for posts and pages

Usage

Settings Page

Navigate to Settings > Claude API to:

• Set your API key and model
• Edit and save the prompt for Einsatzberichte (posts)
• Edit and save the prompt for Seiten (pages)
• Restore previous prompt versions from the version history dropdown

Editor Meta Box

When editing a post or page, a "KI Content-Optimierung" box appears below the block editor (full width, not in the sidebar):

• Optionally enter an additional individual instruction for this specific post (up to 2000 characters, with a live counter)
• Click "Einsatzbericht generieren" (posts) or "Seite optimieren" (pages)
• Claude generates title, Gutenberg content, custom CSS, SEO meta description, and (for posts) Social Media and WhatsApp text
• Each result appears as a card in a responsive grid (single column on mobile, with a sticky action bar) showing a "suggestion" state with a pre-checked box
• Review the suggestions, uncheck anything you don't want, and confirm with "Auswahl übernehmen"; nothing is saved until you do, and Gutenberg updates in place without reloading
• Social Media, WhatsApp, and Custom CSS fields stay directly editable by hand at any time, independent of generation

Generated Fields

Prompt Templates

The plugin ships with two default prompt templates located in the repo:

• Prompt-Bericht.txt — Prompt for incident reports (posts)
• Prompt-Seite.txt — Prompt for page optimization using the "fww-" CSS design system

These can be pasted into the Settings page and will be versioned automatically.

Design System (fww- CSS Classes)

The page prompt instructs Claude to use a custom CSS design system with classes like:

Security Notes

• The API key is stored in wp_options and rendered as a password field
• All AJAX requests use nonce verification (wp_verify_nonce)
• All user input is sanitized before storage and output-escaped before rendering
• Social media text is stored base64-encoded to preserve special characters safely

Author

Johannes Battlogg — Feuerwehr Wolfurt

License

MIT