WordPress Plugin Integrations
Connecting WordPress Plugins to Your Headless Site
One of the powerful features of headless WordPress is that you can still leverage popular WordPress plugins while enjoying the performance benefits of a Next.js frontend.
What Are Plugin Integrations?
Plugin integrations allow your Next.js site to pull data from WordPress plugins you've installed on your backend. The headless system automatically detects compatible plugins and provides toggle switches to enable/disable their features.
Available Integrations (From Screenshot)
1. Contact Form 7
Icon: Blue document icon
What it is: The most popular contact form plugin for WordPress, with over 5 million active installations.
What it does: Creates and manages contact forms that visitors can use to send you messages.
When enabled: Your Next.js site can display Contact Form 7 forms and submit data back to WordPress for processing.
Use cases:
- Contact page forms
- Quote request forms
- Newsletter signups
- Customer support inquiries
Setup requirements:
- Install Contact Form 7 plugin in WordPress
- Create your forms in WordPress admin
- Enable integration toggle in Headless WP Manager
- Add form shortcode to your Next.js pages
2. WordPress Comments
Icon: Green comment bubble
What it is: Native WordPress commenting system.
What it does: Allows readers to leave comments on your blog posts and pages.
When enabled: Comments from WordPress will appear on your Next.js blog posts. New comments submitted through your headless site will be saved to WordPress.
Benefits:
- Encourage reader engagement
- Build community around your content
- Get feedback and questions directly
- Improve SEO with user-generated content
Features included:
- Comment threading (replies to comments)
- Comment moderation (approve/reject)
- Spam protection (via Akismet if installed)
- Email notifications for new comments
3. Advanced Custom Fields (ACF)
Icon: Blue 'ACF' badge
What it is: A powerful plugin that lets you add custom data fields to WordPress posts, pages, and custom post types.
What it does: Extends WordPress content editor with custom fields like text, images, dates, relationships, etc.
When enabled: All ACF field data is automatically available in your headless site through GraphQL.
Common use cases:
- Real Estate Sites: Price, bedrooms, bathrooms, square footage
- Recipe Blogs: Prep time, cook time, servings, ingredients
- Product Pages: Price, SKU, dimensions, materials
- Team Pages: Job title, bio, social links, photo
Example workflow:
- Create ACF field group in WordPress (e.g., 'Recipe Details')
- Add fields (prep_time, cook_time, servings)
- Fill in fields when creating posts
- Enable ACF integration
- Access field data in Next.js templates
4. Advanced SEO (Yoast/RankMath)
Icon: Pink 'SEO' badge
What it is: SEO optimization plugins like Yoast SEO or Rank Math.
What it does: Manages meta titles, descriptions, Open Graph tags, schema markup, and other SEO elements.
When enabled: SEO data from your chosen plugin (Yoast or RankMath) is passed to your Next.js pages.
SEO elements controlled:
- Meta Title: Custom page titles for search engines
- Meta Description: Snippet text in search results
- Open Graph: How pages appear when shared on Facebook
- Twitter Cards: How links look on Twitter
- Canonical URLs: Prevents duplicate content issues
- Schema Markup: Structured data for rich search results
Benefits:
- Better search engine rankings
- More attractive social media previews
- Higher click-through rates
- Proper indexing by search engines
How to Enable/Disable Integrations
Simply click the toggle switch on the right side of each integration card. When enabled, the toggle lights up. Changes take effect immediately.
Troubleshooting
Integration not appearing?
- Check that the plugin is installed and activated in WordPress
- Ensure WPGraphQL and required extensions are installed
- Refresh the Integrations page
Data not showing?
- Verify the integration is enabled (toggle is on)
- Clear your site cache
- Check that you've created content with the plugin