How To Create Custom Popups for WordPress From Scratch
In order to achive this feature you normally need to install a plugin and then create any popups for wordpress you want. But in this tutorial I will show how to do this feature on your own using PHP, jquery and few lines of css. The popup content will be administrable from admin and you will be able to create any design you want for the popup.
There are a lot of benefits doing the popup on your own:
- The most important is that you will have full access on your code and you can change it whenever you want
- You will have control over the design and popup structure
- You can choose when the popup should appear
- Few lines of code
Create Custom Popups for Wordpress
For this tutorial we will use magnific popup and ACF. Please go on google and download the magnific popup and add it to the wordpress. If you don't know how to add the magnific popup in wordpress follow these steps:
Add js file and css file in css and js folder of your theme.
Open up header.php -> in the <head></head> section add the following code:
<link rel="stylesheet" href="<?=get_template_directory_uri();?>/css/magnific-popup.css">
Open footer.php -> add the following right before the wp_footer() function.
<script type="text/javascript" src="<?=get_template_directory_uri();?>/js/jquery.magnific-popup.min.js"></script> <script type="text/javascript" src="<?=get_template_directory_uri();?>/js/main.js"></script>
If your files use other paths then mine, don't forget to change them.
Now let's create the fields in admin for our popup. To do that we will use ACF (is a wordpress plugin which creates the admin as you want). If you don't already have it, download because it's the best plugin at this moment.
First of all we will create an option page, to do that, we have to add the following code in our functions.php file:
if( function_exists('acf_add_options_page') ) {
acf_add_options_page();
}
Then, go in admin and open Custom Fields and create a new group. At location select Options Page - Options and let's create three new fields:
Popup Title - popup_title
Popup Description - popup_description
Popup Image - popup_image
And press Save button. Now open Options page and add some lorem ipsum to these fields in order to be list them on the front.
Let's create the html structure of our popup.
<?php
$popup_title = get_field('popup_title', 'options');
$popup_description = get_field('popup_description', 'options');
$popup_image = get_field('popup_image', 'options');
?>
<div id="popup_container">
<div class="popup_container_inner">
<div class="top_details">
<?php if(!empty($popup_title)):?>
<div class="title">
<h2><?=$popup_title;?></h2>
</div>
<?php endif;?>
<?php if(!empty($popup_description)):?>
<div class="description">
<p><?=$popup_description;?></p>
</div>
<?php endif;?>
<?php if(!empty($popup_image)):?>
<div class="image">
<img src="<?=$popup_image['sizes']['square'];?>">
</div>
<?php endif;?>
</div>
</div>
</div>
In the first part we get our fields we have just created in admin. Then if the fields are not empty we show the information. At this moment we have admin fields created, the structure of the popup is ready, we need to add some js code to make it open. To do that open main.js file and add the following code:
function init_popup(){
jQuery.magnificPopup.open({
items:{
type:'inline',
src:'#popup_container'
}
});
}
jQuery(function(){
setTimeout(function(){
init_popup();
}, 5000);
});
The above function will call init_popup() function on document ready after 5 seconds. However, if you want to open the popup when you click a button you can remove the setTimeout() function and call function on click action.
The last part of this tutorial is to add few lines of CSS in order to look like a popup. Open your style.css file and add the following lines of CSS:
#popup_container{
max-width:640px;
margin:0 auto;
display:block;
padding: 40px 30px;
background:#fff;
position:relative;
}
#popup_container .top_details{
text-align:center;
}
#popup_container .image {
max-width: 230px;
margin: 0 auto 40px;
}
#popup_container .title h2 {
font-size: 28px;
font-weight: 500;
}
@media all and (max-width:460px){
#popup_container .title h2 {
font-size: 18px;
}
#popup_container .image {
max-width: 180px;
}
}
That's it. Now you have a fully working popup for your wordpress. Anyway, that's only the beginning because you can improve the popup as you want. If you encounter any errors or problems with this implementation let me know and I will try to help you.