How to Create a Popup in WordPress Without a Plugin (2026)

Last Updated: March 10, 2026

If you are building a WordPress website, you have probably noticed that many popup tools require installing a plugin. On WordPress.org this usually is not a problem, but on WordPress.com things work differently. Many WordPress.com plans do not allow third-party plugins, which means you cannot simply install a popup plugin the way most tutorials suggest.

This creates a frustrating situation for many site owners. Popups are one of the most common ways to display announcements, collect email subscribers, promote products, or highlight affiliate offers. Yet the typical solution requires software that many WordPress users cannot install.

The good news is that you do not actually need a plugin to create a popup in WordPress.

With a small amount of HTML, CSS, and JavaScript, you can build a lightweight popup that works on both WordPress.org and WordPress.com websites. This approach keeps your website faster, avoids plugin conflicts, and gives you complete control over how your popup looks and behaves.

In this guide, you will learn exactly how to create a WordPress popup manually, including:

• How popup code works in WordPress
• How to add the popup HTML structure
• How to style it with CSS
• How to trigger it using JavaScript
• How to customize it for real-world use cases

Whether you want a simple announcement popup or a lead capture form, this method allows you to add the functionality without relying on bulky plugins.

---

Quick Answer: To create a popup in WordPress without a plugin, add HTML for the popup structure, CSS for styling, and JavaScript to control when the popup appears.

---

Table of Contents:

Why Avoid Plugins for WordPress Popups?

Popup plugins can be convenient, but they are not always the best solution. In many situations, creating a popup manually can be faster, safer, and easier to maintain.

1. WordPress.com Plugin Restrictions

If you are using WordPress.com on a Free, Personal, or Premium plan, plugin installation is not available. Many tutorials assume you can install plugins, but WordPress.com users often cannot.

Manual popup code allows you to add the same functionality without upgrading your plan.

2. Faster Page Load Speeds

Many popup plugins load multiple JavaScript libraries, CSS frameworks, and tracking scripts. These additional files increase page load times and can negatively impact performance, especially on mobile devices.

A custom popup built with simple code loads instantly and avoids unnecessary scripts.

3. Reduced Security Risk

Every plugin added to your website introduces another potential vulnerability. Outdated plugins are one of the most common causes of WordPress security issues.

Using manual popup code reduces your reliance on third-party software.

4. Full Design Control

Plugin interfaces often restrict how popups look or behave. Creating your own popup gives you complete control over:

• Popup layout
• Animation style
• Trigger timing
• Page placement
• Mobile responsiveness

You can design exactly what you want without navigating complicated plugin dashboards.

5. Fewer Compatibility Issues

Popup plugins sometimes conflict with themes, page builders, or other plugins. These conflicts can break layouts or cause popups to appear incorrectly.

A simple custom popup avoids many of these compatibility problems.

---

Method 1: Creating a Popup Using HTML, CSS, and JavaScript

Method 1: Create a WordPress Popup Using HTML, CSS, and JavaScript

The most flexible way to create a popup in WordPress is by combining three basic web technologies:

HTML – creates the popup structure
CSS – controls the appearance and layout
JavaScript – controls when the popup appears and how it closes

This method works on both WordPress.org and WordPress.com as long as you can add:

• Custom HTML blocks
• Additional CSS
• Small JavaScript snippets

The popup will appear automatically after the page loads and can be closed by the visitor.

Step 1: Add the Popup HTML

Paste this code into a Custom HTML block or near the bottom of your page.

<div id="popup" class="popup-overlay">
  <div class="popup-content">
    <span class="close-button" onclick="closePopup()">&times;</span>
    <h2>Special Announcement</h2>
    <p>Subscribe to our newsletter and get 10% off your first purchase.</p>
  </div>
</div>

Step 2: Add CSS (Customize > Additional CSS or Site Editor)

Add the following CSS in:

Appearance → Customize → Additional CSS

.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}

.popup-content {
background: #fff;
padding: 30px;
border-radius: 8px;
max-width: 500px;
text-align: center;
}

.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}

Step 3: Add JavaScript (Footer, Code Block, or Customizer)

Place this code near the bottom of your page or inside a Custom HTML block.

<script>
window.onload = function() {
setTimeout(function() {
document.getElementById(“popup”).style.display = “flex”;
}, 2000);
};

function closePopup() {
document.getElementById(“popup”).style.display = “none”;
}
</script>

Result

This popup appears 2 seconds after the page loads. Users can close it with the X. All without installing a plugin.

Common Challenges and Fixes

• Popup not showing at all? Double-check that your <script> tag is placed at the end of your content or footer area. If JavaScript loads before the HTML element is rendered, it may not find the #popup ID.
• Close button doesn’t work? Make sure the onclick="closePopup()" attribute is correctly set on the span and that the closePopup() function exists in your script.
• Styling doesn’t apply? Ensure your CSS is properly saved in the Additional CSS panel or stylesheet. Avoid extra curly braces or missing semicolons.
• Popup covers entire page but doesn’t center? This is often a flex issue—verify display: flex and the justify-content and align-items rules.
• Other elements not clickable after popup shows? Check your z-index values and make sure you’re hiding the overlay when the popup closes. This popup appears 2 seconds after the page loads. Users can close it with the X. All without installing a plugin.

