Emberly Digital

Emberly Popups is a simple PHP function that generates ARIA‑compliant modal popups. Great for newsletters, surveys, announcements, or any call‑to‑action:
<ul>
<li>Auto‑open after a configurable delay </li>
<li>Cookie‑ or session‑based “show once” control </li>
<li>Repeat interval (milliseconds) between popups </li>
<li>Shortcode support inside popup content </li>
<li>Adjustable width and padding </li>
<li>Accessible markup with proper ARIA roles</li>
</ul>
<h3>Usage</h3>
<h3>PHP 8+ (named arguments)</h3>
“`php 
emberly_popup( 
 title : ‘Welcome!’, 
 content : ‘
Thanks for visiting our site. Don’t miss our latest offers!
‘, 
 id : ‘welcome-popup’, 
 width : ’50rem’, 
 padding : ‘3rem’, 
 echo : true, 
 output_shortcodes: true, 
 auto_open : true, 
 delay : 2000, 
 show_once : false, 
 persistence_method: ‘session’, 
 show_interval_ms : 1800000 // 30 minutes 
); 
 <code><h3>PHP 7 & earlier (ordered arguments)</h3>```php 
emberly_popup( 
 '', // $title 
 'Thanks for visiting our site. Don't miss our latest offers!', 
 'category-survey-popup', // $id 
 '50rem', // $width 
 '3rem', // $padding 
 true, // $echo 
 true, // $output_shortcodes 
 true, // $auto_open 
 2000, // $delay 
 false, // $show_once 
 'session', // $persistence_method 
 1800000 // $show_interval_ms 
);</code>
<h3>Manual triggers</h3>
Anywhere in your markup, add: 
 <code>html 
<a href="#" em-popup-trigger-id="welcome-popup">Open Welcome Popup</a></code> 
The <code>em-popup-trigger-id</code> value must match the <code>$id</code> you set in <code>emberly_popup()</code>.
<h3>Parameters</h3>
 Parameter 
 Type 
 Default 
 Description
 title 
 string 
 ” 
 Popup heading text.
 content 
 string 
 ” 
 HTML for the popup’s body.
 id 
 string 
 ” 
 Unique popup identifier (required for cookies/sessions & triggers).
 width 
 string 
 ’60rem’ 
 CSS max-width for the popup container.
 padding 
 string 
 ‘3rem’ 
 Inner padding inside the popup.
 echo 
 bool 
 true 
 Echo the markup immediately (false to return as string).
 output_shortcodes 
 bool 
 false 
 Process WordPress shortcodes in <code>content</code>.
 auto_open 
 bool 
 false 
 Automatically open after <code>delay</code> ms.
 delay 
 int 
 0 
 Milliseconds to wait before auto-open.
 show_once 
 bool 
 false 
 If true, shows only once per session/cookie period.
 persistence_method 
 string 
 ‘cookie’ 
 Where to store “shown” flag: ‘cookie’ or ‘session’.
 show_interval_ms 
 int 
 0 
 Minimum interval (ms) before showing again. 0 disables repeats.
 debug 
 bool 
 false 
 Log internal events to browser console (load, open, cookies, scroll lock).
<h3>Debugging</h3>
Add <code>debug: true</code> (PHP 8+) or append <code>true</code> as the 13th argument (PHP 7) to enable console logging:
<pre><code>`php
</code></pre>
// PHP 8+ example 
emberly_popup( 
 title : ‘Debug Popup’, 
 content: ‘
Debugging is on!
‘, 
 id : ‘debug-popup’, 
 debug : true 
); 
 `

Emberly Popups

Lightweight, accessible popups for WordPress—made by developers, for developers.

Matt Martz

