Remote Content — Shortcode: Remote Content Area

Overview #

The Remote Content (RC) plugin extension gives you a shortcode so you can customize how you want to load your remote content.

[pum_remote_content][/pum_remote_content]

On the front end, Popup Maker’s RC extension replaces that shortcode with the remote content you set up inside the shortcode.

The plugin uses the Popup Editor shortcode button on the Visual tab to set the shortcode. 

The option settings box provides an easy way to edit or update the shortcode attributes. We’ll cover that in a bit.  

You can also see and manually edit shortcode attributes directly in the editor Text tab.

---

If you’re new to Remote Content popups, read our A Beginner’s Guide to Remote Content Popups!

The Remote Content Shortcode  #

Add Shortcode #

1)  From the WordPress Admin, open the Popup Editor by clicking Add New or clicking an existing popup from the All Popups page. 

2) Navigate to the Popup Maker shortcode button in the Editor menu Visual tab. Click the Popup Maker dropdown to display a menu of Popup Maker shortcode options.

3) Click Remote Content Area.

Edit Shortcode #

• In the Editor Visual tab, click Dynamic/remote content area. 
• Click the pencil icon to reopen the Remote Content Area settings for editing. 
• In the Remote Content Area settings, click Save to save your changes to the shortcode.
• Click Publish or Update to save changes to the popup.

Delete Shortcode #

• In the Editor Visual tab, click Dynamic/remote content area. 
• Click the X icon to remove the shortcode. 
• Click Publish or Update to save changes to the popup.

---

Remote Content Area Settings #

General settings #

Select a Remote Content Load Method #

You can choose from 4 content load methods. The simplest methods to use are Load from URL for internal RC, and IFrame for external RC. Each of the methods described in the following table loads content into a popup when a Click Open trigger fires. 

Load Method	Application	Description
Load from URL	Internal RC	This method loads a page link into a popup from the same top-level URL as the popup. Use it to load an entire, or part of a page or post into a popup.
Post Type Content	Internal RC	This method loads the content based on the post type registered to WordPress (for example: Posts, Media (attachments), or Popups).
iFrame	External RC	This method loads a page link into a popup from a URL different from the top-level URL of the popup. It loads an entire page or post into the popup.
AJAX	Internal RC	This method loads content using JavaScript/jQuery and a custom PHP function that passes data dynamically to variables added to the popup container.

Shortcode attributes (visible from the editor ‘Text’ tab):

Load method attributes for the remote content shortcode.

The default is “load” (i.e., Load from URL).

[pum_remote_content method="load | iframe | posts | ajax" ]
{content}[/pum_remote_content]

Load From URL #

Use this method to load a URL link into a popup from a source of internal remote content. This method can return either the entire URL or a targeted section within a URL. The latter approach is useful for displaying a smaller portion of the entire remote content source. If the Content CSS Selector field is blank, the entire URL will display within the popup container. 

Use the  Content CSS Selector field to target a section of a post or page within the link URL. Identify the HTML element and/or attribute(s) that contains the target section and add them to the ‘Content CSS Selector’ field. When the link is clicked, the popup will display the targeted section. 

Related article:  Setting Up a Remote Content Popup

Shortcode attributes (visible from the editor Text tab):

Select method=”load” to enable the attribute load_css_selector.

Use the ‘load’ method only with RC internal to a site URL.

[pum_remote_content method="load"
load_css_selector="{css_selector(s)}" ][/pum_remote_content]

IFrame #

Use this method to load a full-page URL into a popup from an external remote content source. This approach is also necessary when RC includes hidden styles and scripts in the header of a page template that is needed for it to display properly. 

Default IFrame URL: You can override the default external link click on the front-end link with this field to display your remote content. Popups can be displayed by this method with a Time Delay / Auto Open trigger.

Shortcode attributes (visible from the editor Text tab):

Select method=”iframe” to enable the attribute iframe_default_source’.

Use this method with RC external to a site URL.

Add a URL to the iframe_default_source attribute when unable to set a link that appears on the front end.

[pum_remote_content
iframe_default_source="{http(s)://{remote-source-url} }" ]
[/pum_remote_content]

Post Type Content #

At this time,  please consult with the plugin developer for assistance in using this load method until additional documentation becomes available.

Note: This is an experimental RC load method introduced in plugin version 1.1.0. It displays links to a specific post type (for example, posts, attachments (Media), and popups) in an AJAX popup. 

The method should be used together with a Click Open trigger. When setting the trigger, set a post type to match the post type set in the Remote Content Area box.

