Have you been trying to figure out how to make a popup without having to download yet another plugin? Then the information below is just what you need.
Installing a lot of plugins might be a concern for your site because some of them can compromise your website’s security and slow it down significantly.
In most of my developments, I make sure not to bloat my sites with lots of plugins and trust me, there are many things you can do on your own without the need to install a plugin. A good example is a popup box or modal.
I have seen a lot of blog articles showing how to do this, but they end up asking you to create an account and copy the code to your site. I know that’s not what you want; you probably want to get every line of code seated on your site without any external reference. It’s pretty simple. I will show you how.
A typical example of the popup modal is the Contact Form seen on this website. You can activate the popup by clicking on the “Let’s Talk” button:
Custom Popup With Gravity Forms
If you’re looking to create the same popup with the forms, then I recommend you use Gravity Forms or any good one to handle the forms.
First things first, you will need to have a fair knowledge of basic HTML and CSS. I didn’t mention Javascript. Yeah, that sounds good, right? :). Let’s get started now.
1. Getting the HTML code ready
The first thing we need is our HTML code, which is basically the skeleton of the popup modal. Here is the code we will be using:
<div id="contact-popup" class="overlay">
<div class="popup">
<h5 style="text-align: center;">Let’s start a project together</h5>
<a class="close" href="#contact">×</a>
<?php echo do_shortcode( '
' ); ?>
</div>
</div>
The code above will output a popup modal with an embedded form in a WordPress environment. You can change the content based on your needs. Eg; replace the code,
<?php echo do_shortcode( '
' ); ?> With the exact content, you want to display. It’s pretty straightforward. Now let’s move to the important aspect and that is:
2. Placing the HTML code
It’s important to note that PHP is used in the WordPress environment, so at least you need to understand some basic PHP here. Note that we are not going to write PHP code. Just as mentioned earlier, we are only going to use HTML and CSS for this popup to work.
So where do we place the code? The code should be placed in the body tag of the header.php file. I recommend you place it before the closing tag. Not to get things messy, you should be using child themes for this operation. Child themes come in handy if you don’t want to lose the code after a theme update.
So let’s delve into it. Navigate to Appearance > Theme File Editor > header.php. Now paste your code just as in the image below:
Popup HTML code in header.php file
Once done, click on Update File. Now we have completed the first part of the job. Pretty straightforward, right? Yep! Let’s finish by adding our CSS code for styling.
2. Getting the CSS code ready
When we started, I mentioned that HTML was the skeletal part of the job. Now CSS is basically putting flesh on it. The code is made up of three elements: an overlay, a popup (the main popup modal) and the “Close” button. I also made a few adjustments on mobile as well, which I have detailed using the media queries. If you are new to media queries, then this article will get you started.
Below is the CSS code for this popup:
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 50;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #1e1f23;
border-radius: 5px;
transition: all 2s ease-in-out;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 80vh;
overflow-y: auto;
}
@media screen and (max-width: 576px){
.popup {
margin: 0 auto;
width: 95%;
}
}
.popup .close {
position: sticky;
top: 20px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
float: right;
background: #191a1c;
padding: 0 10px;
border-radius: 5px;
z-index: 2;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
You can always tweak this based on your preferences. Now let’s head over to implementation.
3. Placing the CSS code
Adding CSS code to your website is pretty simple. There are three ways to do this:
1. Theme Custom CSS tab:
If your theme provides a Custom CSS tab, you can use that. Simply navigate to the tab and paste the code there. Update and test if it’s working correctly.
2. WordPress Customizer:
The old-fashioned way of adding styles to your sites still works. Navigate to Appearance->Customize->Additional CSS and paste the code there. There is a mobile preview tool with which you can test your code against smaller devices to provide compatibility.
3. Style.css:
With this option, I always recommend using a child theme so your settings are not overwritten when you update your theme. Copy your code and paste it into style.css in Appearance->Theme File Editor.
That’s it. Now test your code to make sure everything is working correctly. You can always come back to make changes to the code.
Now you know how to create a popup on WordPress without the need to install additional plugins. I hope you enjoyed this article. Cheers!
Inspiration was taken from Prakash on CodePen.
