Hey everyone! I’m setting up a WordPress blog with some mature content. I want to add a warning pop-up for first-time visitors. Instead of a separate page, I’m thinking of a fancy overlay that dims the homepage and shows a ‘Enter/Leave’ choice.
I know some basics of PHP, JS, and CSS, but I’m stuck on how to start this. Any ideas on the best way to do it? Should I use a plugin or code it myself? And is this even a good approach?
I thought about using cookies, but not everyone has them on. Maybe there’s a smarter way? I’d love to hear what you guys think! Thanks in advance for any tips or suggestions.
hey, i’ve dealt with this before. instead of reinventing the wheel, check out the ‘age gate’ plugin. it’s pretty customizable and handles most of what you need. just tweak the css to match your site’s style. saves time and headaches, trust me! good luck with your blog!
From my experience, a custom solution using JavaScript and localStorage is effective for this scenario. Create a modal overlay with vanilla JS, triggered on page load if it’s the user’s first visit. Use localStorage to store the user’s choice, which persists even if cookies are disabled.
For the overlay, a simple div with absolute positioning and high z-index works well. Style it to dim the background and center the warning message. Add event listeners to your ‘Enter/Leave’ buttons to either hide the overlay or redirect to a safe page.
Remember to implement this server-side too, as clever users could bypass client-side restrictions. A PHP check on each page load adds an extra layer of security.
This approach gives you full control over functionality and design, and it’s not overly complex to implement. Plus, it’s lightweight compared to most plugins.
I’ve actually implemented something similar on my own site. From my experience, coding it yourself gives you more control, but it can be time-consuming. I ended up using a combination of JavaScript for the overlay and PHP for session handling.
For the overlay, I created a div that covers the whole page and used CSS to style it. The JavaScript handles showing/hiding the overlay and the ‘Enter/Leave’ buttons. As for remembering user choice, I found that using PHP sessions works better than cookies. It’s more reliable and doesn’t depend on browser settings.
One thing to keep in mind - make sure your content isn’t visible at all before the user agrees. I made that mistake initially and had to refactor my code. Also, consider adding an age verification checkbox for legal reasons.
It took some trial and error, but the end result was worth it. If you decide to go the custom route and need any specific pointers, feel free to ask!