I need to add an age verification popup to my WordPress website because it will contain mature content. I want this verification to appear only once per visitor, and I’m thinking of using cookies to track if someone has already confirmed their age.
I could build this as a separate page that redirects based on cookie presence, but I don’t really want to deal with multiple pages. Instead, I’m looking for a modal or overlay approach that dims the main content and displays a confirmation dialog asking visitors to verify their age before proceeding.
I have experience with PHP, JavaScript, and CSS, so I’m not necessarily looking for complete code. I mainly want advice on the best approach to implement this kind of overlay system in WordPress. Is this a good strategy, or should I consider a different method?
using cookies is a smart choice! I did a similar thing using jQuery. Just position a full-screen div over everything and hide it after age confirmation. Make sure you set the cookie for 30 days to keep it user-friendly. wp_footer is perfect for adding your code!
I did something similar last year - went with a CSS overlay and it worked great. Just created a fixed div with high z-index covering the whole viewport, then used JS for form submission and cookie setting. Make sure your overlay loads right away with the page, not after DOM ready. Otherwise you’ll get that annoying flash where users see the main content first. Also style it properly since it’s literally the first thing people see. One thing that bit me - test it thoroughly on mobile with different screen sizes. The overlay can get weird on smaller devices. Cookie approach is definitely better than separate pages and makes everything way smoother for users.
Overlay approach is spot on. I did this for a client about six months back and picked up some useful tricks. Add a body class that kills scrolling when the overlay’s up - otherwise users can scroll the background and it looks messy. Don’t forget the noscript fallback that redirects to a separate verification page for when JS is off. For cookies, store both verification status and timestamp so you can expire it later if compliance needs it. Test with caching plugins too - they love to mess with cookie functionality. If you’re doing this the WordPress way, use wp_enqueue_script instead of dumping code in the footer, especially if you want to reuse it later.