How to add Magnific Popup to your WordPress blog

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:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Human? Please fill this out: * Time limit is exhausted. Please reload CAPTCHA.

  1. Vaibhav Avatar
    Vaibhav

    Thank you so much.

  2. download triplets of belleville How are You, you must see those sites property ads and friendship and mobile phones

    How are You, you must see those sites property ads and friendship and mobile phones

  3. FurkBarrel Avatar
    FurkBarrel

    @Josh Rodgers The same issue happened to me, I fixed it by changing the wrapping div’s class name to “” (it was previously , as what is used on the original Magnific Popup site).

  4. […] Resources: gehrcke.de/2014/02/how-to-add-magnific-popup-to-your-wordpress-blog/ […]

  5. Josh Rodgers Avatar
    Josh Rodgers

    Hey there, the script works great, but all of the images open as single images…any way to add next and previous links?

  6. Supsystic Supsystic Avatar
    Supsystic Supsystic

    Hi there!

    I find good popup plugin and recomend it for you. You can find it from this site: http://dev.supsystic.com/plugins/popup-plugin/

  7. Jamie McArdle Avatar

    Worked a treat! Thanks so much.

  8. Donna McMaster Avatar

    Thanks so much! I had been struggling with this myself, and found your solution to very clean, quick and simple to implement.