Synced Pattern Popups

1. 01Upload the sppopups folder to /wp-content/plugins/ directory
2. 02Activate the plugin through the ‘Plugins’ menu in WordPress
3. 03Go to Appearance → Synced Patterns to manage your popup content
4. 04Create a synced pattern and note its ID
5. 05Add class="spp-trigger-{id}" or href="#spp-trigger-{id}" to any element
6. 06That’s it! Your popup is ready.

How do I trigger a popup?

You can trigger a popup in two ways:

Method 1: Class Name (Recommended for custom HTML) Add the class spp-trigger-{id} to any clickable element, where {id} is the numeric ID of your Synced Pattern.

Example: Open Popup Click Me

Method 2: Href Attribute (Perfect for Block Editor) Set the href attribute to #spp-trigger-{id} on any link element. This is especially useful in the WordPress Block Editor where you can’t easily add custom classes.

Example: Open Popup

Where do I find the pattern ID?

Go to WordPress Admin → Appearance → Synced Patterns. The ID column shows the pattern ID prominently. You can also click the “Copy Trigger” button in the Actions column to copy the complete trigger code.

Can I use multiple popups on one page?

Yes! You can have multiple different popups on the same page – just use different pattern IDs. Mix and match both trigger methods as needed.

Can I customize the modal width?

Yes! Add a width suffix to your trigger: spp-trigger-{id}-{width} where width is in pixels (100-5000px).

Example: Open 800px Modal

What is the TLDR feature?

The TLDR (Too Long; Didn’t Read) feature generates AI-powered summaries of your page content. Simply add class="spp-trigger-tldr" or href="#spp-trigger-tldr" to any element, and when clicked, it will generate a concise summary of the current page.

Requirements: * WordPress AI Experiments plugin must be installed and activated * AI credentials must be configured in Settings → AI Experiments

The TLDR feature can be enabled/configured in Appearance → Synced Patterns → AI TLDR Settings.

Why isn’t my popup opening?

Check these common issues:

1. 01Verify the trigger format : Use exactly spp-trigger-{id} (class) or #spp-trigger-{id} (href) where {id} is numeric
2. 02Check pattern ID : Verify the pattern ID exists in Appearance → Synced Patterns
3. 03Pattern status : Ensure the pattern is published (not draft)
4. 04Sync status : Only synced patterns work – unsynced patterns are excluded
5. 05Toggle Forced On : In your post or page, there’s a setting called “Synced Pattern Popup Support”. Toggle this on if your class or link is output on the page dynamically, like via a form or AJAX.
6. 06Browser console : Check for JavaScript errors in browser developer tools.

Try to answer as many of those questions as you can when submitting a support ticket .

Why isn’t my content loading?

Troubleshooting steps:

1. 07Verify pattern ID : Double-check the ID in Appearance → Synced Patterns
2. 08Check pattern status : Pattern must be published
3. 09Verify sync status : Only synced patterns can be used
4. 10Network tab : Check browser Network tab for AJAX errors
5. 11Clear cache : Try clearing the transient cache (button in admin interface)

Can I use this with page builders?

Yes! The plugin works with most page builders. For dynamically loaded content (like Gravity Forms or AJAX-loaded sections), you may need to enable “Forced On” in the post meta box (Synced Pattern Popup Support) to ensure assets load.

Does this work with caching plugins?

Yes! The plugin uses WordPress transients for caching, which works with all major caching plugins. Cache is automatically invalidated when patterns are updated.

Is this accessible?

Yes! The plugin includes: * Full keyboard navigation (Escape to close, Tab navigation) * Screen reader support with ARIA attributes * Focus management (returns focus to trigger element on close) * High contrast support

Can I customize the modal styles?

Yes! The plugin uses minimal CSS. You can override styles in your theme’s CSS using the same class names. The modal uses these main classes: * .sppopups-modal – Main modal container * .sppopups-overlay – Background overlay * .sppopups-container – Content container * .sppopups-content – Content area

What WordPress version is required?

WordPress 5.8 or higher. The plugin is tested up to WordPress 7.1.

What PHP version is required?

PHP 7.4 or higher.