Lauri Liimatta

Blog Home | Portfolio

How to create age verification checker for a WordPress website

When creating WordPress sites I generally try to use as few plugins as possible. My experience with WordPress is that you can quickly turn a site into a slow and bloated monster if you don’t pay attention to the amount and quality of the plugins you use. A lot of times features can be implemented more efficiently and robustly by writing them yourself.

A while ago I needed to add an age verification checker to a WordPress webshop. At first I glanced at some of the existing plugins but all of them felt like they were trying to do too much. Many of them were bundled with themes but lacked easy customisation methods.

Instead of writing css riddled with “!important” tags and other hacks I decided to make my own simple age checker. Here’s how I did it.

All of the following PHP code should go into the functions.php of the theme you’re using.

1) Create a popup / modal

function age_verification_popup() {
    if(!isset($_COOKIE['age_verification'])) { ?>
        <div class="age-verification-overlay">
            <div class="age-verification-popup">
                <p class="age-verification-q"><?php _e('Are you 18 or older?', 'theme'); ?></p>
                <p>
                    <a class="age-verification-btn age-verification-btn-no" href="https://google.com"><?php _e('No', 'theme'); ?></a>
                    <a class="age-verification-btn age-verification-btn-yes" href="#"><?php _e('Yes', 'theme'); ?></a>
                </p>
            </div>
        </div>
    <?php }
}
add_action('wp_footer', 'age_verification_popup');

Here I check if a cookie (which I will create in a later step) exists and if it doesn’t then I’ll add the necessary HTML for the visitor to verify themselves.

2) Wire up the popup form

jQuery(function() {
    jQuery('.age-verification-btn-yes').on('click', function(e) {
        e.preventDefault();

        jQuery.ajax({
            type: 'POST',
            url: my_ajax_object.ajax_url,
            data: {
                action: 'set_age_verification_cookie'
            },
            success: function(response) {
                jQuery('.age-verification-overlay').remove();
            }
        });
    });
});

If your theme doesn’t have a custom JavaScript file yet you can create a folder called 'js' and inside of it a file called 'age-verification.js' which has the above snippet. This snippet ensures that when the visitor clicks on the 'yes' button we’ll fire off the ‘set_age_verification_cookie’ function which we will be adding next.

Note: If your theme did not already load a JavaScript file in which you included this snippet then you also need to add the following to load it:

function age_verification_js() {
    wp_enqueue_script( 'age-verification-js', get_template_directory_uri() . '/js/age-verification.js', array('jquery'));
}
add_action('init', 'age_verification_js');

3) Set the cookie

function set_age_verification_cookie() {
    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) { 
        setcookie('age_verification', true, time()+(3600*12), COOKIEPATH, COOKIE_DOMAIN );
    }
    die();
}
add_action('wp_ajax_set_age_verification_cookie', 'set_age_verification_cookie');
add_action('wp_ajax_nopriv_set_age_verification_cookie', 'set_age_verification_cookie');

This function will set a cookie for both authenticated and unauthenticated visitors which expires in 12 hours. If you want to increase or decrease the cookie expiration time you can adjust the 3rd parameter of the setcookie function.

4) Add CSS (optional)

.age-verification-overlay {
    position: fixed;
    z-index: 9998;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.65);
}
.age-verification-popup {
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    margin-top: -125px;
    margin-left: -150px;
    width: 300px;
    min-height: 250px;
    text-align: center;
    padding: 30px;
    background: #000;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.age-verification-popup p {
    color: #fff;
}
.age-verification-popup a {
    display: inline-block;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    padding: 8px 16px;
    transition: all .2s;
}
.age-verification-popup a:hover {
    background: #fff;
    color: #000;
}

Most likely you will want to use your own CSS for the popup but the few styles above can give you a little jump start.

And that was how I created my own age verification checker for WordPress. I've made a plugin version of this (mostly) same code available on GitHub as well. If you have any questions or suggestions how to make it even better let me know.