How to Add a Simple Popup Notification to Your WordPress Site Without Plugins

Adding a quick popup to your WordPress site can be a great way to deliver important messages, announcements, or offers without slowing down your site or installing yet another plugin.

Here’s a lightweight, performance-friendly solution using just a bit of JavaScript, HTML, and CSS. No external libraries. No dependencies, No bloat. Just change the text of the message and add it as below.

What This Popup Does:

• Shows up only once every 30 days per visitor
• Can be used on any page (except the homepage, in this example)
• Fully customizable design and text
• Doesn’t rely on any plugins (ideal for speed-focused sites)

How It Works:

• A bit of JavaScript sets a cookie when the user closes the popup.
• The popup HTML is injected via functions.php.
• Basic CSS handles the styling and layout.

JavaScript (add to footer.php):

<script>
  function setCookie(name, value, days) {
    const expires = new Date(Date.now() + days*24*60*60*1000).toUTCString();
    document.cookie = name + "=" + value + "; expires=" + expires + "; path=/";
  }

  function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
  }

  window.addEventListener('load', function() {
    if (!getCookie('oswpopup_shown')) {
      document.getElementById('osw-popup').style.display = 'flex';
    }
  });

  document.addEventListener('click', function(e) {
    if (e.target.id === 'osw-popup-close') {
      document.getElementById('osw-popup').style.display = 'none';
      setCookie('oswpopup_shown', 'yes', 30);
    }
  });
</script>

PHP (add to functions.php of your child theme):

function osw_custom_popup_html() {
    ?>
    <div id="osw-popup" style="display:none;">
      <div id="osw-popup-content">
        <p><strong>Your text</strong><br>
        Your big text</p>
        <button id="osw-popup-close">Got it!</button>
      </div>
    </div>
    <?php
}
add_action('wp_footer', 'osw_custom_popup_html');

CSS (add to Appearance>Customize>Additional CSS):

#osw-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#osw-popup-content {
  background: #fff;
  padding: 2rem;
  max-width: 400px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

#osw-popup-content button {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 0.7rem 1.5rem;
  margin-top: 1rem;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
}

/* Optional: Hide popup on homepage */
.home #osw-popup {
  display: none !important;
}

Written by Anton, founder of OSWOptimize and an SEO & Web Performance expert with over 14 years of hands-on experience. I specialize in fixing Core Web Vitals, CLS issues, and boosting search rankings for WordPress websites.

Most popular articles:

How To Remove Product Attributes (Variations) From Woocommerce Emails. Add Purchased Products Column to WooCommerce Orders How to Change Completed Order Email Subject for Downloadable Products in WooCommerce How to Temporarily Disable WooCommerce Shopping for the Holiday Season