How to Make a WordPress Page Load with a Popup Pre-Opened Using a Special URL

Popup Maker is a popular and useful WordPress plugin for creating website popups. The popups can open automatically after a preset time or through a click event on the page or in your menu.

But one feature I haven’t found natively in Popup Maker is the ability to tell the page to automatically open the popup when you visit a variation of its URL. In other words, how to make your page load with a popup already opened. For example, let’s say you have this page that has some popups which are not shown by default:

http://www.mysite.com

But, you’d like the page to load with a popup already opened when you visit this URL:

http://www.mysite.com#open-the-popup

This could be very useful for social sharing, forwarding links, and so on.

This article describes how to do that!

The Popup Maker Code

I’m going to jump straight to the answer and give you the code to do it, then explain how to use it. Here it is:

jQuery(document).ready(function() {
  var id = window.location.hash;
  switch (id) {
    case "#chocolate": PUM.open(684); break;
    case "#vanilla": PUM.open(695); break;
    case "#strawberry": PUM.open(1135); break;
    case "#pistachio": PUM.open(1200); break;
    case "#coffee": PUM.open(1152); break;
    case "#mint": PUM.open(1162); break;
    case "#cherry": PUM.open(1171); break;
  }
});

Basically, we grab the hash from the URL, then call the PUM.open global function to open the appropriate popup, based on the popup ID.

So, with the code above, if I visted:

http://www.mysite.com#strawberry

Then, the page should open with popup with ID 1135 opened!

How to Use This Code

Insert a hash for each of the popups you want to open using this method, then substitute in the correct Popup Maker IDs in the code above. Pretty straightforward!

This code can go into your child theme’s JS file, or you can “cheat” and just put it in a Gutenberg HTML block wrapped in <script> tags.

Let me know if it works for you! – Brian

Brian Shim

I am a freelance web developer and consultant based in Santa Monica, CA. I’ve been designing websites using WordPress and from scratch using HTML, CSS, PHP, and JavaScript since 2010. I create websites and web applications for businesses, nonprofits, and other organizations. I have a degree in Electrical Engineering (BSEE) from California Institute of Technology and a degree in Engineering Management (MSEM) from Stanford University.

brianshim.com