Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Make Anything Popup on Click in WordPress

How to Make Anything Popup on Click in WordPress

We have all seen popup boxes on websites before. Some of them are annoying and some of them are engaging, it just depends on the purpose. However, in general, having an item popup on a click is indeed a good way to get your website users to interact on-page and keep them on your website longer.
More often than not, an image popup is what you would see on a website. That being said, there are actually tools that allow you to make just about anything popup on click. You just have to find the right way to do it.
Of course you can code anything you want from the ground up. That is, if you know and understand how to write code. If you don’t, then you need something that will allow you to easily create item popups on any type of click. This can include images, buttons, an HTML popup, and more.
I have found a fantastic plugin that will indeed allow you to make anything on your website popup on a click. We are going to explore that plugin together in a few minutes, as well as go over the settings to get it going on your WordPress website.

Why Create Popups on Click?

There are several reasons you may want to create popups on your WordPress website. One of the most engaging things is when a website user can click a button or a link, and have some type of information popup for them to read and view.
The information can be whatever you want. You create and display the info in the popup box. You can show any number of items and information inside that popup box for people to see. This also means that you can keep your WordPress post or page free of extra clutter because you have chosen to build items that popup on a click.
Many websites use WordPress image popup on click for things like galleries and portfolios. However, today we want to take it a step further and show you how you can create a popup on click using a number of different items on a website page.
Perhaps the most popular new type of popup box you can create is a text popup. What this means is that when you click on highlighted text, a popup box will appear based on the settings and configuration you build around.
Let’s take a look at the plugin we are exploring today and go over all the functionality it will provide.
Popup Anything on Click plugin
Popup Anything on Click is a very powerful, yet lightweight, module popup plugin for your WordPress website. It basically allows you to add unlimited types of popups to your website using your own layout, settings, configurations, and displays.
The plugin will give you the ability to create very highly customizable popup windows. You can then add them anywhere on your website using shortcodes. These are automatically generated every time you build a new popup within your admin dashboard.
Perhaps the best thing about this plugin is that there are no limitations to what you can put inside the popup box. HTML text, images, shortcodes, anything you want. You build the popup using the text editor provided and lay it out and design it how you see fit.
The Popup Anything on Click plugin comes with a lot of functionality. You will be able to position the popup box where you want it. It is also a fully responsive and mobile-friendly popup box plugin. This means your popup boxes will look good on any device.
Some of the other main functions and features of the plugin include:
  • Link, HTML, Button, & Image Popups
  • Image and Captions Titles
  • Manage Width of Popup
  • Set Popup Positions
  • Customize Look of Links and Popups
  • Create as Many Popups as You Want
  • Works With Contact Form Plugins
  • Display Shortcodes
  • Custom Animations
  • Popup Effects
  • Popup Location Choices
  • Full-Screen Popup Available
  • Popups are Responsive

Basically, you have everything you need to build dynamic, interactive popup boxes that will open whenever the links are clicked.

Note: The plugin works perfectly in the Gutenberg block editor as well. You simply use the “shortcode” block and insert your popup box shortcode where you want it.

Let’s take a look at how to get the plugin installed and activated before we go over it together.

Install and Activate Plugin

In order to create your first popup on click box, you first need to install and activate the plugin. You can do this by going to the Plugins page in your WordPress admin dashboard. Simply search the plugin name and install it right from there.

Instal and activate popup on click plugin

Once the plugin has been installed and activated, you want to access the main settings page before you start adding any popups. To do this, click on Popup Anything > Settings. You will see this located on the left side menu of your dashboard after the plugin has been activated.

Click on popup anything then click on settings

Note: You may be automatically bumped to the “Here’s What to do Next” page after you activate the plugin. You are more than welcome to click on that. You will be taken to the main website home page for the plugin. They will offer you the pro version of the plugin.

However, this tutorial is based on the free version, which gives you everything you need to create dynamic popup on click boxes.

Here's what to do next page

Let’s go ahead and set the plugin up and build a popup box together.

Add a Popup Box

At this point, you should be on the settings page for the plugin. Before we add our first popup box, let’s take care of the single item in settings. The only setting you choose is whether or not you want to disable or include the Manage Polyfill JS.

Geberal settings for popup on click box plugin

Go ahead and make your choice and save it. Now, let’s add your first popup box together. Click on the “Add a Popup” selection that is located on the left side menu.

Click on add a popup

You will be presented with a text or visual editor (your choice), where you can now build and design your first popup box. Think of it as adding a new post or page. The concept is the same, except when you are done, you grab the shortcode and add it to wherever you want the popup to show on your website.

Go ahead and give your popup box a name, and then build and design the content however you want.

Add name and content to popup box

Now scroll down some and start on your popup box settings. Go ahead and choose what type of popup you want to build, and then start filling in the rest of your settings from there.

Popup on click box settings

Continue filling in all of the popup box screen, effect, and positions settings to your liking. Choose true or false to “Enable Overlay.” and you are about done.

Enable overlay

You can continue to scroll down some. However, the rest of the settings will be greyed out unless you are running the pro version of the plugin. So with that, go ahead and click on the “Publish” button to make your popup box go live.

Now that the popup box is published, you will see it in your Popup Anything list. This is where all of your boxes will display when you build them.

Popup on click box shortcode list

You can copy and paste the shortcode generated into any post or page you want. That is where your popup box will display based on the way you built it.

Link text popup box demo

That’s it! You have successfully installed the plugin and built your first popup on click box. You can repeat this process as many times as you want in order to add more boxes.

Final Thoughts

Having dynamic popup boxes on your website is a great way to increase the amount of time users stay on a page. It also allows them to interact with your website in a different way than they normally would.
You don’t need to know how to write code to add dynamic popup boxes to your website. Using the plugin above, you can create as many boxes as you want that all popup on a click of the mouse.
Have you tried adding popup boxes in a different way before? Did you find that this plugin made the entire process quicker and easier?

 

Author: Jeremy Holcombe

Growing up in Hawaii, Jeremy started his freelance writing career doing resumes, business plans, article writing, and everything in between. He now specializes in online marketing and content writing and is part of the Content Marketing Team at GreenGeeks.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.