---

Method 2: Add a Popup Using the Block Editor

If you’re using WordPress.com’s block editor or Gutenberg on WordPress.org, you can insert popup code directly into a page or post.

Step-by-Step:

1. Add a Custom HTML Block
2. Paste the same HTML as shown above
3. Use the Site Customizer > Additional CSS to paste the popup CSS
4. Add the JavaScript in a Code block at the bottom of the page (or use the HTML block)

This method is great for one-time popups on landing pages or lead magnets.

Common Challenges and Fixes

• Popup overlaps or breaks page layout? This is likely a CSS conflict. Try wrapping your HTML/CSS in a unique class name to avoid clashing with your theme styles.
• JavaScript doesn’t run? If added in a code block, make sure it’s inside <script> tags. Also confirm that JavaScript is allowed on your WordPress.com plan.
• Popup works in preview but not live? This could be a caching issue—clear your site cache or try in an incognito window.
• Editing blocks removes your code? Sometimes the block editor strips tags—use a Custom HTML block, not a Paragraph or Shortcode block.
• Popup appears but can’t be closed? Make sure the onclick function is included and there are no typos in your function call or element ID.

---

Customization Ideas for WordPress Popups

Once your popup works, you can customize it to match your site’s design and marketing goals.

Add Subtle Animations

Instead of appearing instantly, popups can fade or slide into view. Simple CSS animations make the popup feel more polished and less intrusive.

For example, a fade-in animation can be added with CSS transitions.

Adjust the Popup Delay

The popup delay is controlled by the JavaScript timer.

setTimeout(function() {

Increasing the delay to 5–10 seconds often improves user experience.

Trigger Popups on Scroll

Instead of appearing automatically, a popup can trigger after users scroll a certain percentage of the page. This makes the popup more relevant to engaged readers.

Collect Email Subscribers

Many websites use popups for email signup forms. You can embed a simple form inside the popup or link to an external service like Mailchimp.

Promote Affiliate Offers

Popups can also highlight relevant affiliate offers. For example, a popup on a tutorial page could recommend a hosting provider or website builder.

The key is keeping the popup helpful and related to the page content.

Match Your Website Design

Use the same:

• Fonts
• Colors
• Button styles
• Spacing

Promote your own product or affiliate offers subtly. For example, you can link to your affiliate landing page from within the popup.

---

Real Use Cases: When a Manual Popup Makes Sense

Manual popups are especially useful in several common situations.

WordPress.com Sites Without Plugins

Many WordPress.com users cannot install popup plugins. A manual popup solves this limitation immediately.

Minimalist Websites

If you prefer a clean, lightweight website, avoiding extra plugins keeps your site faster and easier to maintain.

Lead Magnets

Popups are commonly used to offer downloads such as:

• PDFs
• Checklists
• Guides
• Free resources

Announcements and Promotions

Popups can highlight:

• New product launches
• Limited-time discounts
• Upcoming events
• Important updates

Because the popup appears above the page content, it quickly grabs the visitor’s attention.

---

Common Issues to Avoid

• Forgetting to close your tags (</div>, </script>, etc.)
• Placing code in the wrong area (test on a staging page first)
• Overusing popups (annoying users = lower conversions)
• Using JavaScript that conflicts with your theme or builder

If you’re on a WordPress.com plan and can’t access the footer or Additional CSS, consider upgrading to the WordPress.com Business Plan to unlock full customization.

---

FAQ

Can I make a popup in WordPress with just HTML?
Yes, but you’ll also need CSS for styling and JavaScript for interactivity.

Will this method work on WordPress.com?
Yes, as long as your plan allows Custom HTML and Additional CSS. Plugins are not required.

Can I trigger a popup on scroll or exit?
Yes, but it requires more advanced JavaScript. We’ll cover that in a future guide.

Does this method slow down my site?
No, it’s lighter than using most popup plugins.

What’s the safest way to add code to WordPress?
Use a child theme, the Additional CSS panel, or a custom HTML block. Always test on a draft or staging site first.

Can I use Jetpack instead of a popup plugin?
Jetpack doesn’t include built-in popup features, but you can use its Form blocks and add them into a popup layout manually.

What if my popup doesn’t show up?
Check for typos, make sure the JavaScript is at the bottom of the page, and confirm your plan allows custom code.

Is this mobile responsive?
Yes, the example CSS uses flex and percentage widths to ensure it centers properly on all screens.

---

Final Thoughts

Creating a popup in WordPress without a plugin is easier than many people expect. With a small amount of HTML, CSS, and JavaScript, you can build a fully functional popup that works on both WordPress.org and WordPress.com websites.

This approach keeps your website lightweight, avoids plugin conflicts, and gives you full control over how the popup looks and behaves.

While plugins can offer advanced features like exit-intent detection or advanced analytics, many websites only need a simple popup to display announcements, collect email subscribers, or promote offers.

In those situations, a manual popup is often the fastest and most efficient solution.

If you prefer a plugin-based approach with more automation and targeting options, you may also want to explore our guide to the Best Popup Plugin for WordPress.