How To Create A Popup In WordPress
Popup is one of the most widely used container components on websites. It is used to divert your visitors focus on something important or interact with your audience. So, in this article, I would like to share how to create a popup in WordPress with or without using another plugin.
What Is A Popup
A popup or pop-up is a GUI (Graphical User Interface) display area. It is derived from "Pop Ups" word and usually resembles a small window that appears suddenly in the foreground by certain triggers.
How To Initiate A Popup
Popups can be initiated in several ways. For example, using user actions like clicking on a link or leaving the page as a trigger. Or, you can also set a timer to start a popup after specific time delay.
What You Can Do With Popups
There are many things you can do with a popup. From the login page, sign up form, newsletter subscription, announcement or even insert an advertisement for monetization purpose.
However, please note that some ad networks such as Google Adsense may prohibit placing ads in popups. So, please check their terms to make sure your website is compliant.
How To Create A Popup In WordPress Without Using Another Plugin
Some people often want to avoid using a plugin for easy tasks. For example, you only need to use one popup, and it seems highly unnecessary to install a new plugin. For this very reason, I started writing this easy guide.
If you choose to use a plugin, please click here or scroll down to see our list of recommended plugins. Otherwise, please continue reading.
Please note that this is a very basic popup triggered by clicking on the link. It is intended to give you an idea of how to create a popup in WordPress without using another plugin. You may need to add extra styles to match this popup with your active theme. Please see image 1 below for the end result.
This is your stylesheet which will control the appearance of your popup. For the sake of this tutorial, I will save this file as popup-styles.css. The stylesheet is pretty self-explanatory. So, feel free to change any value if you need to.
Next, create a new file again and paste the following snippets. But this time, please save it using JS extension. For this tutorial, I will save it as popup-script.js.
Enqueue And Add Popup Container
By now you should already have two files namely popup-styles.css and popup-script.js. Next, let's add this script and styles to the website using the enqueue system.
For the next step, there are three ways you can do it. It is by using theme functions.php (not recommended), using a site-custom plugin or using a child theme.
- How to upload files and folder using FTP.
- How to create a WordPress site-custom plugin.
- How to create a WordPress child theme.
If you are using a site-custom plugin, first, upload both of your popup-styles.css and popup-script.js to your plugin folder. Then, copy and paste the following snippets from line 4 - 12 and 37 - 48 to your site-custom plugin file.
Otherwise, if you are using a child theme, upload both of your popup-styles.css and popup-script.js to your child theme folder. After that, copy and paste the following snippets from line 15 - 23 and 37 - 48 to your child theme functions.php.
Or, if you still want to use your theme functions.php, please upload both of your popup-styles.css and popup-script.js to your theme folder. And don't forget to copy and paste the following snippets from line 26 - 34 and 37 - 48 to your theme functions.php.
In the above snippets, we have uploaded and added both popup-styles.css and popup-script.js to the website using the enqueue system. We have also added our popup in the footer of the website using the same snippet.
However, please note that this popup will only work on any single post or custom post type. This is because I have added is_single() conditional tag in the snippet above.
If, in case you want this popup to work everywhere on your website, please remove the conditional statement from your snippet. You may also want to read the introduction to WordPress conditional tags.
Now everything is complete. All you need is to start your popup. As I mentioned before, to initiate this popup, you need to click on the link.
So let's add class="demo-popup" to your link to act as a trigger. If you still using the classic editor, please switch to text editor temporary and add the following snippet.
Or, if you are currently using the new Gutenberg editor, you may need to click on your block and edit as HTML. Then, add class="demo-popup" on your link before re-switch back Gutenberg visual editor.
Once you've finished adding the class, save your post and view it. Try clicking on the link and voilà! You just create your first popup.
In addition to the above method, you can also create a popup using a plugin. There are many plugins that can help you create a popup for your website. But, here are the most popular popup plugins in WordPress directory.
With over 300,000 active installations and nearly 3000 five star reviews, Popup Maker is the most popular popup plugin. This plugin has limitless potential where you can make unlimited responsive popups without any restrictions.
Comes with many great features and allow you to set multiple conditions, cookies, and triggers. Moreover, it also compatible with all form builder plugins and email marketing service providers.
Popup Builder is another popular popup plugin among WordPress community. It is highly customizable where you can set popup animation effect or popup location on the screen.
With this plugin, you can easily show or hide popups for selected users or redirect them to another page after they click on popup content. Besides, it also comes with shortcode support, popup sound effect and many other cool features.
Popup - WordPress Popup
Similar to two previous plugins, Popup - WordPress Popup is also a popup plugin comes with many great features. For example, you can display popups after your visitor scrolls down x% of the page or automatically hide popups when they scroll up.
Additionally, there are multiple display filters for popup you can combine to achieve the result you want. And, if you need additional options and more powerful features, don't forget to check out their premium version.
I hope this article helps and gives you some idea of how to create a popup in WordPress. And if you have feedback or issue about snippets or any of the plugins above, please share it with us in the comment section.
He is a web developer, a programmer, and a computer technician. He obsessed with coding and enjoy learning new things. In his spare time, he likes to play online games, musical instruments or watching anime and movies.