Automatically Open WP Colorbox Popup On Page Load

In the following tutorial we will add a Colorbox Popup to our website which will automatically trigger when the page is loaded as opposed to your visitors having to trigger the interaction. This is a great way to create a wide variety of lead captures including email campaigns and directing user experience.

The first thing we will need to do is install Colorbox. You can acquire WP-Colorbox from the WordPress Repository and will be a perfect starting point for our current development project.

Once you have installed and activated Colorbox it is time to begin adding our new popup. Navigate to the page you would like to add your pop up window to and add the following code to your “Text” editor as opposed to your visual editor.


<div class="hidden-block">
    <div class="colorbox popup">
      // Enter your Popup Page content here
    </div>
</div>

Lets break down the code and see what we have done. So far everything is very simple as you can see. We have created a nested DIV whereas the outer DIV has a CSS class of “hidden-block” and the inner DIV has the CSS class of “colorbox popup”. Within the colorbox-popup DIV you can add your content which you would like to display when the popup loads.

Now to add the CSS styling to the main outer hidden-block DIV.


.hidden-block {display:none !important;visibility:hidden;}

At this point our popup content is now hidden from the viewers eyes when they visit our page. Now let’s begin adding the jQuery script which will trigger the popup on page load and show off our sleek new call to action. If you are using a page builder such as Divi or Visual Composer you can easily add this script to a raw code or javascript module. Otherwise you will need to edit your Themes footer.php file adding this script before the closing body tag.

PLEASE NOTE: if you are adding this script to your themes footer.php file it will produce a blank popup window on pages that you have not added a popup to. In order to work around this you will need to use the second script option provided replacing the URL with the page you will be adding the popup to.

Option 1 – Minified Page Builder Option


<script>
// trigger the popup when the page loads and our custom CSS class is found
jQuery(document).ready(function(){
    jQuery.colorbox({inline:true, href:".popup"});
});
// Add mobile responsive design to Colorbox
var cboxOptions = {
  width: '95%',
  height: '95%',
  maxWidth: '700px',
  maxHeight: '500px'
}

jQuery('.cbox-link').colorbox(cboxOptions);

jQuery(window).resize(function(){
  jQuery.colorbox.resize({
    width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width,
    height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height
  });
});
</script%gt;

Option 2


<script>
if(window.location.href=="www.example.com"){
   // Remember to update the above URL
   jQuery(document).ready(function(){
    if (document.cookie.indexOf('visited=flase') == -1) {
        var fifteenDays = 1000*60*60*24*30;
        var expires = new Date((new Date()).valueOf() + fifteenDays);
        document.cookie = 'visited=false;expires=' + expires.toUTCString();
	jQuery.colorbox({inline:true, href:".popup"});
	}
   });
 }

var cboxOptions = {
  width: '95%',
  height: '95%',
  maxWidth: '700px',
  maxHeight: '500px'
}

jQuery('.cbox-link').colorbox(cboxOptions);

jQuery(window).resize(function(){
  jQuery.colorbox.resize({
    width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width,
    height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height
  });
});
</script>

Once you have added this code snippet feel free to save your work and view your page. If you have performed all the steps correctly you should be able to see your newly created jQuery WP Colorbox Automatic Pop Up live for all to see. Remember to update the URL if you use the second script option from www.example.com to the URL of your desired popup location.

Bonus Snippet
Here is a small snippet that will allow you to add a text link to your popup content which will close the popup for you as an alternate to the close button within the window.


<a href='#' onclick='parent.$.colorbox.close(); return false;'>Close</a>

Thank you for taking the time to read this hopefully helpful tutorial on creating a Automatic jQuery Colorbox Popup.

Start Your Own WordPress Blog in Less than 15 Minutes

Creating a WordPress blog is nothing that you need to be afraid of. There is no elaborate planning required either. However, there are a few things you would need to decide. Since WordPress provides so many choices in terms of theme layout and color, added...

How To Move Users From Joomla To WordPress

While working on a recent Client project, I was requested to rebuild their current Joomla CMS website into a WordPress CMS website. The Client heard about the user friendly interface of WordPress and after testing out its functionality instantly fell in love. Another...

Building Influence With Free Membership Sites Part 2

What You Need Before Getting Started Building a free membership website is just about as easy as falling off a log...well, maybe not quite that easy...but it IS easy. There are so many associated advantages to having a free membership site that the little bit of...

Chad Warford

Fullstack Developer

digital designer online mascot

Disciplines:
HTML, CSS, PHP, JAVASCRIPT, JQUERY, MYSQL, WORDPRESS CODEX

Editor of Choice:
Notepad ++

Favorite Coding Fuel:
Dill Pickle Chips, Wine Gums, Butter Tarts, Morning Glory Muffins, Coffee, NOS Energy Drinks

Quick Links