How to create a WordPress image popup without plugin

You are probably faced with a situation where you had to add a simple popup and you find out that you have to use a plugin. Although we have very strong and powerful plugins that we can use for this purpose and I really don’t have anything against them in this short tutorial I want to show you how you can create your own popup without any plugin.

You will end up with a simple solution and you will not hurt your web performance.

Let’s start 🙂

1. We need a popular popup jQuery library called Magnific popup

You can download it from here Magnific Popup and extract it.

2. Using FTP manager (FileZilla) open your theme folder (child theme) and upload the Magnific Popup library (I prefer to create an assets folder in your theme so you have everything well organized, and upload Magnific Popup library there).

3. We need a JS file where we will write our small script. So, for that purpose, we will create a new file in your theme folder and name it: custom-popup.js.

(I prefer to create it and save it in the assets/js folder because of better file organization).

4. We need to call the Magnific Popup library and the newly created file from the previous step.

To do so, please open your functions.php file from your theme and paste this code:

// Custom popup
function cs_custom_popup_call() {

    // Magnific Popup
    wp_enqueue_style( 'magnific-popup-css', get_stylesheet_directory_uri() . '/assets/magnific/magnific-popup.css' );
    wp_enqueue_script('magnific-js', get_stylesheet_directory_uri() . '/assets/magnific/jquery.magnific-popup.js', array("jquery"), false );
    wp_enqueue_script('magnific-js-2', get_stylesheet_directory_uri() . '/assets/magnific/jquery.magnific-popup.min.js', array("jquery"), false );

    // Custom JS file 
    wp_enqueue_script('custom-popup', get_stylesheet_directory_uri() . '/assets/js/custom-popup.js', array("jquery") );

}
add_action( 'wp_enqueue_scripts', 'cs_custom_popup_call' );

5. In a newly created JS file (from step 3) put this code:

jQuery(document).ready(function($) {

    $(".image-popup").magnificPopup({
        delegate: 'a',
        type: 'image',        
        closeOnContentClick: true,
        closeBtnInside: false,
        mainClass: 'mfp-no-margins mfp-with-zoom',
        zoom: {
            enabled: true,
            duration: 200
        }
    });

});

How to use this?

You just need to use a defined class (in my case it is image-popup) in your link (a tag)

E.g.

<div class="image-popup">
    <a href="https://www.conicsolutions.net/wp-content/uploads/2021/11/Web-Development-and-Maintenance.png">
        <img width="350" src="https://www.conicsolutions.net/wp-content/uploads/2021/11/Web-Development-and-Maintenance.png">
    </a>
</div>

Below is my example: