How to Create a WordPress Popup Without a Popup Plugin (Free Method)

If you’re looking to announce a sale, expand your email list, or give departing visitors one last compelling reason to stay, a popup is a practical option to consider. However, installing a complete plugin dedicated to popups just for a single overlay might seem excessive, akin to hiring a moving company for just one suitcase.

For sites already leveraging the WordPress block editor (known as Gutenberg), there’s a more straightforward approach. The free Otter Blocks plugin includes a Popup block that integrates directly into the editor, making the popup merely another block on the page rather than a complex system requiring extensive learning, updates, and troubleshooting.

Quick note: Otter Blocks is developed by Themeisle, the same team that powers this blog. The main guide below only utilises the free version, with Pro features clearly marked.

In this guide, you’ll discover how to install Otter, create a timed popup through a step-by-step process, utilize scroll and exit-intent triggers, manage frequency settings, mobile responsiveness, and the UX principles that distinguish benefi­cial popups from those that frustrate users. Additionally, we’ll address the inherent limitations, as there are times when a dedicated popup service really is the best option.

Let’s get started!

DISCLAIMER: Otter Blocks is part of the Themeisle family. This tutorial uses the free version from WordPress.org, and any Pro features are noted as such.

Step 1: Set Up the Free Otter Blocks Plugin

Otter Blocks adds more than 20 blocks to the editor, with the Popup block being one of the available free options. The plugin powers over 300,000 sites and boasts a 4.7 out of 5 rating on WordPress.org, making it a reliable choice.

1. Navigate to Plugins → Add New in your WordPress dashboard.
2. Type Otter Blocks into the search bar.
3. Click Install, then hit Activate.

That’s the installation complete. A new Otter section will now be visible in the block inserter, complete with the Popup block.

To add the popup, open the post or page where you’d like it to appear. (On a block theme, the Site Editor can also accommodate the block, which is especially useful for popups intended to follow a template.) Click the + button to insert a block, search for Popup, and then add it.

Next, Otter will ask you which layout you wish to use. You can choose from three options:

• Start from scratch: a blank canvas for total control.
• Text and Image: a pre-structured layout featuring a placeholder title, text, and an image—ideal for promoting a download or course.
• Popup with Form: a registration layout containing a form that adopts your theme’s colours and fonts—perfect for newsletter subscriptions.

For this guide, select Popup with Form. The instructions that follow will also apply to the other two options.

Click Edit Popup on the block to open the popup in its own separate canvas. Everything available in the block editor can be used here: headings, paragraphs, buttons, images, icons, and even a countdown block for urgent sales.

For a newsletter sign-up, adjust the headline to clearly convey the benefit (“Receive a practical WordPress tip every week”), condense the body text to just a couple of sentences, and modify the button to specify the next step. A button labelled Subscribe typically performs better than one labelled Submit.

Next, click on the Popup block itself (not the contents inside) and navigate to the Style tab in the sidebar. This is where you’ll set the dimensions of the popup, with width adjustable for desktop, tablet, and mobile views, including height and padding. Background colours, overlay, border styles, and button appearance can also be configured here, alongside overlay transparency, border radius, shadows, and the close button’s position (inside or outside the popup).

One point to remember: entrance animations apply to the blocks contained within the popup rather than to the popup as a whole, so consider adding movement to the inner content if the design calls for it.

PRO TIP: Maintain a single message and action per popup. If the popup content is lengthy enough to warrant scrolling, it’s likely too much information. Splitting it into smaller segments often leads to increased conversions.

Step 4: Select the Trigger

This setting determines whether your visitors find the popup engaging or frustrating. Click on the Popup block, navigate to the Settings tab, and look for Open Trigger. The options available are:

Choose On Load for a classic timed popup and set a Trigger Delay of 10 to 15 seconds. This provides visitors with a chance to actually engage with the page before any overlay appears. Instant popups that appear without delay can be jarring, much like a store greeter who blocks the entrance.

The anchor click trigger deserves special mention as it is the most courteous option: the popup is shown only when the visitor specifically requests it. Set the anchor under Frequency & Close Settings (e.g., download), then link any button to #download. Clicking the button will trigger the popup.

The scroll, exit, and anchor triggers are part of Otter Pro, starting at $69 per year for a single site at a special introductory price (renewals revert to the full cost). The free On Load trigger, provided you set an appropriate delay, typically meets most basic needs, upgrading only when the advanced triggers would genuinely be beneficial.

Step 5: Configure Frequency, Position, and Close Options

