How To Add Popup In WordPress Without Plugin

Adding popup in WordPress with the help of plugins is very simple. You just need to install one of the best popup plugins available in the market, set up the popup, and show it on whichever page you want.

But, what if you want to add a popup without using any plugin because most of the features of the popup plugins are not free?

If so? then you are in the right place.

Here, we have shown the step by step guide to creating a popup in WordPress without using any plugin.

Now, you might be thinking that you need a good knowledge of HTML, CSS, Bootstrap, or Javascript in order to create a popup and display it on a button click. Right?

But in this tutorial, you really don’t need to have an expertise in these languages, you can simply copy and paste the code as I have shown in the steps below. However, if you are familiar with these languages then it will be a plus point for you as you can modify the popup content or its functionalities.

Add Popup In WordPress Without Plugin

Let’s begin with our first step.

Step 1) Creating A Modal Popup Using Bootstrap/HTML

The first step is to create a Bootstrap’s Modal Popup.

Modals are the components of Bootstrap built using HTML, CSS, and Javascript. These modals are placed before everything else in the document.

Modals contain the body where you can add the code of your sign up form or anything else you want to show in your Modal popup. The modal also contains the “backdrop” button through which you can close the modal.

Let’s make our first modal with a simple sign up form.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content" style="margin-top: 160px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel" style="text-align: center; font-family: 'Montserrat'; font-size: 20px;">Example Sign Up Form</h4>
      </div>
      <div class="modal-body">
        <form class="form" id="myForm">
    
            <div class="form-group">
              <label for="inp_name" style="font-family: 'Montserrat';">Name</label>
              <input type="text" name="inp_name" id="inp_name" class="form-control" style="margin-top: 12px;" required>
            </div>
    
            <div class="form-group">
              <label for="inp_phone" style="font-family: 'Montserrat';"> Phone Number </label>
              <input type="tel" name="inp_phone" id="inp_phone" class="form-control" required>
            </div>
    
            <div class="form-group">
                <label for="inp_email" style="font-family: 'Montserrat';"> Email </label>
                <input type="email" name="inp_email" id="inp_email" class="form-control" required>
              </div>
    
            <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Submit</button>
            </div>
    
          </form>
      </div>
    
    </div>
    </div>
</div>

In this modal’s body, we have created a simple sign up form. In this sign up form, we have created three input fields that are name, phone, and email. And in the bottom, we have a submit button.

If you are familiar with HTML, you can add more fields to it or modify it, completely depend upon your needs.

Step 2) Creating On-Click Button Action Using JQuery/Javascript

We have created our modal popup. Now we have to create an on-click button action with the help of a Jquery script. You can also create it using Javascript.

<script>
 jQuery(document).ready(function( $ ){
    $('#buttonid').click(function(){
  	$('#exampleModal').modal('show')
	});
});
</script>

In the above Jquery script, you have to replace “YourButtonId” with the id of the button that you have created to show the popup.

For example,

<button id=”buttonid” type=”submit” class=”btn btn-primary”>Submit</button>
As you can see that the id of the button defined in the above syntax is “buttonid”. Now, upon clicking on this button, the Jquery script will trigger the modal popup to show in our browser’s window.
Now, you have to replace “YourModalID” with the id of the modal. In my case, the id of my modal is “exampleModal”.
So the final Jquery script created after replacing the modal id as well as button id.
<script>
  $(document).ready(function () {
      $("buttonid").click(function () {
      $("#exampleModal").modal('hide');
      })
  })
</script>

Step 3) Adding The Modal Popup On A Page

Now we have created our Modal popup as well as the on-click Jquery script which triggers the popup on button click. Now the final step remaining to add the popup on a page.

Step 3.1) Create a page using Elementor. If you want to add the popup code in the widgets section then you can go for it too. Here, I am just creating a fresh page using Elementor.

add a popup without plugin

Step 3.2) Now add an HTML widget to place our Modal code.

Step 3.3) We have placed the Modal Code in the HTML widget. Now we have to add the Jquery script into our site. For that, we will have to install “Simple Custom CSS & JS”. 

Simple Custom CSS and JS plugin in WordPress

After installing and activating, click on “Add Custom JS”.

Now copy the on-click Jquery function script and paste it into the editor.

Now, click on the “Publish” button. After it is published, copy the permalink address and wrap it under <script src=””> tag.

In my case, I will wrap the link in the <script> tag like this:

<script src="https://pickhisbrain.com/wp-content/uploads/custom-css-js/6898.js"></script>

Now copy this whole script tag and paste it above the modal popup code in the HTML widget.

adding HTML in elementor page - add a popup in wordpress without plugin

Step 3.4) After placing all the codes in their places. We just need to create a button with the button id as “buttonid”.

For creating a button, drag the button widget and edit the button id as shown in the screenshot below.

Adding button in Elementor - add a popup in wordpress without plugin

That’s it. Now publish the page and you have successfully added a popup in WordPress without plugin.

add a popup in wordpress without plugin

Wrapping-Up

This tutorial was all about adding a popup in WordPress without using any popup plugins. We created a Bootstrap’s modal, an on-click button action function using JQuery, and an HTML button. Then we put them together on our page.

The Bootstrap modal is hidden on the page, it only appears in the form of popup upon clicking on the button which triggers the modal.

Things to check before testing your popup modal:

  • Make sure the Button id is the same as you have used in the JQuery function.
  • Make sure that the Modal id is the same as you have used in the JQuery function.

Read More: 10 WordPress Plugins You Must Install Right After Creating Your Website

Leave a Comment