Create a popup in WordPress without plugin

Popups are a good way to increase user interactions on your website as well as collect quality leads on a campaign. Creating popups without any premade WordPress plugin can be a hassle, that’s why in this article you’ll learn How to create a popup in WordPress without plugin.

You won’t be using any dependencies that might make your site heavy or load slower. Simple Vanilla javascript is the way to go.

If you’re following our ‘No Plugin tutorials‘, you probably have a custom snippet inserter plugin that lets you insert code blocks into your WordPress website without any extra fuss.

Why Custom Code?

There are a lot of popup generators in the market which let you design your popup in a GUI platform with a drag and drop tool and then provide a specific API-based link that you need to paste to your site in order to make the popup work.

Problems you might face with that solution are of two types, related to security and Pricing. Most of them are paid, if not once the free trial period is over you need to break your bank. Another reason could be a potential threat to installing third-party scripts. The risk of data theft could always be there when you’re linking JS files from another website.

Related: How to create a Popup Signup Login form

With your own custom-coded popups, you can customize it just the way you want with simple knowledge of HTML, CSS, JS. If you’re not proficient in those, consider reaching us & we’ll help you with that.

Add Popup Codes

A custom snippets plugin would benefit the situation as you’ll be having complete control over your popup even after the theme of the website gets changed or updated.

Tweak the provided code as you want. Forms, any type of HTML Elements can be added and styled as well. Go creative and make things happen with your popup just like you wanted.

HTML

JS

CSS

How to add code?

Not sure how to add the code to your website? Simply visit the article on ‘2 Ways To Customize WordPress Login Page Without Plugins’ Where I’ve explained how to add custom codes to your WordPress website both Manually and using the Code snippets plugin.

For Complex Popups

The previous method of using custom code is limited to adding simple span and customizing to a limit though If you want to integrate something apart from adding simple forms and elements, you need to put your hands on some third-party alternatives.

As discussed before, Third-party alternatives might not be as reliable as your own written code though they are easy to create and flexible to use.

The platform I’ll be using for this tutorial is Popupsmart. It’s easy to set up and install on your WordPress site.

Open Popupsmart

Upon opening the Popupsmart, sign in and navigate to the Dashboard area from the top navbar. Click on ‘Create New popup’.

Choose an objective

Choose any of the given Objectives, each having specific algorithms of collecting data from users and fetching separate information to you as an admin.

Editing Popup

Edit your popup by choosing any of the given templates, Check the responsiveness of your designs.

Add a trigger to the Popup, upon clicking the teaser popup shall appear. Keep it clean and attractive at the same time.

Choose a popup behavior if you’re opting for the smart mode. Remember it might add some extra bulk code to your site eventually slowing down pages on the site.

Before publishing the popup and availing of your custom code you get to choose, Google Analytics Integration, Respondent Email Notifications, On-Click Popup Button Creator, and many other features.

Remember, before publishing you need to verify your site via adding a code snippet, If you’re not willing to add that code due to security purposes as consulted before, consider the first custom code method.

So this was a complete tutorial on ‘How to create a popup in WordPress without plugin’. Hopefully, it was helpful to you, if you’re having trouble reaching us via comments & we’ll reach you as soon as possible.