Still located in the Settings tab, navigate to Frequency & Close Settings. Here are the key elements:

• Enable the close button to prevent users from feeling restricted.
• Close when clicking outside the popup: activate this option as it offers a necessary escape route for visitors.
• Dismiss for returning visitors (Pro): after a visitor closes the popup, hide it from them for a specified number of days. Starting with seven days is a reasonable approach.
• Close on anchor click (Pro): this setting closes the popup when a specific anchor is clicked, a beneficial feature for custom dismiss links.

Next, the Popup Position section governs where the popup displays on the screen, with unique adjustments for each device. Centering works best for offers, while positioning it in a corner can be more subtle for announcements.

There’s also a toggle for Disable Page Scrolling. When enabled, the background page will stop scrolling until the popup closes. This function should be reserved for genuinely essential messages (like maintenance notices), as it can raise annoyance levels for other content.

After making the changes, click Update, then open the page in an incognito window to verify the popup appears as intended. It’s essential to test in incognito mode once a dismissal rule is active since the popup retains memory of returning visitors.

Mobile Behaviour: The Default Setting is Off

Each Otter popup comes with a straightforward decision: display it on mobile devices or not. For timed and exit popups, the polite default should be not to show them.

On a mobile device, even a modest popup can dominate the screen, with a close button that may be challenging to access. The exit intent feature also faces a technical limitation, as it relies on cursor movement tracking, which is absent on mobile.

From an SEO perspective, it’s worth noting that Google has stated that intrusive interstitials (popups that obscure the primary content) can negatively impact a page’s mobile search rankings, with some exceptions for messages like cookie notices. A full-screen newsletter popup on a mobile device falls squarely under this guideline.

The ideal configuration: turn off mobile display for timed popups, and for genuinely necessary offers, opt for an anchor-click popup linked to a standard button instead. This approach patiently waits for users to tap.

Popups have garnered a poor reputation—deservedly so. The distinction between a popup that leads to conversions and one that prompts users to close the tab largely hinges on timing and restraint:

• Polite triggers prompt after a clear signal. Exit intent and scroll depth allow the visitor to engage first, while timed on-load popups are somewhere in between. Instant on-load popups tend to alienate.
• Limit to one popup per page. Layering an exit popup over a timed one is not a strategy; it feels like an ambush.
• Implement a frequency cap. If a visitor closes the popup today, they shouldn’t encounter it again the following day.
• Maintain relevance. A popup that aligns with the current page topic appears helpful; a generic one is perceived as an ad.
• Facilitate easy closing. Users shouldn’t have to hunt for a tiny close icon.

Adhering to these five guidelines can transform the popup from a necessary evil to a useful tool that many visitors may appreciate.

Candid Limits: When a Dedicated Popup Plugin is Preferable

While Otter’s Popup block efficiently manages creation and display, its capabilities end there. It lacks a built-in analytics dashboard for tracking views and conversions, as well as native A/B testing for comparing different popup versions.

At this point, dedicated popup tools offer a superior experience. For instance, Popup Maker includes analytics that monitor views, interactions, and conversions in its paid tiers. It also provides advanced targeting options such as source referrer, geolocation, and scheduling. For websites executing comprehensive and continuous campaigns, this data-gathering spin is crucial.

The conclusion is straightforward: for a sale announcement, content upgrade, or a basic sign-up popup, Otter is sufficient and reduces the number of plugins you need to manage. Conversely, for ongoing campaigns where every impression and variant is meticulously measured, adopting a dedicated plugin becomes justified.

Conclusion

In summary, here’s the recap of the entire process:

• Install the free Otter Blocks plugin.
• Add the Popup block and choose a layout (Popup with Form typically meets most newsletter requirements).
• Craft a single clear message accompanied by one call to action.
• Determine the trigger: On Load with a 10 to 15 second delay using the free version, or consider the scroll, exit, and anchor triggers available in Pro.
• Configure frequency and closing settings, then deliberate carefully about mobile display.
• Conduct testing in an incognito window before finalising everything.

If you’re new to the block editor, the Themeisle block editor tutorial offers insights on basic concepts that this guide skimmed over, while the popup utilisation guide elaborates on the benefits and best practices of popups for capturing leads.

Do you have a preferred popup trigger, or a pet peeve about popups you’d like to discuss? Share it in the comments below!

FREE GUIDE

4 Essential Steps to Speed Up Your WordPress Website

Follow our straightforward 4-part mini series to cut your loading times by 50-80%.

Hooray! You’ve completed the article!