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.

About Popup

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.

How To Create A Popup In WordPress
Image 1.

Add Stylesheet

To get started, first, create a new file using any text editor such as Notepad, Notepad++ or Sublime. Then, copy and paste the following snippets and save it using CSS extension.

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.

Add jQuery

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.

This is your JavaScript file which will allow you to implement various things from simple to complex on your website. And as you can see, I use jQuery, a JavaScript library to initiate and close our popup.

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.

RELATED ARTICLES:

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.

Popup Initiator

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.

Popup Plugins

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.

Popup Maker

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

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.

Footer Note

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.

  • If you think your friends would find this useful, please share it with them. It will allow us help more people.
  • To get more of our latest update, please subcribe to our newsletter.
  • You can also print this article for reference.
This article has been printed from https://www.jebatonline.com/articles/how-to-create-a-popup-in-wordpress/

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

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