Popups
This is a versatile, but lightweight plugin that allows you to re-use block designs for different utilities:
Global Popup: Design your Popups in the admin and trigger them with any element (buttons, images, links etc), anywhere on your site.
Local Popup: Design a Popup unique to that page/post/cpt. Trigger it from the same page.
Extend this plugin with:
- New Nav: Replaces the default WordPress mobile menu with a Popup – globally and/or per-page.
- Add an Atty: Add custom attributes to linked elements like images or buttons without needing the HTML block.
Help Docs
Steve’s Popup allows you to create modal popups using shortcodes or Gutenberg blocks. Features include customizable triggers, animations, and responsive design.
You can create global popups in the admin that are available site-wide, or use the block to display a global popup on specific pages/posts only. The latter ensures plugin assets load on those pages without global popups being available everywhere.
Popups can also be used as accessible, SEO-friendly navigation menus on mobile or desktop. See the plugin README.md for details.
- Upload the plugin files to the /wp-content/plugins/steves-popup directory, or install the plugin through the WordPress plugins screen directly.
- Activate the plugin through the ‘Plugins’ screen in WordPress.
- Use the [steves_popup] shortcode or Gutenberg block to add popups to your content.
- Create multiple popups with unique IDs.
- Popup content is fully editable via Gutenberg block.
- Popup triggers can be buttons or links with customizable classes.
- Responsive and accessible popup design compliant with WCAG 2.1 AA standards.
- Keyboard navigation support, focus trapping, and screen reader announcements.
- Easy to use Gutenberg block for popup containers and shortcodes for triggers.
Popup Container Block
Use the “Steve Popup” block in the Gutenberg editor to create a popup container. Set a unique popup ID and add any blocks inside the popup content area.
Showing a Facebook Reel in a popup
Facebook Reels are a native media type. Add the Steve Popup Reel block anywhere inside your popup content and paste the Reel’s Facebook URL (e.g. https://www.facebook.com/reel/1234567890).
- The Facebook player is created only when the popup opens, and removed when it closes, so the Reel stops playing completely.
- Works with any number of Reel blocks, including multiple in the same popup.
- Reels play in a 9:16 portrait player; regular Facebook videos use 16:9.
- The Reel must be Public (or otherwise allow embedding) for the player to load. If Facebook doesn’t offer an “Embed” option for the Reel, it can’t be embedded — Facebook shows “Unavailable” in the player instead.
- Facebook’s iframe embeds do not autoplay (even with an autoplay parameter, which Facebook ignores). The Reel loads paused and the visitor taps the play button to start it. This is a Facebook platform restriction, not a plugin limitation.
- Player size: Reels play in a 9:16 portrait player. Because width is always 9/16 of the height, the player is taller (and wider) on large screens. Automatic sizing uses min(80vh, 720px); override it per Reel with the block’s “Player height (px)” setting (320-900px) or the shortcode’s height parameter.
Shortcode alternative (classic editor, templates, widget blocks):
[steves-popup-reel url="https://www.facebook.com/reel/1234567890"]
[steves-popup-reel url="https://www.facebook.com/reel/1234567890" height="720"]
Example popup with a trigger:
[steves-popup-trigger id="reel-popup"]Watch Reel[/steves-popup-trigger]
[steves-popup-reel url="https://www.facebook.com/reel/1234567890"]
Popup Trigger Shortcode
Use the [steves-popup-trigger id="your-popup-id"]Button Text[/steves-popup-trigger] shortcode to create a button or link that triggers the popup with the matching ID.
Example:
[steves-popup-trigger id="contact-popup"]Contact Us[/steves-popup-trigger]
Global popups can be triggered from anywhere, but especially useful in blocks like headers, footers, navs, etc.
One-time popups are good when you just want to use it on a page or two.
Create a global popup:
Choose “Add Global Popup” from the admin dashboard or the top toolbar.
Set a unique Popup ID (e.g., “cool-popup”).
Add content inside the block (text, images, etc.) and save your design as you normally would.*
Your popup will be assigned the given ID and a slug upon saving. You may use either when creating the trigger.
Create a 1-time popup: – The popup block and trigger must be on the same page.
Add the “Steve Pop-Up” block to any page, post or cpt. While it doesn’t effect your layout, I suggest adding it towards the bottom just for order and tidyness in your content editor.
In the block’s settings (on the right), set a unique Popup ID (e.g., “cool-popup”).
Add your content inside the block (text, images, etc.) and save your page.*
*The modal will expand downward with larger amounts of content and the scrolling will appear in the main viewport so it stays swipable.
Using Global Popup in Block
If you want to display a global popup on a specific page/post without it being available site-wide, you can use the “Steve Popup” block with the “Use global popup” option enabled in the block settings. This renders the global popup’s content on that page only, and ensures the plugin’s assets (JS/CSS) are loaded on that page even if no global popups are set to load globally.
In the block’s settings, check “Use global popup” and set the “Global Popup ID” to the slug of the global popup you created in the admin (under “Global Popups”).
This is useful if you have no global popups defined (to avoid loading assets site-wide), but want to use global content on select pages.
Using the Built-in Trigger Shortcode:
My plugin provides a shortcode that creates a theme default button to open a specific popup. Use it like this: [steves-popup-trigger id="cool-popup"]Open my cool popup[/steves-popup-trigger]
Obviously, you’ll replace “cool-popup” with the ID you gave your own cool popup when you created it. (You can use the ID number or slug.) This outputs an element with the class steves-popup-trigger and data-popup-id attribute, which the plugin’s JavaScript uses to show the popup on click.
Trigger with elements
You can manually add the trigger class and data attribute to buttons, text, images, or other html elements. The plugin’s JavaScript listens for clicks on the elements with the class .steves-popup-trigger and uses the data-popup-id to identify which popup to open.
- Button: <button class="steves-popup-trigger" data-popup-id="your-popup-id">Open Popup</button>
- Text Link: <a href="#" class="steves-popup-trigger" data-popup-id="your-popup-id">Click here to open popup</a>
- Image: <img src="your-image.jpg" alt="Trigger" class="steves-popup-trigger" data-popup-id="your-popup-id" style="cursor: pointer;">
- Any Element (div, span, etc): <div class="steves-popup-trigger" data-popup-id="your-popup-id">Custom trigger text or content</div>
• The data-popup-id matches the ID of the popup container (from the [popup id="…"] shortcode, block, or global popup slug).
• Popups close via the close button, clicking the overlay, or pressing ESC.
If you need to integrate this into a theme file or page, add the HTML directly in your content or template. For global popups, create them in the WordPress admin under “Global Popups” and use their slug or ID for the trigger.
Tasks Completed
- [x] Test (green when checked)
Tasks To Do
- [ ] Test (red when not completed)
Changelog
1.4.1
- New: Configurable Reel player size — “Player height (px)” setting on the Steve Popup Reel block, or height on the [steves-popup-reel] shortcode (320-900px). Default raised to min(80vh, 720px) so portrait Reels render bigger.
1.4.0
- New: Facebook Reels as a native media type (Steve Popup Reel block + [steves-popup-reel] shortcode)
- Reel player loads only when the popup opens and stops when the popup closes
- Existing YouTube/Vimeo handling and popup markup untouched
1.2.1
- Fixed video loading issues in popups
- Added accessibility improvements (ARIA, screen reader support)
- Updated button styles to use theme.json definitions
License
GPL v2 or later
Tested up to
6.6
Stable tag
- = 1.4.1 =
- * New: Configurable Reel player size. The "Steve Popup Reel" block has a "Player height (px)" setting, and the shortcode accepts height="320-900". The default player size increased to min(80vh, 720px) so portrait Reels display larger.
- = 1.4.0 =
- * New: Facebook Reels as a native media type. Add the "Steve Popup Reel" block (or ) inside any popup; the Reel loads only when the popup opens and stops when it closes.
- * New: YouTube/Vimeo behavior and existing popup markup untouched.
- = 1.2.3 =
- * Improved: Enhanced conditional enqueue logic for better performance on pages with multiple popup types
- * Fixed: Minor CSS improvements for popup modal positioning
