Documentation

Support

Since this is a free and open source plugin, we cannot offer free support. Unfortunately, there’s just not enough time. If you’d like to purchase 6 months of plugin support for $80, you can do so here.

What are the advantages of this popup plugin?

If your user needs additional information you will now be able to popup a window with that information. If the information is on a page or post within your site, you can have that popup with about 30 seconds worth of work. Information on an external site may take a minute or two longer to implement.

Most importantly, your user will not be taken to another page, on or off your site. The information will load quicker into the popup than going to the page itself.

How to trigger a popup?

• • Add a modal-link class to your link
  • Use the “modal-link” URL parameter
    • Example: https://wp-post-modal.allureprojects.com/?modal-link=https://wp-post-modal.allureprojects.com/modal-content
  • For external links, you need to find a container that has the content you want and a suitable ID. Once you know that, you need to add data-div=”xx” to the link, where xx is the ID of content container.
    • Example: <a class="modal-link" href="https://en.wikipedia.org/wiki/Apple" data-div="bodyContent">What is an apple?</a>
  • Using the iFrame method is most reliable for external links (also can be used on internal links as well), but it will load the entire page. This is useful for pages with more complicated functionality.
    • You can either add “iframe” to your modal-link classes or enable the iFrame method globally in the plugin settings

Using Anchor Links

Simply add the anchor to the end of your internal page URL

External Links

External links with a specific div are not always reliably linked because of a variety of issues including CORS issues or content and styles not being pulled in as expected. Use the iFrame method mentioned above if pulling in the full external page is an option.

This functionality is more for proof of concept or fun than to actually be useful in a production environment.

Modify Wrapping Div ID

If you want your wrapping div to be something other than modal-ready, you can use the following filter to change it (or even remove it).

add_filter( 'define_wrapping_div_id', 'modify_wrapping_div' );

function modify_wrapping_div() {
	return 'another-id';
}

Plugin Settings

You can change the look of the popup with CSS. The plugin does come with some basic styling that you can toggle in the plugin settings. The plugin options page (Settings -> WP Post Popup) has several options.

The first is what symbol to use for the ‘close button.’ By default, the “×” character is used. You can change this to any character you like, or even to the word “close” or a blank space.

There is also what we call a “breakpoint” value, this is the smallest number of pixels in width you want the popup. If the screen the user is using is smaller than this number, instead of a popup, the user will be taken to the link target itself. The default is 768, so by default, a smartphone and most tablets will not show a popup, it will go to the link. You can put any value in this location, including zero.

Next, you have the option to have the popup ignore the basic CSS that comes with the plugin. There is a link to show you what this CSS is. Note that you can use the Customizer (Appearance -> Customize -> Additional CSS) to modify the basic css, or to have a complete replacement.

The next option is to automatically update the URL in the address bar to that of the page you are popping up.

Next, you have the option to disable the Visual Editor button.

Next, you have the option to use the REST API to load the popup instead of the default method. This should only be enabled if you aren’t using custom template for loading custom fields into the popups. It’s useful to make the popups load faster. Alternatively, add the “rest” class to the “modal-link” to use the rest method on a case by case basis.

Lastly, you can enable the iFrame method globally on all external links. With this option enabled, you would not need to add the “iframe” class to external links in order to use the iFrame method.

Debugging

To test that you have the correct slug, you can use the following WordPress REST API route to see if any content is returned. /wp-json/wp-post-modal/v1/any-post-type?slug=[POST SLUG HERE]

For example: https://wp-post-modal.allureprojects.com/wp-json/wp-post-modal/v1/any-post-type?slug=modal-content