A while ago, I wrote a post about the greatness of Magnific Popup (MP), as one of the best — or even the best — modern lightbox solutions. Today, I added MP to my WordPress-driven website. It’s a fairly simple approach, you can easily repeat this.

1) Add MP files to your theme’s directory

Create the directory magnific-popup in your theme’s directory. Download the MP CSS and JS files from GitHub and put both in the magnific-popup directory:

• jquery.magnific-popup.min.js
• magnific-popup.css

Then, create a file named jquery.magnific-popup-init.js in the magnific-popup directory. It should have the following content:

jQuery(document).ready(function($) {
    $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]').each(function(){
        if ($(this).parents('.gallery').length == 0) {
            $(this).magnificPopup({
                type:'image',
                closeOnContentClick: true,
                });
            }
        });
    $('.gallery').each(function() {
        $(this).magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {enabled: true}
            });
        });
    });

(This is JS code to be executed in the client’s browser, it scans the HTML document for anchors (links) to image files, and modifies the corresponding HTML elements for integration with Magnific Popup. You may want to adjust it according to the MP docs)

2) Register the MP files with your theme

In order to register the newly placed files with WordPress and your theme, modify the functions.php file of your theme. Add the following code:

add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_styles');
function enqueue_magnificpopup_styles() {
    wp_register_style('magnific_popup_style', get_stylesheet_directory_uri().'/magnific-popup/magnific-popup.css', array('YOUR-THEME-STYLE-NAME'));
    wp_enqueue_style('magnific_popup_style');
}
 
add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_scripts');
function enqueue_magnificpopup_scripts() {
    wp_register_script('magnific_popup_script', get_stylesheet_directory_uri().'/magnific-popup/jquery.magnific-popup.min.js', array('jquery'));
    wp_enqueue_script('magnific_popup_script');
    wp_register_script('magnific_init_script', get_stylesheet_directory_uri().'/magnific-popup/jquery.magnific-popup-init.js', array('jquery'));
    wp_enqueue_script('magnific_init_script');
}

This makes sure that the MP resources become incorporated in the HTML code of your website. See YOUR-THEME-STYLE-NAME there above? You need to replace it with the internal stylesheet handle name of your theme. It is important to do so, it makes sure that WordPress loads the MP CSS after your theme’s CSS. This, in turn, is essential so that MP’s CSS can override certain styles (otherwise the MP styling might be broken, it was in my case). For me, YOUR-THEME-STYLE-NAME would be twentytwelve-style. If you are not sure what this name is for you, you can find it out. Have a look at my blog post WordPress: theme stylesheet handle name.

That’s ist, you are done. Image file anchors in your blog posts or pages are now automatically handled by the Magnific Popup JavaScript code.

It should be straight-forward to create a small WP plugin for this. However, the author of MP has plans for an “original” version of a MP WordPress plugin, possibly with far more features and a nice admin interface.