A Beginner's Guide to Manually Creating Cookies
Popup Maker gives you a few standard ways to create a cookie for your popup. For example, you can have your popup create a cookie for these built-in events:
- After a popup closes
- Right when a popup opens
- When someone submits a form that's in your popup
But what if you need to set a cookie in a way different from those standard options?
No problem. That's where our Manual cookie creation setting comes in.
Using the Manual cookie creation setting lets you customize when your popup should create a cookie. For example, you might want a "Don't show this again" checkbox on your popup that allows people to dismiss the popup for the rest of their visit.
This guide walks through the steps for you to manually create a cookie for your popup. Here we go!
NOTE: The custom code in this example will automatically create any Manual cookie set up in your popup. So, if you have more than 1 Manual cookie, all cookies get created when the code runs.
See Pro Tip 2 for an example of how to selectively (or conditionally) choose a specific cookie to create.
Setting the Stage #
We're going to create a Time Delay / Auto Open popup that has a checkbox for your visitor to click if they don't want to see the popup again.
We'll need to:
- Add the checkbox to our popup.
- Set up the popup trigger and cookie.
- Write the custom code that "manually" creates our cookie.
Add the Checkbox to Our Popup #
Step 1: Edit your popup.
Step 2: Add your content using the popup editor.
Step 3: After you add your content, switch to the Text tab if you're not already there.
Step 4: Copy and paste the HTML code below.
<form id="dismiss-popup-form"> <div> <input id="dismiss-checkbox" name="dismiss-checkbox" type="checkbox" value="dismiss-popup" /> <label for="dismiss-checkbox">I don't want to see this again</label> </div> </form>
Here's what that code will display on a web page.
Set Up the Popup Trigger and Cookie #
Step 1: Scroll down to your Popup Settings and click Add New Trigger in the Triggers tab.
Step 2: Select Time Delay / Auto Open from the dropdown and click Add.
Step 3: Check the Prevent popup from showing to visitor again using a cookie? setting (checked is the default).
Step 4: Select Manual in the Stop showing popup once visitor takes this action dropdown.
Step 5: Keep the default Delay time (500ms) and default Cookie Name, then click Add.
Step 6: Find the Manual cookie you just created and click the pencil icon next to it.
Step 7: Change the Cookie Name from the default pum-nnn
to pum-nnn-never-see-again
where nnn
is your popup's ID.
Step 8: We're going to change the Cookie Time from the default 1 month to 1 year. Then, click Update.
Here's what your Triggers tab should look like so far.
Step 9: We won't set up any targeting rules so this test popup can appear on every post and page. We'll also keep the default display settings just to save time.
Step 10: Click Publish or Update on your popup to save your changes.
Write the Custom Code #
We're in the home stretch ;-)
Step 1: Copy this code snippet and paste it into your child theme's functions.php file or use a code snippets plugin that supports PHP. Learn more in our Getting Started With Custom PHP guide.
function set_never_see_again_cookie() { ?> <script type="text/javascript"> jQuery(document).ready(function ($) { // Change the number 1234 to your popup ID number. $("#popmake-1234 #dismiss-checkbox").click(function(event) { if ($('#dismiss-checkbox').prop('checked')) { $('#popmake-1234').trigger('pumSetCookie'); // Change 1234 to your popup ID. } // if }); // click listener }); // jQuery </script> <?php } add_action( 'wp_footer', 'set_never_see_again_cookie', 500 );
Step 2: Edit the snippet you just pasted. Every time you see 1234 change it to your popup's ID number. Save your functions.php file or publish your code snippet if you're using a plugin.
Step 3: Flush all of your caches. Bring up any post or page on your site. When your popup appears, click on the I don't want to see this again checkbox. Then, reload that same post or page or go anywhere else on your site. Your popup should not display again 😉
Pro tip 1: Want to close the popup when someone checks the dismiss checkbox? Add the Popup Maker CSS classes popmake-close
and pum-close
to the checkbox input HTML code. For example:
<input id="dismiss-checkbox" class="popmake-close pum-close" name="dismiss-checkbox" type="checkbox" value="dismiss-popup" />
Pro tip 2: What if you want 2 checkboxes and set a different cookie depending on which checkbox you click? For example, checkbox 1 dismisses the popup "forever" (1 year), and checkbox 2 dismisses the popup for 1 day.
In that case, you'll need to add another manual cookie and add another event listener to the code example above. Basically, you need a dedicated event listener for each checkbox.
See the full code example on GitHub.
Troubleshooting #
What if it doesn't work?
First, make sure you saved all of your code and your purged all of your caches. You should also check your browser console for any JavaScript errors. Lastly, double-check you added the correct popup ID to your custom code snippet.
Please see our basic troubleshooting tips for PHP related problems.