Getting Started with Synced Pattern Popups

Synced Pattern Popups helps you create popups using the WordPress editor you already know, not yet another builder.

Your popup is simply a synced pattern, and the trigger is a link or class name. No shortcodes, no configuration screens, and nothing extra to manage. In this guide, you’ll create a popup, connect it to a trigger, and see it working on the frontend. Once you’ve done it once, the rest falls into place.

What You’ll Need

• WordPress 5.8 or newer
• The Synced Pattern Popups plugin activated
• (Optionally) The AI Experiments plugin by Automattic (the people who built WordPress). This plugin is required for the TLDR feature

That’s it. Activate the plugin and you can start creating popups right away.

Step 1: Create the Content for Your popup

Start by creating the content you want to show in the modal.

1. in your WordPress admin area go to Appearance → Synced Patterns
2. Click Add New
3. Give the pattern a clear name that defines what it’s for. Example: "Terms of Service Popup". While you're there, ensure that the "Synced Pattern" toggle is set to "on" (it should be by default)
4. Build the content of your popup using the Block Editor.
5. Click Save

Once it’s saved, go back to the Synced Patterns list and click on the Clipboard icon next to the Trigger code to copy it. You’ll use that in the next step. Note: Most blocks work as expected. Some dynamic blocks or forms may require forcing assets on the page. Look for the ‘Synced Pattern Popup Support’ meta box on the post/page and enable Forced On.

Step 2: Add a Trigger Where You Want the popup

Now you’re just telling WordPress when to open that pattern. There are two ways to do this.

Option 1: Use a link (the easiest way) This works especially well with Button blocks and linkable text. In your page or post, set the link URL to: #spp-trigger-123

Replace 123 with your actual pattern ID, like in this example: Button text: “Read our privacy policy” Link URL: #spp-trigger-123 That’s all you need.

Option 2: Use a CSS class This is helpful if you’re working with custom HTML or need more control. Open Popup Again, just replace 123 with your pattern ID. You can use multiple different popups on the same page, each with its own pattern ID.

Step 3: Click It and See What Happens

Visit the page on the frontend and click your trigger. If everything is wired up correctly: The modal opens Your synced pattern content loads inside it The rest of the page stays right where it is Behind the scenes, the content is loaded only when needed and cached for performance. The modal handles focus management, keyboard navigation, and screen reader behavior automatically.

Optional: Set the Popup Width The popups are 600px wide by default. If you want a wider (or narrower) modal, you can do that right in the trigger. To set a custom width of your modal you’ll need to update the trigger code. Just append the width you want in pixels to the end of the trigger like this:: spp-trigger-123-800 That sets the modal width to 800px. You can see this in the example: View Details No extra CSS required.

Troubleshooting

If the popup doesn’t open right away, check these first:

• Make sure you created a synced pattern, not a regular pattern
• Double-check the pattern ID
• Confirm the page is published (not a draft)
• Try a hard refresh or a private/incognito window
• If your trigger lives in a navigation menu or dynamically loaded section, you may need to force popup assets to load for that page.

Most issues come down to a typo or the wrong ID.

Conclusion

You’ve seen the full loop: create a synced pattern, add a trigger, and let WordPress do the rest. From here, you can reuse the same popup across your site, swap out the content without touching your pages, or layer popups into more complex layouts as needed. After this first setup, adding or updating popups becomes a matter of editing content.