Emberly Popups

Description

Emberly Popups is a lightweight WordPress function that creates accessible, customizable popup modals.

Features include:
– Open automatically after a delay
– Show only once per user with cookie- or session-based control
– Control how often the popup appears using an interval
– Support for shortcodes inside popup content
– Adjustable popup width and padding
– Accessible HTML structure with ARIA roles and attributes

Debugging

Want to know exactly when a popup loads, opens, sets cookies, or locks the scroll?

Use the debug parameter to enable verbose logging for a specific popup. This outputs helpful information to the browser console for troubleshooting purposes.

To enable:

`php

emberly_popup(
title: ‘Example’,
content: ‘

Debugging is on!

‘,
id: ‘debug-popup’,
debug: true // 👈 enable debug mode
);

Usage

Calling a popup:

Popups can only be called via PHP functions. The most ideal scenario is to call them using PHP 8+, which allows you to be specific about which attributes you’re utilizing.

Example using PHP 8+ named arguments:

`php

emberly_popup(
title: ”,
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 in milliseconds
);
`

Example for PHP 7 and earlier (ordered arguments):

`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
);
`

Triggering Popups

You can open popups automatically by using the auto_open parameter.

Want to open with a click? Popups can be opened manually by adding a trigger element anywhere on your page with the em-popup-trigger-id attribute. The value should match the ID you assigned to the popup via the $id parameter in your emberly_popup() call.

Example

`html

Open Welcome Popup

Parameters:

Parameter
Type
Default
Description

$title
string
”
Title text of the popup.

$content
string
”
Content HTML inside the popup.

$id
string
”
Unique ID for the popup.

$width
string
’60rem’
Maximum width of the popup.

$padding
string
‘3rem’
Padding inside the popup.

$echo
bool
true
Echo the popup or return it as a string.

$output_shortcodes
bool
false
Run shortcodes inside the content.

$auto_open
bool
false
Open automatically after a delay.

$delay
int
0
Auto-open delay in milliseconds.

$show_once
bool
false
Only show once per session or cookie, depending on persistence.

$persistence_method
string
‘cookie’
Where to store whether the popup was shown. Options: ‘cookie’ or ‘session’.

$show_interval_ms
int
0
How often (in milliseconds) the popup should show again. 0 disables repeat showing.