In this guide, we’ll build a popup for WordPress sites without using a plugin. The popup displays a message to visitors and uses a cookie to remember whether they’ve already seen it – so it won’t appear again on subsequent visits.
We’ll use the js-cookie library to handle cookie creation and reading. Since we’re not relying on a plugin, we have full control over the design and behavior of the popup.
This approach works well if you’re promoting a specific product in a WooCommerce store, announcing a new feature, or displaying any kind of one-time message to your visitors.
For those unfamiliar, cookies are small pieces of data stored in the browser by a website. They persist across page loads and visits, which is how a shopping cart remembers your items even after you leave and return.
For a deeper look at how cookies work, check out the post JavaScript & Internet Cookies: Developers Essential Practices.
What Does This Guide Have to Do with GDPR?
The GDPR cookie regulations (in effect since May 2018) require websites to inform visitors about cookie usage and obtain consent before setting non-essential cookies.
If even a small percentage of your audience comes from the European Union, you need to comply with these rules. Similar regulations now exist in other regions too (California’s CPRA, India’s DPDP, and others).
That’s why you see cookie consent banners on most websites today. The popup we’ll build in this guide can serve as a simple cookie notice for your site.
For production sites with significant traffic, consider using a dedicated Consent Management Platform (CMP) that handles granular consent categories, pre-consent blocking, and audit logging. The approach in this guide is a lightweight starting point, not a full compliance solution.
With that said, let’s get to the implementation. Here are the steps for displaying a popup on WordPress sites using js-cookie.
Loading the js-cookie Library in WordPress
Download the library from the following link (the file only) and copy it to a js folder in your child theme. Create the folder if it doesn’t exist.
The js-cookie library supports all modern browsers, has no dependencies, and weighs less than 800 bytes gzipped.
As we’ve covered in other articles on this blog, the correct way to load JavaScript files in WordPress is through wp_enqueue_scripts. Add the following to your child theme’s functions.php:
function add_scripts_to_wordpress() {
wp_register_script( 'js_cookie', get_stylesheet_directory_uri() . '/js/js.cookie.min.js', array(), '3.0.5', true );
wp_enqueue_script( 'js_cookie' );
}
add_action( 'wp_enqueue_scripts', 'add_scripts_to_wordpress' );Make sure the file is loading correctly by checking the page source or the Network tab in your browser’s developer tools. Note that we use get_stylesheet_directory_uri() (child theme) rather than get_template_directory_uri() (parent theme), and the file loads in the footer (true as the last parameter).
Creating the Markup for the Popup
Next, we’ll add the HTML for the popup message. We’ll hook it into the WordPress footer using wp_footer:
function cookie_notice_popup() { ?>
<div class="cookie-notice" role="dialog" aria-label="Cookie Notice" aria-hidden="true">
<div class="cookie-notice-inner">
<div class="content-cookie">We use cookies to ensure the best browsing experience on our site. Continuing to browse means you accept the use of cookies. Read more <a href="<?php echo get_page_link('xxx'); ?>">in the privacy policy.</a></div>
<button class="button-cookie">Got it</button>
</div>
</div>
<?php
}
add_action('wp_footer','cookie_notice_popup');In addition to the confirmation button, we display a link to your site’s privacy policy page using the get_page_link function.
Replace xxx on line 4 with the ID of your privacy policy page. You can remove the link entirely if you prefer.
If you don’t know how to find a page’s ID, take a look at the post Displaying ID of Pages and Posts.
Designing the Popup Using CSS
You can design the popup however you like, but here’s a clean starting point that displays the message as a fixed bar at the bottom of the page:
.cookie-notice {
position: fixed;
bottom: 0;
background: rgba(24, 24, 24, 0.9);
width: 100%;
z-index: 9999;
padding: 20px 10px;
display: none;
text-align: right;
color: #fefefe;
font-size: 14px;
}
.cookie-notice-inner {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.content-cookie > a {
color: #fefefe !important;
}
button.button-cookie {
background: none;
border: 2px solid #fefefe;
border-radius: 28px;
color: white;
font-size: 14px;
padding: 5px 26px;
margin-top: 14px;
cursor: pointer;
}
button.button-cookie:hover {
background: rgba(255, 255, 255, 0.1);
}
@media (min-width: 768px) {
button.button-cookie {
margin-top: 0;
}
.cookie-notice-inner {
flex-direction: row;
}
}We use Flexbox to handle the layout. This is just an example – you’ll likely need to adjust the CSS to match your site’s design.
Notice that the popup element starts hidden (
display: none). We’ll show it in the next step using JavaScript, only if the cookie doesn’t exist for the visitor.
Displaying the Popup After Page Load
Now the interesting part. We’ll show the popup after the page loads, and when the visitor clicks the button, we’ll create a cookie and hide the popup. That cookie ensures the popup won’t appear again on future visits.
Here is the code:
function cookieInit() {
var ourCookie = Cookies.get('ourCookie');
if (ourCookie) {
return false;
} else {
openCookiePopup();
}
}
function openCookiePopup() {
setTimeout(function () {
var notice = document.querySelector('.cookie-notice');
if (notice) {
notice.style.display = 'block';
notice.setAttribute('aria-hidden', 'false');
}
}, 4000);
}
cookieInit();The first function (cookieInit) checks if a cookie named ourCookie exists for the visitor. If it exists, the function exits. If it doesn’t, it calls openCookiePopup, which displays the popup element after a 4-second delay.
This code should only run after the js-cookie library has been loaded. Since we enqueued the library in the footer, place this code after it or enqueue it as a separate file with
js_cookieas a dependency.
Hiding the Popup and Creating the Cookie on Click
Add these lines to the previous code. When the visitor clicks the button, the popup hides and a cookie is created so the popup won’t appear again:
document.querySelector('.button-cookie').addEventListener('click', function () {
var notice = document.querySelector('.cookie-notice');
notice.style.display = 'none';
notice.setAttribute('aria-hidden', 'true');
Cookies.set('ourCookie', 'yes', { expires: 365, path: '/', sameSite: 'Lax' });
});We use two js-cookie methods here: Cookies.get reads a cookie and Cookies.set creates one. The expires: 365 parameter means the cookie lasts for one year. We also set sameSite: 'Lax' to follow modern browser security defaults.
Without an expires or max-age value, a cookie is treated as a “session cookie” and gets deleted when the browser closes. Always set an expiration if you want the cookie to persist across sessions.
When developing with cookies, you’ll often need to delete them for testing. The original EditThisCookie Chrome extension has been removed from the Web Store, but an actively maintained fork called EditThisCookie (fork) is available and works with Manifest V3.
A Few More Words About the js-cookie Library
The js-cookie library (v3.0.5 as of this writing) is lightweight, well-tested, and has no dependencies. At less than 800 bytes gzipped, it has minimal impact on your site’s loading time. Here’s a quick reference for its API:
Create a cookie for all pages:
Cookies.set('name', 'value');Create a cookie that expires in 7 days:
Cookies.set('name', 'value', { expires: 7 });Create a cookie valid only for the current page:
Cookies.set('name', 'value', { expires: 7, path: '' });Read a cookie:
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefinedRead all cookies:
Cookies.get(); // => { name: 'value' }Remove a cookie:
Cookies.remove('name');Remove a cookie set for the current page:
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail!
Cookies.remove('name', { path: '' }); // removed!More options and documentation are available on the library’s GitHub page.
FAQs
Common questions about creating popups with cookies in WordPress:
add_action('wp_footer', 'cookie_notice_popup') call in a conditional check. For example, use is_front_page() to show it only on the homepage, or is_single() for blog posts only. You can also use is_page() with a specific page ID.expires value in the Cookies.set() call. The number represents days. For example, expires: 30 makes the cookie last 30 days, and expires: 365 makes it last a year. Without an expires value, the cookie is deleted when the browser closes.document.cookie directly to set and read cookies. The js-cookie library simply provides a cleaner API. For example, document.cookie = "ourCookie=yes; max-age=31536000; path=/; SameSite=Lax"; achieves the same result. The library is most useful when you need to work with cookies frequently throughout your code.path mismatch - if the cookie was set with a specific path, it won't be readable from other paths. Make sure you set path: '/' so the cookie applies site-wide.Summary
In this guide, we built a cookie-based popup for WordPress without any plugins. We loaded the js-cookie library, created the HTML markup, styled it with CSS, and used JavaScript to show the popup only to visitors who haven’t dismissed it before.
The same technique works for any one-time message: cookie consent notices, promotional banners, feature announcements, or newsletter signup prompts. The key is using a cookie to track whether the visitor has already interacted with the popup, so it doesn’t appear again.
