How To Add Popups To WordPress (Popup Anything)

Popups can add lots of functionality to your site. A very common use case is to provide higher resolution images of a thumbnail when the thumbnail is clicked on (such as for a web store product listing).

This guide will display the process using the Popup Anything plugin, and it assumes you already have it installed. If Popup Anything is not installed. Start by adding the plugin to your WordPress.

Navigate to Popup Anything from the navigation bar on the left side of the window. Then click “Add Popup”.

Add a title for your popup. The “Behaviour” tab lets us set features about how the pop up will act. Though the premium plugin offers many more features, basic covers many use cases. Scroll down to set features like how the popup will appear.

Further down on the “Behaviour” tab we can set features about our Popup’s behaviour. For this example we’ll be using a stock image. As such I’ve set the “How Popup Appear?” drop down to “Image Click”. Other types of Popups, such as a simple text link, are also possible. Lastly take note of the “Popup Shortcode”, we’ll need to come back for this later.

Now navigate to the “Content” tab. Here is where we can define the content that will be displayed when our popup image is clicked. For this example I’ve just used another stock image. You can adjust the heading and subheading as required, or remove them entirely.

Now Return to the “Behaviour” tab and copy the “Popup Shortcode”.

At this point, we are done setting up our Popup. Now click “Publish”. We can always return to modify settings further.

For example, you may want to remove or modify the “Custom Close Text”, and “Security Note” that are found on the bottom of the “Content” tab.

Now navigate to the page where you’d like to include the Popup. Though the process here is being demonstrated using the Gutenberg editor, many Pagebuilders are similar.

We will be adding a Shortcode block. If your page builder doesn’t have a Shortcode block, try using a textbox. Some builders (e.g. BeaverBuilder) work by placing Shortcode directly as text.

Paste the Shortcode previously copied into the Shortcode block (or textbox). You can move this around and place it within your layout as desired.

That’s it! Now when the page is viewed the image will show, and when clicked our Popup will display.