Open WordPress Post in Modal Without Plugin

By December 8, 2015Blog, jQuery, Wordpress
WP Post Popup Banner

This is really cool. It’s a very lightweight, cross-browser compatible, modal functionality that can easily be integrated into WordPress. You can dynamically show any WordPress post within a modal window. This method is much better than using a plugin if you’re coding a custom theme because it has significantly less bloat than any available modal plugins.

Some of the features:

  1. jQuery only, not other JS libraries
  2. Load any post dynamically
  3. Just 35 lines of JS code
  4. Active only above 767px (tablet and larger)
  5. Shows only post content; no header/footer/unneeded sections
  6. On mobile devices, goes to post permalink instead of showing modal

Below is an example from CodePen. It shows the loading of just static content on the page, but the comments explain how to modify for WordPress. Also, below the code, I will discuss some additional modifications needed for WordPress.

The final piece of making this work for WordPress is to set what gets displayed inside the modal. We don’t want all of the header and footer and sidebar stuff to display, so we need to somehow get rid of that. We do that by checking whether the request to open that page come from a GET request or not. So open up your template file for the content that will be opening in the modal. Then weย wrapย the content we only want to show on mobile (where the modal doesn’t load) in the following PHP:

<?php if (!$_GET) { ?>
    // content that gets loaded on mobile
<?php } ?>

Below is an example of a very minimal WordPress page template. In the modal, only the title and content will load when the page is loaded through the modal (on tablets and larger screens). When the page is loaded on a mobile device, it will open up the full page template without hiding the get_header() and get_footer() functions.

<?php if (!$_GET) { get_header(); } ?>

<article>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <h1 class="page-title"></h1>

  <section class="entry-content cf">
    <?php the_content(); ?>
  </section>

</article>

<?php if (!$_GET) { get_footer(); } ?>

Updated Solution for WordPress

The above solution requires fumbling around with if(!$_GET) and having to edit the page template to select which part of the page gets displayed inside the modal. A simpler, though less customizable alternative to this

modalContent.load(post_link + ' #modal-ready');

Then we would wrap the content of the page (inside the WordPress WYSIWYG) with div with an ID of modal-ready.

If you want to wrap all your code automatically, you can add this function to your functions.php file in your theme:

/**
 * Wrap content
 *
 * @return string
 *
 * @since   1.0.0
 */
add_action('the_content', 'wrap_content');
function wrap_content($content)
{
    return '<div id="modal-ready">' . $content . '</div>';
}

Also, don’t forget to include the HTML for the modal wrapper somewhere in your theme. Again, if you want it added automatically to the footer (don’t worry, display of the modal is controlled by CSS), you can use the following function in your themes functions.php file:

/**
 * Display Modal wrapper
 *
 * @since   1.0.0
 */
add_action('wp_footer', 'modal_wrapper');
function modal_wrapper()
{
    $HTML = '';
    $HTML .= '<div class="modal-wrapper">';
    $HTML .= '<div class="modal">';
    $HTML .= '<div class="close-modal">X</div>';
    $HTML .= '<div id="modal-content"></div>';
    $HTML .= '</div>';
    $HTML .= '</div>';

    echo $HTML;

}

I’ve created a plugin that does this all automatically.

WP Post Popup Icon

See Plugin on WordPress.org

Allure Github Repo

The plugin automatically adds the modal-ready ID to page content. To open a page in a modal, simple add the class modal-link.

If you want to show an external page in the modal, add the attribute data-div="#id" to your .modal-link where the id is the container on the target external page that you would like to display inside the modal

Internal Link Example: <a class="modal-link" href="/modal-page">Open Internal Page in Modal</a>

Externalย Link Example: <a class="modal-link" href="http://www.onion.com" data-div="#container">Open Onion Page in Modal</a>

New Solution Using REST API

Version 2 of the plugin brought a new method for pulling page content. We are no longer hooking into the content to wrap it in a “modal-ready” class. The latest solution uses the WordPress REST API trough a custom API route that pull content from any post type.

