AI Featured Image Generator

WordPress plugin that adds AI-powered image generation to both Classic Editor and Block Editor (Gutenberg). Generate professional blog hero images using multiple AI models via OpenRouter without leaving your post editor.

Features

• Dual Editor Support: Works in both Classic Editor and Block Editor (Gutenberg)
• Block Editor Sidebar Panel: Dedicated "AI Generate" panel in Document settings
• Classic Editor Modal Tab: "AI Generate" tab in media library modal
• Auto Prompt Generation: Automatically creates image prompts from your post title, content, and category
• Style Presets: 5 editorial presets (Photorealistic, Tech/Business, Lifestyle, News/Journalism, Creative/Artistic)
• Dynamic Model Selection: Choose which AI models to enable from available OpenRouter image models
• Multiple Image Options: Generates images from each enabled model for comparison
• Category Presets: Different image styles for different post categories
• One-Click Generation: From blank post to featured image in seconds
• Media Library Upload: Generated images automatically added to your media library

Installation

From GitHub

1. Download the latest release from Releases
2. Upload the ZIP file via WordPress Admin → Plugins → Add New → Upload Plugin
3. Activate the plugin
4. Go to Settings → AI Image Generator to configure your API key

Manual Installation

1. Clone or download this repository
2. Upload the wp-ai-image-gen folder to /wp-content/plugins/
3. Activate the plugin through the 'Plugins' menu in WordPress
4. Go to Settings → AI Image Generator to configure your API key

Configuration

1. Get OpenRouter API Key

1. Go to https://openrouter.ai/keys
2. Create a new API key
3. Copy the key (starts with sk-or-...)
4. Add credits to your account ($5-10 recommended)

2. Configure Plugin

1. In WordPress admin, go to Settings → AI Image Generator
2. Paste your OpenRouter API key
3. Select your preferred AI model (default: Google Gemini 2.5 Flash Image)
4. Set number of images to generate (default: 3)
5. Customize brand guidelines to match your site's style
6. Optional: Add category-specific style presets
7. Click Save Changes

3. Brand Guidelines

Define your brand style that will be applied to all generated images. Example:

blue gradient, modern tech aesthetic, clean minimalist design, no text overlays

Customize this to match your brand colors and style!

Usage

Block Editor (Gutenberg) - Recommended

1. Create or edit a post in the Block Editor
2. Open the Document sidebar (right side)
3. Find the "AI Generate" panel (camera icon)
4. Click "Generate AI Image" button
5. Click Auto from Post to generate a prompt (or write your own)
6. Review the prompt and click Generate Images
7. Wait 30-60 seconds for AI generation
8. Review the 3 generated images and click Use This Image on your favorite
9. Done! Featured image is automatically set

Classic Editor

1. Create or edit a post in the Classic Editor
2. Click Set featured image button
3. Click the AI Generate tab in the modal
4. Click Auto from Post to generate a prompt (or write your own)
5. Review the prompt and click Generate Images
6. Wait 30-60 seconds for AI generation
7. Review the 3 generated images and click Use This Image on your favorite
8. Done! Featured image is automatically set

Note: The plugin automatically detects which editor you're using and provides the appropriate interface.

Category-Specific Styles

Configure different image styles per category:

• Technical Guides: "technical illustration, code elements, diagrams"
• AI Licensing: "abstract business concept, professional, legal aesthetic"
• Platform Updates: "modern SaaS UI, dashboard elements, product screenshots"
• Creator Stories: "human-centric, authentic, warm tones"

Technical Details

Architecture

wp-ai-image-gen/
├── wp-ai-image-gen.php              # Main plugin file
├── includes/
│   ├── class-settings.php           # Settings page
│   ├── class-openrouter-client.php  # OpenRouter API wrapper
│   ├── class-ajax-handler.php       # AJAX endpoints
│   ├── class-modal-tab.php          # Classic Editor integration
│   └── class-block-editor.php       # Block Editor integration (NEW)
├── assets/
│   ├── js/
│   │   ├── modal-tab.js            # Classic Editor UI
│   │   └── block-editor.js         # Block Editor UI (NEW)
│   └── css/
│       ├── modal-tab.css           # Classic Editor styles
│       └── block-editor.css        # Block Editor styles (NEW)
├── README.md
└── BLOCK_EDITOR_INTEGRATION.md     # Technical docs (NEW)

