Wordpress popups without plugins
Looking at the file download logs on my newly created skkmods.com WordPress site I noticed that users were downloading the same file over and over again in quick succession, clearly not noticing the file download notification in the bottom browser bar.
That will not stand as user experience (UX) is important to the SKK brand. How hard can it be to popup a simple “downloading” notification from WordPress to a browser window when a download icon is clicked ?
Ho ho, thats too easy with # HREF some may say.
But, oh no ! Not when the download icon is generated by a php function and already linked to a custom php download handler with unique reference keys it ain’t.
Nearly 2 full days of grovelling around, thats actually how hard when you are not a wordpress/html/css/java developer.
Half a day wasted on various shortcode based plugins that are excellent at what they do, but not what is needed.
Then reading many many conflicting approaches to using onclick (observation stackoverflow and quora are full of misleading tech garbage).
Finally figuring out by first principles trial and error how to actually stitch together the HTML, CSS, PHP and JQuery needed.
As there is no single article I could find which actually explains the how and why of this in simple coherent stepwise fashion, I’ll do you the solid.
ASSUMPTION: You are are already using a WordPress child theme with a functions.php and style.css, not hacking a main theme about which is mad.
(1) The trigger element
Start with the page element you want to trigger the popup and give it a unique class. No not id as they must be unique per element and the logic becomes complicated, but JQuery can handle multiple elements in a class. Happily I’m generating the file download link icons that need to trigger the popup from a PHP function, so adding a new class is zero hassle.
class = “skk-downloadicon”
<img src="/wp-content/uploads/2021/07/SKKWindows-80x80.png" alt="Download File" class="skk-downloadicon" />
(2) Popup content
Create HTML display content for the popup and inject it onto page footers.
The class ‘skk-popupdiv’ is used by the script to find the content and switch hide/show on the page.
The code may look confusing as it is PHP which injects HTML into the page footers using a PHP wrapper. Ouch ! The file to edit is ChildThemeFolder/functions.php
class = “skk-popupdiv”
/* SKK popup div and content*/
add_action('wp_footer', 'skk_createpopupdiv');
function skk_createpopupdiv()
{
?>
<div class="skk-popupdiv">
<a href="javascript:void(0)">
<p><img src="/wp-content/uploads/2021/08/SKK-file-downloading.png" alt="" width="256" height="256" /></p>
</a>
</div>
<?php
}(3) CSS Style
A slight of hand is using CSS content style to hide and show the popup content. In step 2 the content was injected into page footers and will be visible there unless it is hidden.
Add a CSS class style to your child theme syle.css file with the popup content class skk-popupdiv set default to not display (be invisible). Do not use the visible property as that hidden content will still take up space on the page which may affect your normal layout.
.skk-popupdiv{
display:none;
}
(4) Modal dialog generator
You could probably hand roll this with Javascript and CSS but I found Custombox which saved that shag ‘n hassle. Copy the files to a folder under your child theme, I used ChildThemeFolder/custombox.
(5) Onclick (actually just click)
Create a JQuery file that detects when the page element with class skk-downloadicon is clicked to unhide skk-popupdiv then trigger the Custombox modal dialog to pop using skk-popupdiv content. Note the leading dot (.) is needed on the class name.
This script also removes the popup overlay when it is clicked and hides the html content again. The file to edit is ChildThemeFolder/js/skk_popup.js
jQuery(document).ready(function($) {
$(document).on('click', '.skk-downloadicon', function() {
console.log('skk_popup.on.click.skk-downloadicon');
$(".skk-popupdiv").css("display", "block");
var modal = new Custombox.modal({
content:{
target: '.skk-popupdiv',
effect: 'fadein',
width: 256,
}
});
modal.open();
});
$(document).on('click', '.skk-popupdiv', function(e) {
Custombox.modal.close();
$(".skk-popupdiv").css("display", "none");
location.reload();
return false;
});
});(6) Register scripts with wordpress
Finally register the new scripts in child theme functions.php. I am both registering and then enqueueing for full-fat future flexibility. The file to edit is ChildThemeFolder/functions.php
/* SKK scripts */
add_action('wp_enqueue_scripts', 'skk_scripts');
function skk_scripts()
{
wp_register_script('jquery-custombox', get_theme_file_uri('/custombox/custombox.min.js'), array('jquery'), false, false );
wp_register_style ('custombox', get_theme_file_uri('/custombox/custombox.min.css'));
wp_register_script('skk_popup', get_theme_file_uri('/js/skk_popup.js'), array('jquery', 'jquery-custombox'), false, true );
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-custombox');
wp_enqueue_style ('custombox');
wp_enqueue_script('skk_popup');
}(7) Profit !
That’s around 16 hours work saved to deliver a simple user experience if you have no idea what your doing and digging through nonsense on the internet.
This documents a simple stripped out solution. The site actually has a heap of extra logic to only inject footers and enqueue scripts on the portfolio type pages that actually need them.
