Synced Pattern Popups
Synced Pattern Popups is a lightweight, developer-friendly WordPress plugin that displays beautiful modal popups with content from WordPress Synced Patterns. No build process required — everything works out of the box.
Perfect for: * Marketing campaigns and promotional popups * Terms of service and privacy policy modals * Product details and specifications * Image galleries and media showcases * Contact forms and newsletter signups * Any content you want to display in a modal
Key Benefits:
- Easy Content Management: Create popup content using WordPress’s native Block Editor — no coding required
- Simple Trigger System: Add a class or href attribute to any element to open a popup
- Performance Optimized: Intelligent caching and lazy loading ensure fast page loads
- Mobile Friendly: Responsive design that works perfectly on all devices
- Accessibility First: Full keyboard navigation, screen reader support, and ARIA attributes
- AI-Powered TLDR: Generate AI summaries of your content with a single click (requires AI Experiments plugin)
- Developer Friendly: Clean code, WordPress hooks, and extensible architecture
What are Synced Patterns?
Synced Patterns (stored as wp_block posts) are reusable block layouts you can create and manage once, then reuse across your site. When you edit a synced pattern, any place it’s used is updated automatically.
This plugin surfaces them with a dedicated admin screen at Appearance → Synced Patterns, making it easy to: — See each pattern’s ID at a glance — Copy the trigger code — Edit or delete the pattern — Clear the cached popup output when needed
Major Features
Modal popups powered by Synced Patterns
Create your popup content using the native Block Editor — layouts, images, galleries, buttons, and third-party blocks all work.
Simple trigger system (class or href)
Trigger popups with either:
— class="spp-trigger-{id}"
— href="#spp-trigger-{id}" (handy in the Block Editor)
You can also set a custom modal width with: spp-trigger-{id}-{width}.
On-demand loading (AJAX)
Popup content loads only when needed, which keeps initial page loads fast.
Smart caching with automatic invalidation
Rendered popup output is cached using WordPress transients for performance, and automatically cleared when synced patterns change. You can also clear a single pattern’s cache from the admin UI.
Full block styling support (core + third‑party)
The plugin loads the styles required to render the synced pattern correctly inside the modal — including WordPress core block styles and supported third-party block styles.
Accessibility-first modal behavior
Includes keyboard navigation (Escape to close, Tab stays within the popup), focus management, and screen-reader friendly UI.
AI-powered TLDR (optional)
Generate AI summaries of the current page content on demand by adding a spp-trigger-tldr trigger. This feature requires the AI Experiments plugin and configured credentials (you’ll see guided setup in the TLDR tab).
Abilities API integration (WordPress 6.9+)
On WordPress 6.9+, the plugin registers Abilities to enable programmatic use cases (e.g., rendering popup content via wp_execute_ability() in custom workflows). If the Abilities API isn’t available, the plugin simply skips this integration.
How It Works
- Create a Synced Pattern in WordPress (Appearance → Synced Patterns)
- Add a trigger to any element:
class="spp-trigger-123"orhref="#spp-trigger-123" - When clicked, the popup opens with your pattern content
- Content loads via AJAX for optimal performance
No Configuration Needed
The plugin works immediately after activation. Simply create a synced pattern, note its ID, and add a trigger to any element on your site.
Tips for Developers
Custom Cache TTL:
Add this to your theme’s functions.php:
add_filter( 'sppopups_cache_ttl', function( $ttl ) { return 6 * HOUR_IN_SECONDS; });
Force Assets on Specific Pages: For dynamic content that loads via AJAX, you can force assets to load:
add_filter( 'sppopups_force_assets', function( $force, $post_id ) { if ( $post_id === 123 ) { return true; } return $force; }, 10, 2 );
Using Abilities API (WordPress 6.9+): Render popup content programmatically:
$result = wp_execute_ability( 'sppopups/render-popup', array( 'pattern_id' => 123 ) );
Hooks Available:
* sppopups_cache_ttl — Filter cache TTL duration
* sppopups_force_assets — Force assets to load on specific posts
* sppopups_pattern_content — Filter pattern content before rendering
* sppopups_modal_output — Filter modal HTML output
Support
For support, feature requests, or bug reports, please visit the plugin’s support page or GitHub repository.