API Endpoints

• wpai_generate_prompt: Auto-generate prompt from post
• wpai_generate_image: Generate image from prompt
• wpai_set_featured: Set generated image as featured

Costs (via OpenRouter)

• Prompt Generation: ~$0.0001 per prompt (GPT-4o-mini)
• Image Generation: ~$0.01-0.04 per image depending on model:
  • Google Gemini 2.5 Flash Image: ~$0.01 per image
  • Black Forest Labs Flux 1.1 Pro: ~$0.04 per image
  • Other models: See https://openrouter.ai/models
• Total per request: ~$0.03-0.12 (generates 3 images per request)

Image Specifications

• Models: Verified working models via OpenRouter (Feb 2025):
  • google/gemini-2.5-flash-image - Nano Banana GA (default, recommended)
  • google/gemini-3-pro-image-preview - Nano Banana Pro
• Aspect Ratios: Configurable per-generation (Gemini models only):
  • 1:1 Square (1024×1024)
  • 16:9 Widescreen (1344×768)
  • 9:16 Portrait (768×1344)
  • 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 21:9 also supported
• Format: PNG
• File naming: {post-title} - AI Generated {index}.png

Troubleshooting

Block Editor: Panel Not Showing

1. Verify you're using the Block Editor (not Classic Editor)
2. Check the Document tab in the right sidebar (not Block tab)
3. Scroll down to find the "AI Generate" panel with camera icon
4. Ensure plugin is activated and API key is configured

Classic Editor: Tab Not Showing

1. Verify you're using the Classic Editor
2. Click "Set featured image" to open media modal
3. Look for "AI Generate" tab at the top
4. If missing, check browser console for JavaScript errors

"API key not configured" error

Go to Settings → AI Image Generator and add your OpenRouter API key.

"Permission denied" error

Make sure you have permission to edit the post.

Image generation times out

Image generation takes 30-60 seconds. If it times out:

• Check your internet connection
• Verify your OpenRouter API key is valid
• Check OpenRouter status: https://status.openrouter.ai/
• Try reducing number of images in settings

Images not appearing

• Check WordPress media library permissions
• Verify /wp-content/uploads/ is writable
• Check PHP upload limits (upload_max_filesize, post_max_size)

Changelog

0.3.1 - 2025-02-05

• FIX: Removed non-working OpenRouter models causing 404 errors
• FIX: Updated model list to only verified working models (Gemini 2.5 Flash Image, Gemini 3 Pro)
• REMOVED: GPT-5 Image, Flux 2 models (don't support OpenRouter's modalities parameter)
• IMPROVED: Updated fallback model list in settings

2.0.0 - 2025-11-11

• NEW: Block Editor (Gutenberg) support with sidebar panel
• NEW: Multiple AI model support via OpenRouter
• NEW: Generate 3 images per request, choose your favorite
• CHANGED: Migrated from OpenAI to OpenRouter API
• IMPROVED: Better error handling and loading states
• IMPROVED: Enhanced UI with React components for Block Editor

1.0.0 - 2025-11-01

• Initial release
• Classic Editor modal tab integration
• Auto prompt generation
• Brand guidelines system
• Category presets
• Media library upload
• Featured image setting

Requirements

• WordPress: 6.2 or higher (6.5+ recommended for best Block Editor support)
• PHP: 7.4 or higher
• OpenRouter API Key: Required
• Block Editor: Enabled (default in WordPress 5.0+) OR Classic Editor plugin installed

License

GPL-3.0-or-later

Support

For issues or questions:

• GitHub: https://github.com/tymrtn/wp-ai-image-gen
• Email: [email protected]

Credits

Built for Copyright.sh by Tyler Martin