WP Post Popup

Description

Turn any page or post into a popup instantly! Add a link anywhere, with a simple change, and the page or post (or any other post type) becomes a popup window. You can also have external web pages show in the popup as well.

Just the content of the page or post will show, the part you put into the editor when creating the page or post. No headers, footers, nor sidebars. Perfect for showing the Website Policy, or making an FAQ, etc., anywhere you need a user triggered popup window.

How simple is it? First, add a link to the page you want to show into your post (or page or widget or …) and it will look like this in the text editor:

<a href="http://my-site.com/privacy-policy/>Our Privacy Policy</a>

Next, edit that link in the text editor by adding class=”modal-link” into the link to make this:

<a class="modal-link" href="http://my-site.com/privacy-policy/>Our Privacy Policy</a>

Or use our new Visual Editor button to quickly and easily insert the link!

CLICK FOR DEMO

Contact us for feedback and bug reports

Screenshots

  • How the modal looks with simple text page content
  • Style the popup within the WP Customizer
  • Available plugin settings
  • Easily insert popup link with custom button in Visual Editor

Installation

  1. Upload wp-post-modal.zip to the /wp-content/plugins/ directory and extract
  2. Activate the plugin through the “Plugins” menu in WordPress
  3. Add the class modal-link to open the href of that link into a modal window.
  4. If you want to show an external page in the modal, add the attribute data-div="#id" to your .modal-link where the id is the container on the target external page that you would like to display inside the modal
  5. A page can have multiple modal links

FAQ

Installation Instructions
  1. Upload wp-post-modal.zip to the /wp-content/plugins/ directory and extract
  2. Activate the plugin through the “Plugins” menu in WordPress
  3. Add the class modal-link to open the href of that link into a modal window.
  4. If you want to show an external page in the modal, add the attribute data-div="#id" to your .modal-link where the id is the container on the target external page that you would like to display inside the modal
  5. A page can have multiple modal links
What does this NOT do?

These popups are not for getting the user’s attention nor having them sign up for access, etc. These are to give the user additional information without leaving the page or site.

What are the advantages of this popup?

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.

Will these Popups be blocked by an Ad Blocker

They will not because these aren’t “popups” in the sense of an add. The way this works is by creating a modal window which is a just a website block that is hidden until a click or some other action makes it visible.

Where does the content of the popup come from?

The content can come from any web page. If it is from a post or page (or any post-type) from your site, it will be the content that is in the editor in the back-end. In other words, the popup will not show your header, footer, nor sidebars. Just the primary content. If it is from another website, it will typically be the core or main content on that page.

You simply make a page or post with the content you want, as you always do.

What is the legacy method?

The plugin by default uses the WordPress REST API to pull content for pages. There are two scenarios where you might want to use the legacy method:

  1. If the REST API method is not working
  2. If you want to include custom fields or other custom content inside the popup
How do I include custom fields or content outside `the_content()` function?

In your custom template file you would wrap all of the content / custom fields/ etc. you would like with a div that has the #modal-ready ID.

How is the popup triggered?

With a slightly modified link to the page or post. The user must actively click on the link for the popup to show.
If you link to your privacy policy with a link like this:
<a href=”http://my-site.com/privacy-policy/>Our Privacy Policy

Then edit that link in the text editor by adding class=”modal-link” into the link to make this:
<a class=”modal-link” href=”http://my-site.com/privacy-policy/>Our Privacy Policy

If the link goes to a page on an external site, 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. It also needs the class=”modal-link” as well. <a class="modal-link" href="https://en.wikipedia.org/wiki/Apple" data-div="bodyContent">What is an apple?</a>

Can I change the look of trigger link?

Absolutely, any way you want. You can turn it into a button like this: <a class="modal-link" href="http://my-site/privacy-policy/"><button type="button">Our Privacy Policy</button></a> or make it an image.

How do I change the look of the popup it self? What settings are available?

You can change the look of the popup with CSS. When the plugin is installed, basic CSS is installed. The 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.

Can I have multiple popups on one page?

Yes, you can have as many as you like.

Reviews

Perfect

Exactly what I have been looking for. Easy to use, fast, etc. Thank you!

Read all 4 reviews

Contributors & Developers

“WP Post Popup” is open source software. The following people have contributed to this plugin.

Contributors

Translate “WP Post Popup” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.0: Initial release
1.4: Add color overlay
1.4.1: Bug fix
1.4.2: Add click outside modal functionality
2.0: Version 2.0 contains new plugin settings, insert popup button in Visual Editor, refactored to using WP Rest API, and more!
2.0.1: AJAX method for loading external content
2.0.2: Minor styling fixes
2.0.3: Bug fix for if visual composer installed active
2.0.4: Works with all custom post types
2.0.5: Fix link when only slug is used
2.1: Add legacy method with fallback, admin notices, remote notice, added support for buddypress profiles
2.1.1: Update remote admin notice functionality
2.1.2: Close popup with esc key