In the Remote Content Area box, the Content Template custom field will accept an HTML-based template using plugin template tags, including:

• {pum_rc_post_id};
• {pum_rc_post_title}; and 
• {pum_rc_post_content}

HTML elements and attributes that are accepted in the Content Template field include:

Table 1. HTML Elements & Attributes Allowed in the Content Template Field.

HTML Element	HTML Attribute
<a>	id
	class
	href
	title
</br>
<em></em>
<strong><strong>
<div></div>	id
	class
<p></p>	id
	class

Shortcode attributes (visible from the editor Text tab):

Select method=”posts” to enable the attribute posts_post_type.

The default is “post”.

[pum_remote_content method="posts" posts_post_type="post |  attachment | popup"]{content}[/pum_remote_content]

AJAX #

Function Name ( text field ) — When using the AJAX load method, specify the name of a callable PHP function or method that will contain the variables to dynamically pass content into the popup container.  Do not add the opening and closing parentheses [ ( ) ] after the function or method name. View the following related article for details on using this approach.

Related article:  Remote Content AJAX Type Introduction

Shortcode attributes (visible from the editor ‘Text’ tab):

Select method=”ajax” to enable the attribute ajax_function_name.

Enter the function or method name only.

For example: ‘my_custom_function’ or ‘method_name’.

Do not enter: ‘my_custom_function()’ or ‘method_name()’.

[pum_remote_content method="ajax" ajax_function_name="{function_or_method_name_only}" ][/pum_remote_content]

---

Select Icon Animation Style #

You can select from a menu of 8 different icon animations to display in the popup while the plugin loads the remote content. 

1. Lines: Growing;
2. Dots: Growing;
3. Circles: Streaking;
4. Circles: Chasing Tail;
5. Circles: Dots Chasing;
6. Circles: Dots Fading;
7. Circles: Dots Streaking;
8. Circles: Racetrack;

Set Custom Icon Animations #

You can save up to 3 separate custom icon animations using either HTML, CSS or a combination of both. When the Remote Content plugin is activated, a ‘Remote Content’ category option page becomes available to accept HTML and CSS for custom icon animations. From the WordPress Admin, go to: 

• ‘Popup Maker’ >> 
• ‘Settings’ >> 
• ‘Extensions (tab)’ >>
• ‘Remote Content (category)’

to enter code for the custom icons.

Once the code is saved on the option settings page, select the custom icon from the ‘Loading Icon Style’ menu. 

Recommendations for Custom Icon Animations #

Props to  Yangshun Tay for maintaining “a curated collection of dazzling web spinners.” The repository is maintained on GitHub and refers to other repositories where custom icon animations are available for free. 

Shortcode attributes (visible from the editor ‘Text’ tab):

This is the icon animation you’ll see while content loads into a popup.

The default is loading_icon=”lukehass/load1″ which is Lines: Growing.

[pum_remote_content loading_icon=
"lukehass/load1" ('Lines: Growing') |
"lukehass/load2" ('Dots: Growing' ) |
"lukehass/load3" ('Circles: Streaking') |
"lukehass/load4" ('Circles: Chasing Tail') |
"lukehass/load5" ('Circles: Dots Chasing' ) |
"lukehass/load6" ('Circles: Dots Fading') |
"lukehass/load7" ('Circles: Dots Streaking') |
"lukehass/load8" ('Circles: Racetrack') |
"custom_1" ('Custom #1') |
"custom_2" ('Custom #2') |
"custom_3" ('Custom #3') ][/pum_remote_content]

---

Set the Minimum Height Display in the Popup #

By default, the plugin sets the minimum height of the remote content loaded into the popup at 200 pixels (px), and a maximum height of 300px. You can change the container height in any of the following ways:

1) Increase the height by moving the rangeslider to the right, or decrease it by moving the rangeslider left. The maximum allowable value is preset to 300 px. 

2) Enter a different numerical value in the ‘minimum height’ input field. If the value exceeds the default maximum of 300px, the rangefinder and the maximum height will both reset accordingly. 

3) Incrementally increase or decrease the default minimum height by clicking on the minus ( – ) or plus ( + ) buttons.  

A vertical scroll bar will appear inside the popup container if the content height is greater than the popup height. 

The default is 200px.

[pum_remote_content min_height="200" ][/pum_remote_content]

---

More Resources #

For a guide on how to set up your Remote Content Popup or Usage Examples, check the related docs below: 

• Remote Content — Plugin Installation and Activation
• A Beginner’s Guide to Remote Content Popups
• Remote Content — AJAX Type Introduction
• Remote Content — Create an Image Gallery Popup