Also, version 2 has some cool new plugin settings and an editor button for inserting the modal link.

Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Join the discussion 53 Comments

  • Andrea says:

    i really want to thank you!
    This was the perfect start point for my work!

    I’d like to share my elaboration with you and all the other user, how can i do?

    • Andrea, I’m happy you found this useful.

      I’d love to see your elaboration. Please post it in the comments. If you need to paste code you can use the available HTML tags or if you want to share a working example, paste a list to codepen or jsfiddle.

      Of course if you want to have a guest blog post here, that would be great too!

  • Pogz says:

    Hello,

    any examples on wordpress theme? Is its possible to make it like here www. o2. pl ? when You click link it’s showing modal popup with content article

    Regards

    • Hi Pogz,

      I created a plugin for this functionality if you want to use it instead of coding from scratch (I have submitted it to WordPress.org and it’s awaiting approval): https://github.com/allurewebsolutions/wordpress-post-modal

      Please check the Updated Solution for WordPress as I describe a simplified method for integrating this functionality. You don’t have to make many edits to your theme if you don’t want to and can just add two functions to functions.php.

      Let me know if this helps or if you need additional help ๐Ÿ™‚

      -Mike

      • pogz says:

        I’ve installed plugin, now I have to put my single post theme to modal window ๐Ÿ˜‰ But how to manage URL for article in modal like here, it’s always opening when you share or copy paste link like here http://www.o2.pl/hot/nie-uwierzylbys-ze-dwa-razy-rodzila-6079371034539137g

        THANK YOU VERY VERY MUCH ๐Ÿ™‚

        • Pogz, I’m not sure what you mean by “article”. If you mean an external URL, then you would need to use a “PHP ajax proxy”.

          I’ve gone ahead and updated the plugin to include functionality for external links. All you need to do is add the attribute data-div="#id" to your .modal-link where the id is the container on the target external page that you would like to display inside the modal.

          Just pull the latest changes and checkout tag 1.1

          • pogz says:

            no no it’s the same page but when you are coming from facebook or from mail or other source to article, it opens site with popup see screen http://wrzuc.se/images/587a3de28fabd.jpg . I was messing with my page template but without luck yet -> http://bit.ly/2jbkAwF

            Regards

          • It seems like every single article page is opening up in that modal window.

            I’m not really sure how you implemented the plugin or why every single article page is opening in a modal (that sort of functionality is definitely not part of the plugin). I think to help more, I would need to take a look at your code.

            Feel free to message me on Skype @mike.doubintchik.

  • pogz says:

    Yes, it’s made not by the plugin, I’ve made theme modifications so single article is looking like in a modal, and I want to make same with Your plugin becouse it’s loading on demand when somebody clicks, not reloading all page ๐Ÿ˜‰

  • Gycionka says:

    Any ideas why I only get this box? https://puu.sh/ubN4C/5fd727413c.png

  • Olivier says:

    Hi,
    great lightweight plugin thanks.
    I wonder if it’s possible to get custom meta fields or ACF fields into the modal window ?
    I have some basic notions of development so maybe you could just hilight file(s) i should focused on ?

    Thanks again,

    • Mike Doubintchik says:

      @Olivier, thanks for the kind words!

      You can definitely get the custom meta fields or ACF fields to appear in the popup. To do so, you would need to create or modify an existing page template (which contains your custom fields) and make sure they are all (including the content) wrapped within a container with id="modal-ready".

      If you have specific questions, we can connect on Skype to discuss.

  • Victor says:

    Not work on http://acadregmed.com/ru/home-ru/ ๐Ÿ™
    What trouble?

    Install plugin from finish zip archive.
    Push the Activate.

    Put some Open Onion Page in Modal on Main Page.

    Help me please.

    • Mike Doubintchik says:

      Victor, you need to specify the data-div attribute on the link which points to the ID of a container on the target site, that you want to appear in the modal.

  • Victor says:

    Thank you for your interest.
    The problem remained. Possible conflict of jquery libraries? Or the version of WP.

    I Can make a donation for the help ๐Ÿ™‚ Thank you from Ukraine.

    • Mike Doubintchik says:

      This will need some investigating. First of all, I recommend installing the plugin from WordPress.org so that you can get future updates(unless you will be making customizations to the plugin itself): https://wordpress.org/plugins/wp-post-modal/

      After that, please create an admin account for me and send me the login details from my contact page (or on any of my social media profiles).

      Donations and referrals always appreciated ๐Ÿ™‚

      ั€ะฐะด ะฟะพะผะพั‡ัŒ!

    • Mike Doubintchik says:

      I took a look at your site. I think you were right. There appear to several console errors which points to a conflict of some sort.

      When I run the JS related to the functionality manually inside the console, the functionality works. I think there is a greater issue here going on with the way jQuery is being loaded.

      If you want a quick fix, you run manually run the plugin’s JS in your theme: https://github.com/allurewebsolutions/wordpress-post-modal/blob/master/public/js/wp-post-modal-public.js

      Otherwise, we’ll need to troubleshoot the console errors.

  • Victor says:

    Repaired. Simply cut off the “extra” js file.
    And now, have some trouble with csc-style ๐Ÿ™‚

    But im strong ๐Ÿ™‚
    Thank you.

    Good Day

  • Martin says:

    Hi Mike, great job on the plugin! I could make it work on my site.
    But I have an issue with vimeo and youtube videos inside de modal. When I close de modal, the videos keep playing!

    I was wondering if you have a workaround for vimeo and youtube videos???!!

    Thanks anyway for your efforts!!

    • Mike Doubintchik says:

      Thanks for the kind words, Martin.

      Can I get a link to your implementation? I will come up with a solution for the videos ๐Ÿ™‚

  • Martin says:

    Of Course! http://www.milombo.com
    Any of the thumbnails opens a modal.
    By the way perhaps you can help me and check if the plugin is well implemented.

    • Mike Doubintchik says:

      Beautiful implementation! I really like it. Is it ok if I use your site as an example in various places such as the WP plugin repository and the plugin site?

      I know the fix that is needed. We need to add $('#modal-content').html(''); after line 50 in public/js/wp-post-modal-public.js.

      I will implement the fix on the next release of the plugin. You can implement it now though if you want and just update when the new release comes out.

  • Martin says:

    Yes you can, as long as you use it for good and helpful means, and to promote my work and yours!

    I added the code and it works like a charm!!! Congrats! You’ve done it again!

    Thanks a lot for you time!!
    Have a good one!

  • Craig says:

    Love the plugin! Is there anyway to stop my page from scrolling? The link to cause the popup is near the bottom of a long page.

  • Craig says:

    Is there a file I can simply download from github and overwrite in my plugin directory? Otherwise I will probably wait (hopefully a new release soon). There is nothing else like this out there and I have a lot of uses for it.

    I see that you have text centered in the css, just wondering how why?

    • Mike Doubintchik says:

      I’ve removed the centering as well. Nice catch. If you remove the plugin from your dashboard and re-install, it should have both the centering and scrolling fix.

      I’m happy you have many uses for the plugin ๐Ÿ™‚ Can you please share your implementations….I’m curious!

      • Martin says:

        Hi Mike!
        Is there a way to close the popup by clicking outside of it as well?

        • Mike Doubintchik says:

          @Martin

          I just released version 1.4.2 that has the click outside modal to close functionality ๐Ÿ™‚

          • Martin says:

            @ Mike
            If I update I will loose all my css and customization?

          • Mike Doubintchik says:

            If you put your customizations into your theme, then you will not lose them.

            If you customized the plugin files themselves, then you will need to migrate your changes. Although if you did it this way, I recommend moving your customizations to the theme so that you can easily update the plugin in the future.

          • Martin says:

            Pardon my ignorance, but I modified the plugin css, should I include those lines y the theme style.css, Is that the right way to migrate customization to my theme?

          • Mike Doubintchik says:

            Yep, you’re exactly right. If you don’t have a custom theme, then you can put that CSS you customized inside the “Additional CSS” section in Dashboard > Appearance > Customize

          • Martin says:

            I do have a customized theme, so I suppose I have to add those css to my customized style.css’s theme via ftp. Great Thanks again Mike!

          • Mike Doubintchik says:

            Happy to help! I would love to see your implementation of the plugin.

      • Craig says:

        I would love to share. I had walked away from the plugin for a bit when I could not get around the scrolling issue, but glad I found you here! (By the way, had to clear browser cache before new version would ‘work’).
        I have not found an FAQ plugin that is flexible, not overly onerous, and other needs. Combining your plugin with another powerful popular one gives me this (needs work still, “under construction”) … http://spedfaq.com/faq-popups/
        I do have some simple suggestions, other examples, and want to offer help. Can you email me?

        • Mike Doubintchik says:

          Very cool! Do you mind if I use your site as an example of my plugin in use?

          I would love to hear your suggestions, examples, and get your help ๐Ÿ™‚ Please message me on the contact form and we’ll go from there.

          • Craig says:

            Hold off a bit … it will look a lot better in a few days!

            I will use your contact form …

  • Eric says:

    Very nice solution. Since I’m using WordPress menus and the class is assigned to the enclosing instead of the link itself, I added an option to look for the nested link’s href. You may want to add it to the plugin.

    var post_link = $(this).attr(“href”);
    if ( post_link===null ) {
    post_link = $(this).find(“a”).attr(“href”);
    }

  • Huy jim says:

    Hi Mike! thanks for userful article! but i have problem when load the pop up! wait so long time but not content has load?

    รญt’s my error messenger when i press F12:

    GET http://localhost/wp-content/plugins/wp-post-modal/v1/any-post-type?slug=noithat/phong-ngu-cho-be/&_=1503992688349 404 (Not Found)

    • Mike Doubintchik says:

      Are you using the plugin or coding it yourself? If you’re using the plugin, can I see your implementation?

  • Andrew says:

    Hi there

    I am struggling to make this work in my site (not a pro).

    I have a custom post type which I have created for a team profile page. On this page I have a photo and name of a team member. What I am trying to do is when you click the photo it opens there bio in the Modal but I just can’t get it to work. It only shows the first post (team member) in the modal but no more.

    Can you offer any advice? Thanks

    • Mike Doubintchik says:

      @Andrew:
      Is the team member bio in a separate page that you are linking to with the modal link? Each Modal has to be linking to an individual page. If this comment doesn’t help, please send me a link to the team member where you’re trying to show the modal and also a link to the page where the team member’s bio is located.

  • Andrew says:

    Can i send you a message privately as the site is a dev which I would prefer people not to see?

    • Mike Doubintchik says:

      Yes, please contact me through the form on my contact page.

    • Andrew says:

      The team members are all individual posts of my custom post type. The bio’s are stored in the content of these posts.

      The overview page that displays them is just a normal page which uses a template containing the loop for the custom post type.

      Does that make sense?

  • Andrew says:

    The team members are all individual posts of my custom post type. The bio’s are stored in the content of these posts.

    The overview page that displays them is just a normal page which uses a template containing the loop for the custom post type.

    Does that make sense?

  • webizone says:

    Hi Mike,
    That’s a awesome plugin! I was wondering whether we could display buddypress profiles as well? I tried it, but its showing nothing.
    I’ll also go through the codes and see if I can find something.

    Thanks!

    • Mike Doubintchik says:

      Thanks for the kind words, webizone!

      I’ll work on making the plugin work with BuddyPress. Look for a new release in the near future.

Leave a Reply