Shortcode: Popup Trigger
Article Table of Contents
- Introduction
- When to Use the 'Popup Trigger' Shortcode
- Setting Up the Shortcode
- 'Popup Trigger -- General' Option Settings
- 'Popup Trigger -- Options' Option Settings
- The 'Popup Trigger' Shortcode in the Editor
- 'Popup Trigger' Shortcode Attributes
Introduction
The Popup Trigger shortcode ( tag: [popup_trigger] ) allows users to set a popup trigger inside the content area of a popup, post, or page to display a popup. The shortcode will not work in web page elements outside the editor such as a header, footer, sidebar, or widget area.
The shortcode cannot be used to display the same popup inside itself. In that case, the popup will flash open and then immediately close.
When to Use the 'Popup Trigger' Shortcode
1) Set a trigger on a content element in the post or page editor to display a popup.
This the simplest application of the shortcode. Use it to set a trigger within the post or page editor by targeting one of more of the following elements:
- text,
- paragraph(s),
- link(s),
- button(s),
- image(s), or
- one or more list items.
Inside the 'Popup Trigger -- General' box, the trigger requires at least one published popup to choose from on the 'Targeted Popup' option selection.
2) Set a popup trigger in the popup editor to display a second popup.
This shortcode application applies to the Popup Editor. It allows a plugin user to set a popup trigger inside a published popup to display a second popup when the trigger element is clicked.
For example, let's say you promote a product or service inside a popup. You wish to link visitors to a special offer linked to the content inside the first popup. You intend to display this offer inside a second popup. The popup trigger shortcode allows users to set a trigger in the first popup to display the second popup.
Setting Up the Shortcode
The 'Popup Trigger' shortcode is accessible on the content editor 'Visual' tab from the Popup Maker Shortcode Button. When the 'Popup Trigger' option is selected, a 'Popup Trigger' option settings box will display.
'Popup Trigger -- General' Option Settings
The 'Popup Trigger' option settings box provides users with 2 option tabs; 'General' and 'Options'.
Targeted Popup (required) -- This is the first option setting on the 'General' tab.
In the post/page editor -- select only from published popups. If you have not yet created or set the status of at least one popup on your site to 'published', do that now. Then return to either the post or page editor to continue setting up your popup trigger. Do not select the 'Targeted Popup' -> 'Custom' option when setting a popup trigger in the post or page editor. That option is reserved for working in the Popup Editor only.
In the popup content editor -- you must select a second popup to target with your trigger.
If the only published popup that exists on your site is the one you are currently editing, there must be an option available to target a second popup. The alternative is to declare a second popup by shortcode inside the first popup. In the case of a single, published popup, select the 'Custom' option.
The 'Targeted Popup' option settings list only displays 'Published' popups
The 'Targeted Popup' option only displays popups who's status is set to 'Published'. See:
- 'Popup Maker' ->
- 'All Popups' ->
- 'Quick Edit' ->
- 'Status'
to check the status of your popup(s). To include popups in the 'Targeted Popup' option list, set all popups you wish to choose among to 'Status: Published'.
'Targeted Popups' option setting decision logic
Follow the decision logic below depending on the situation that applies to your site.
1) Only one popup currently exists and is set to 'Published' -- select the 'Custom' option. This will display a custom field below the 'Trigger Content' field labeled 'Custom Popup ID'.
2) Two or more popups exist and are set to 'Published' -- Choose from the published popup (excluding the popup you are currently editing) or the 'custom' option.
Trigger Content (required) -- Copy the content that will be targeted by the shortcode and paste it into this custom field. Accepted content includes:
- text;
- HTML markup,
- images, and
- shortcodes.
Content that is not acceptable includes code wrapped in <script> tags (e.g. jQuery scripts or other JavaScript). These tags are automatically stripped out by WordPress to protect your site from executing malicious code.
Special use case: To add a <script> into a popup from a source such as Google AdSense, wrap the <script> in a WordPress shortcode, and add the shortcode into the Trigger Content field instead.
Related article: Register a Shortcode to Run Editor Scripts
Do not highlight the target content inside the editor, and then open the ‘Popup Trigger’ option box. The highlighted content will not be transferred to the 'Trigger Content' custom field. You must copy the actual content from the editor on which you intend to set a trigger, and paste it into the 'Trigger Content' custom field.
Custom Popup ID -- This custom field displays when the 'Custom' option is selected in the 'Targeted Popup' setting. This is similar to the required 'Popup Name' field shown in the Popup Editor. Select a name that makes sense to you. The name will be assigned to the ID ('id') attribute in the shortcode.
'Popup Trigger -- Options' Option Settings
HMTL Tag (required) -- This text field accepts any HTML element, which will target or wrap the content. The plugin default value is 'button'.
Other acceptable inputs that can be used:
| HTML Tag | Description |
| a | for 'anchor' or link |
| div | for <div> or divider |
| img | for 'image' |
| li | for 'list item' |
| p | for 'paragraph' |
| span | for 'span' |
CSS Class (optional) -- The shortcode allows users to set one or more class attributes that can be used to style the content. Content styling is controlled by the stylesheet in your site's theme.
If the 'HTML Tag' default value of 'button' is accepted above, your site stylesheet will likely style the button according to the values assigned to the 'button' selector.
To override the theme's default styles, assign one or more custom classes to the shortcode, and then target the
.button.{shortcode-defined-css-class}
selector in your stylesheet. In the example above, the value for {shortcode-defined-css-class} is set to 'my-custom-class'. This value is assigned to the 'classes' attribute within the shortcode.
An alternative to adding custom CSS to your theme stylesheet is to use the 'Simple Custom JS and CSS' plugin available in the WordPress.org plugin repository.
Checkbox: 'Do not prevent the default click functionality.' (optional) -- Popup Maker's default setting is to turn 'off' the browser's 'on click' functionality. The default setting is an 'unchecked' checkbox.
When the plugin trigger is added to an existing link (e.g. navigation menu), the plugin prevents that link from opening 'on click'. The Popup Maker trigger displays a popup instead.
Sometimes plugin users do want the browser to work as intended 'on click'. An example might be to display a popup and allow a file download to occur at the same time.
In that case, Popup Maker needs to allow the browser to process the file download. Select this option checkbox to turn 'on' the browser's 'on click' action.
The 'Popup Trigger' Shortcode in the Editor
Using our previous Popup Trigger shortcode settings, here's how the popup shortcode trigger would appear on the 'Visual' tab of the Popup Editor. The shortcode content is 'A Second Popup Trigger'.
Edit the button by hovering the cursor over the button, and select the 'pencil' icon. The 'Popup Settings' box will reopen.
From the above example, here's how the same button would appear on the 'Text' tab of the editor.
Notice the attributes of 'id', 'custom_id', 'tag', and 'classes' within the 'popup_trigger' opening tag. Those are the values passed into the shortcode from the 'Popup Trigger' option settings box. Those attribute values can be edited directly on the editor 'Text' tab.
Here is the popup displayed in the browser with the popup trigger added at the top of the popup as a button. The button styles (background and text color) are rendered by the settings assigned to the 'button' class by the theme stylesheet.
'Popup Trigger' Shortcode Attributes
The table below describes each of the attributes available within the 'Popup Trigger' shortcode.
| Attribute | Usage | Description |
| 'id' | required | A unique name assigned to the second popup. By default, the plugin assigns an integer value to published popups (e.g. '123'). Popups created with the 'custom' option are assigned an ID of 'custom'. |
| 'custom_id' | optional | The popup name added to the 'Custom Popup ID' field. This is only assigned when the 'Custom' option in the 'Targeted Popup' selection field is chosen. |
| 'tag' | required | HTML element tag names. By default, the plugin assigns a value of 'button'. |
| 'classes' | optional | Any additional CSS classes assigned to the HTML 'tag' element above, separated by commas. For example, 'classes="my-custom-class, another-class" ') |
| 'do_default' | optional | This attribute only appears when the checkbox labeled 'Do not prevent the default click functionality.' is selected. By default, the plugin does not add this attribute. It must be enabled. |
Example Applications of the 'Popup Trigger' Attributes
<!--The text wrapped between the opening and closing--> <!--shortcode tags becomes a popup trigger with ID of ‘123’. --> [popup_trigger id="123"]Plain text trigger[/popup_trigger] <!--The text wrapped between the opening and closing --> <!--shortcode tags is wrapped with an HTML <button> element.--> [popup_trigger id="123" tag="button"]Button Text[/popup_trigger] <!--The ‘popup_trigger’ shortcode accepts and processes other registered shortcodes.--> [popup_trigger id="123"][button_shortcode][/popup_trigger] <!--CSS classes can be added to the text wrapped within the shortcode.--> <!--In this example, the text is wrapped with an HTML <button> element--> <!--and assigned a class of ‘button-class’.--> [popup_trigger id="123" tag="button" classes="button-class"]Sign Up for Our Newsletter[/popup_trigger]
Save Your Shortcode and Update Your Popup
Be sure to select the 'Save' button after creating or editing the 'Popup Shortcode' box. And be sure to select the 'Update' button in the 'Publish' box after creating or editing the Popup Trigger shortcode.
The shortcode is added to the popup content stored in the '{prefix}_posts' database table. If you fail to save the changes to your popup, and then move to another popup, post, or page, those changes will be lost.
The 'Popup Trigger' Shortcode in Action (Video)
The following video demonstrates the use of the 'Popup Trigger' shortcode within the Popup Editor. The 'Popup Settings' box interface is from Popup Maker version 1.6+.