Remote Content -- Shortcode: Remote Content Area

Article Contents

Overview

The Remote Content (RC) plugin extension registers a shortcode with WordPress ( tag: [pum_remote_content] ) to set the plugin options. The shortcode contains an opening and closing tag ( [pum_remote_content][/pum_remote_content] ) that encloses the targeted remote content in the Popup Editor.

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.  Shortcode attributes can also be viewed directly on the Editor 'Text' tab to inspect, add, edit, or delete settings.

[ Back to top ]

The Remote Content Shortcode 

Add Shortcode

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

2)  Navigate to the Popup Maker shortcode button in the Editor menu ('Visual Tab'). Select the button to display a menu of Popup Maker shortcode options.
3)  Select the 'Remote Content Area' option.
4)  A popup option settings box labeled 'Remote Content Area' will display in front of the Editor.  

Edit Shortcode

  • In the Editor ('Visual Tab'), select the button labeled 'Dynamic/remote content area'. 
  • Select the 'pencil' icon to reopen the Remote Content Area box for editing. 
  • In the 'Remote Content Area' box, select the 'Save' button to preserve changes to the shortcode.
  • In the 'Publish' box (to the right of the Editor), select 'Update' to save changes to the popup.

Delete Shortcode

  • In the Editor ('Visual Tab'), select the button labeled 'Dynamic/remote content area'. 
  • Select the 'X' icon to remove the shortcode. 
  • In the 'Publish' box (to the right of the Editor), select 'Update' to save changes to the popup.

[ Back to top ]

Set Shortcode in the 'Remote Content Area' Box

'General' option settings tab

Select a Remote Content Load Method

Users can choose from 4 separate 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.-->

<!--Plugin default: 'load' ( 'Load from URL' menu option ).-->

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

[ Back to top ]

Load Method: '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 left 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]

[ Back to top ]

Load Method: '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 are needed for it to properly display. 

Default IFrame URL -- Users unable to set an external URL on a front-end link can use this field instead to display the external URL inside their popup.  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]

[ Back to top ]

Load Method: '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) into 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'.-->  
<!--Default value for attribute is "post".-->  
[pum_remote_content method="posts" posts_post_type="post |  attachment | popup"]{content}[/pum_remote_content]

[ Back to top ]

Load Method: '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]

[ Back to top ]

Select Icon Animation Style

Users may 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

Users 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): 

<!--The icon animation displayed while content loads into a popoup.-->

<!--Plugin default: loading_icon="lukehass/load1"; ( 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]

[ Back to top ]

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. Users 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.  

<!--Plugin default: 200px-->
[pum_remote_content min_height="200" ][/pum_remote_content]

[ Back to top ]

More Resources

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

[ Back to top ]

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.