WordPress

How to Create an Age Gate (18+) Page in WordPress Without a Plugin

How to Create an Age Gate (18+) Page in WordPress Without a Plugin

Why Use an Age Gate?

Age verification (also called an age gate) helps restrict access to certain content — typically required for:

  • Alcohol and tobacco product websites
  • Adult-themed content
  • Gambling or betting platforms
  • Legal compliance with local age-restriction laws

Instead of relying on plugins, here’s how to build a lightweight, no-plugin 18+ gate using HTML, CSS, and JavaScript.


Step 1: Create the Age Gate HTML

Paste this markup into your header.php or a custom template file. You can wrap it in a PHP check so it only appears on certain pages.


<div id="age-gate-overlay">
  <div class="age-gate-box">
    <h2>Are You 18 or Older?</h2>
    <button id="enter-site">Yes, I Am 18+</button>
    <button onclick="window.location.href='https://google.com'">No, Exit</button>
  </div>
</div>

Step 2: Style the Overlay with CSS


#age-gate-overlay {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.age-gate-box {
  text-align: center;
  background: #222;
  padding: 30px;
  border-radius: 8px;
}

.age-gate-box button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

Step 3: Add the JavaScript to Handle the Logic

This script hides the overlay after age confirmation and stores a cookie:


<script>
  document.addEventListener('DOMContentLoaded', function () {
    const overlay = document.getElementById('age-gate-overlay');
    const confirmed = document.cookie.includes('ageVerified=true');

    if (!confirmed) {
      overlay.style.display = 'flex';
    } else {
      overlay.remove();
    }

    document.getElementById('enter-site').addEventListener('click', function () {
      document.cookie = "ageVerified=true; max-age=86400; path=/"; // 1 day
      overlay.remove();
    });
  });
</script>

Optional: Show Only on Certain Pages

Wrap the age gate HTML and script in a conditional check if you only want it on specific pages or templates:


<?php if (is_page('shop') || is_product_category('alcohol')) : ?>
  <!-- Age gate HTML and JS here -->
&lt;?php endif; ?&gt;

Bonus Tip: Make the Gate Reappear After Expiry

The cookie duration is set to 24 hours (86400 seconds). You can adjust it to 31536000 (1 year) or clear it when needed.


Conclusion

Creating an age gate in WordPress without a plugin gives you full design and logic control while keeping your site fast. It’s perfect for legal compliance and user safety when running restricted-content websites.

With just a few lines of code, you’ve got a clean, effective age verification system — no plugin bloat necessary.