Shadowbox is an online media viewing application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating users away from the linking page.
This plugin uses <a href="http://www.shadowbox-js.com/" rel="nofollow ugc">Shadowbox</a> written by <a href="http://mjijackson.com" rel="nofollow ugc">Michael J. I. Jackson</a>.
Javascript libraries supported are: None, YUI, Prototype, jQuery and MooTools. Prototype and jQuery are used from the Javascript libraries included with WordPress, YUI is loaded from Yahoo APIs and Mootools is loaded from Google APIs.
This plugin can also be used as a drop in lightbox replacement, without requiring you to edit posts already using lightbox.
By default this plugin will use Shadowbox for all image links, movie links, audio links and YouTube/Google Video links including those generated by the [gallery] shortcode.
Shadowbox is licensed under the terms of the <a href="http://shadowbox-js.com/LICENSE" rel="nofollow ugc">Shadowbox.js License</a>. This license grants personal, non-commercial users the right to use Shadowbox without paying a fee. It also provides an option for users who wish to use Shadowbox for commercial purposes. You are encouraged to review the terms of the license before using Shadowbox. If you would like to use Shadowbox for commercial purposes, you can purchase a license from <a href="http://www.shadowbox-js.com/" rel="nofollow ugc">http://www.shadowbox-js.com/</a>.
This plugin also makes use of the <a href="http://www.longtailvideo.com/players/jw-flv-player/" rel="nofollow ugc">JW FLV Player</a>. JW FLV Player is licensed under the terms of the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow ugc">Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License</a>. If you would like to use JW FLV Player for commercial purposes, you can purchase a license from <a href="https://www.longtailvideo.com/players/order2" rel="nofollow ugc">https://www.longtailvideo.com/players/order2</a>.
Neither Shadowbox nor the JW FLV Player are actually included in this plugin. The plugin will ask you to download these files after installation and activation.
Please use the Shadowbox JS <a href="https://wordpress.org/tags/shadowbox-js" rel="ugc">support forum</a> for problems or questions with this plugin. Support questions will be ignored if left as comments on my site, through my contact form or by email. The only supported location for support questions is <a href="https://wordpress.org/tags/shadowbox-js" rel="ugc">https://wordpress.org/tags/shadowbox-js</a>.
This plugin is absolutely not supported when used in combination with the Thesis theme. Please do not ask for support if you are using such a configuration.
<h3>Upgrade</h3>
<ol>
<li>Use the plugin updater in WordPress or…</li>
<li>Deactivate the Shadowbox JS plugin</li>
<li>Delete the previous <code>shadowbox-js</code> folder from the <code>/wp-content/plugins/</code> directory</li>
<li>Upload the new <code>shadowbox-js</code> folder to the <code>/wp-content/plugins/</code> directory</li>
<li>Activate the Shadowbox JS plugin</li>
<li>Visit the settings page in the WordPress admin at <code>Settings -> Shadowbox JS</code> and install the required dependencies if needed</li>
</ol>
<h3>Usage</h3>
<ol>
<li>By default this plugin will add the activator attribute to all image links, movie links, audio links and YouTube/Google Video links that do not already have the activator attribute. Meaning basically, by default all images in the posts on your site will automatically be displayed using Shadowbox. </li>
</ol>
<h4>If you want more fine grain control over the links continue with the next steps. If not then stop here.</h4>
1. Create a link in your post in the following format (This link can be to pretty much anything including websites, video files, YouTube, Google Video and inline content):
<pre><code>&lt;a href="http://domain.tld/directory/to/image.jpg" rel="shadowbox[album]"&gt;Image&lt;/a&gt;
</code></pre>
2. Be sure to include <code>rel="shadowbox"</code> as this activates the plugin. 
3. If <code>rel="shadowbox[album]"</code> is included the portion listed here as <code>[album]</code> will group multiple pictures into an album called album. Do not use <code>[gallery]</code> to define an album as WordPress has a shortcode that will interfere. 
4. If you are using this as a lightbox replacement you do not need to change <code>rel="lightbox"</code> to <code>rel="shadowbox"</code>. Shadowbox.js supports <code>rel="lightbox"</code> natively. 
5. If you want to make a gallery/album and only want one link to display you can use <code>class="hidden"</code> to hide the additional links. 
6. See <a href="http://shadowbox-js.com/doc/usage.html#markup" rel="nofollow ugc">http://shadowbox-js.com/doc/usage.html#markup</a> for detailed markup instructions. 
7. If you are using using Shadowbox globally for all images but have an image you do not wish to use Shadowbox on use <code>rel="nobox"</code> in your image link.

Shadowbox JS

Shadowbox is an online media vieiwing application similar to Lightbox and Thickbox but with more functionality. Supports all types of media.

Emberly Popups vs Shadowbox JS