Aquasar
  • Home
  • Portfolio
  • Articles
  • Pricing
  • About
  • Contact
WEB DEVELOPMENT |SEO |DIGITAL ADS

Redirects on popup plugin using WordPress

Jan 11th, 2020

Alex Quasar

wordpresspopup

If you are a freelancer or web design agency you probably have created or need to create a popup for your client's WordPress site. WordPress is something I am really not a fan of, but it makes up a large portion of small business and personal sites that you cannot really get away without using it from time to time. This is true when you are creating changes on a existing wp site created by someone else.

This time, a simple popup was needed, for which there is a zillion plugins for most of them which are paid plugins to access all the features.

For this task I used a popup plugin called `Popup Maker` which has quite a few nice features you can read up and is free.

I also used the popular plugin `Insert Headers and Footers` which allows for insertion of custom CSS and JavaScript code into the headers and footers of your site. This plugin or some variation of it is pretty much necessary for every site since that is also where you would insert your Google Analytics Tracking or Facebook Pixel to measure and learn about your sites users.

Using the Popup Maker UI, I created a popup with an image that would show up on the site after 5 seconds. To create a redirect I to added the following script after the opening body tag using the Headers and Footers Plugin.

<script type="text/javascript" >

function addMyEventListener(){
   document.getElementById("popupImage").addEventListener("click", myFunction);
}

setTimeout(addMyEventListener,5000);

function myFunction() {
console.log('I was clicked');
 location.href = "https://example.com/products/";
  
}
</script> 

I ensured that the image had an id of popupImage so that I could an a click event listener on it. In addition, I needed to use setTimeout to ensure the function would only get called after 5 seconds, since that is when the popup with the id popupImage would appear on the screen.

Once a user clicked, they were than redirected to example.com/products.

Hope this example helps with your popup redirects and saves you some time and / or money so you don't need to purchase a popup plugin to access this functionality.