Skip to main content

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(); } ?>

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

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

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


<?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.

See Plugin on

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

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

External Pages

You can also link external pages in the modal-link. This is not 100% reliable when we don’t have control over the external pages.

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

External Link Example: <a class="modal-link" href="" data-div="container">Open Onion Page in Modal</a>

Caveats / Troubleshooting

  • If you are linking to static HTML pages, you must link to them as external pages
  • To include CSS/JS from those external pages, the linked CSS/JS must be inside the modal-ready div
  • One trick is to make the external page an iframe

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.

Customizing What Appears in the Popup

The plugin now offers two methods of displaying content in the popup. Both methods revolve around the_content(). You can select in the plugin settings whether you want to display the content using the REST API or the legacy method. The legacy method wraps the content of the post with a div with id="modal-ready" to tell the popup functionality what to display.

Sometimes this default methods are not enough. For example, let’s say you want to display the featured image and it’s outside the content function. Another example is if you have a complicated post type with lots of custom fields.

To get more advanced scenarios working with this plugin you would need to create a custom template and manually wrap everything that you want to appear in the popup inside a div with id="modal-ready".

If you are creating a custom template, you must enable the legacy method in the plugin settings!

Here’s a quick example of what that would look like:

<?php /* Template Name: Custom Page */ ?>

<?php get_header(); ?>

<div id="modal-ready">
    <main id="main" class="site-main" role="main">
        // Start the loop.
        while ( have_posts() ) : the_post();
            <div class="featured-image"><?= get_the_thumbnail(); ?></div>

            <div class="content"><?= get_the_content(); ?></div>

            <div class="custom-fields"><?= get_field('field_name'); ?></div>

            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) {

            // End of the loop.

    </main><!-- .site-main -->

    <?php get_sidebar( 'content-bottom' ); ?>

</div><!-- #modal-ready -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Support & Custom Integration

I develop this plugin in my free time and have released it to be open source. As a result, I cannot offer free support.

If you’d like to free support from the community, you can try checking out the support forums: — there are a lot of questions that have already been answered there.
You can also purchase 6 month of plugin support for $30 here:

Author allure

More posts by allure

Join the discussion 97 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:


    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


    • 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 and it’s awaiting approval):

      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 🙂


      • 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


        • 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 . I was messing with my page template but without luck yet ->


          • 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?

  • Olivier says:

    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 🙁
    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 so that you can get future updates(unless you will be making customizations to the plugin itself):

      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:

      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!
    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:


          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”) …
        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:

      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.


  • Greg says:

    Hi Mike, Thanks you for this great WP lightweight plugin. Works like a charm on all content. I just have an issue with a contact form7. Seems that the form is not send. Maybe an Ajax issue. Did you make some test with CF7 and if yes what can I do to make it works on my end. Thanks. Greg

  • Hi, this plugin is exactly what I was looking for. Thanks! I am wondering if it is possible that all wp posts open in a modal. F.e. I have the post type “listing” ( and would like to see that all these listings appear in modal. Is this possible?? Maybe it is a silly question. I’ m not a programmer, just an journalist who runs a blog.

    • Mike Doubintchik says:

      Andreas, I’m glad this plugin was useful for you!

      In order to accomplish what you’re asking, you would need to customize your theme, which would require programming knowledge. It is definitely possible though.

      If you’d like to discuss further, feel free to reach out through our contact page.

  • Chris says:

    Hi Mike,

    I’m probably being dense here, but how do I get the popup yo include the post featured image as well as the text content?

    I’m trying to set it up in conjunction with a voting form I’m creating in Caldera Forms. I need a More Info link on the form options and to have them open in a modal. I’ve added the more info as posts, and got the modal working, but only with the text, no image.

  • Chris says:

    Thanks for taking the time to update this MIke.

    I tried embedding the thumbnail in the content as an alternative but the popup container was only sized for the text which was smaller than text and image.

    This solution is a little above my current knowledge level ( I was using your plugin for this, not the direct code) so, simply for timescales, I’m going to have to go with another approach. But I will come back to this and learn how to create the custom post type

  • Enrique says:

    Great job!!! Thanks

  • roberto says:

    I’d like to use the plugin for a project in the medical area. It is possible to make it work also for phones?
    I’d like to override the 767px screen limit.

    • Mike Doubintchik says:

      Yes, definitely! The plugin has a setting for “breakpoint” and if you set that to 0 then the popup will show for all screen sizes.

  • Pete Skram says:

    Hi Mike. First, I wanted to thank you for the WP Post Popup plugin. It has worked well when I have used it previously. I am a little confused about the Rest API method you mentioned above. By using that method, is it possible to eliminate the modal-ready id wrapper? I am asking because I have run into a situation where the wrapper div interferes with another plugin’s wrapper (FullPage for WPBakery Page Builder) and I would like to have both plugins co-exist, if possible. Could you please let me know?



    • Mike Doubintchik says:

      If you don’t have a custom template (where the modal-ready div is critical in defining what appears in the popup) then you would be able to use the REST API method.

  • Mike, I have a question on how content loads with the plugin and if there’s a way to only load the needed content without loading the rest of the page. I’m using popups for all the items on this schedule page:

    As an example, if you scroll down to Saturday, block 1 and click on “Children of the Snow Land” you’ll see that it pops-up the custom DIV ID I’ve set-in place. However, the load is quite slow and I’m assuming that’s because it’s still loading the entire page ( before getting to the custom ID. Does that sound correct? If so is there a way to have it only load the key info and not the whole page?

    By the way, I’m super-impressed by how responsive you are to everyone on this post – thank you!

    • Mike Doubintchik says:

      Hi Chris, right after you praise me for responsiveness, I go on vacation for 2 weeks 🙂

      For me, that popup is loading pretty fast.

      If you are loading info only from the_content field, then I recommend using the REST API method of the plugin.

      If you need more than the_content, then you should create a custom post template that contains only the information that you need.

      • Christopher Schell says:

        Mike, everyone deserves a vacation!

        I have a custom post template in place that has everything that displays on the single custom post type and I’ve just wrapped what I want to display in a div with a custom modal ready ID. I get the sense however that it’s loading the whole template, even if it’s just displaying the part wrapped in the ID, is that true?

        If so, is there a way of creating a secondary CPT template just for the popups that’s much cleaner and quicker to load?


        • Mike Doubintchik says:

          You are free to create any custom template you’d like. If you want 100% of the loaded template to display, then you can wrap the entire custom template in a modal-ready div. You can remove whatever is not needed in the template to increase the speed of the loading.

          • Christopher Schell says:

            Sorry Mike, I’m doing a poor job describing what I’d like to do. I have a custom template already in place, with just a part of the page wrapped in the modal-ready div. What I’d like to do is have one template that controls the output of the single page for the custom post type, and another template entirely that controls the info displayed in the modal. That way, I can just load a few things (title, featured image, excerpt, etc.) without the page load of the entire template with the modal-ready div. Does that make sense? It’s basically two custom templates for one post type.

          • Mike Doubintchik says:

            You can create a hidden “modal-ready” div on the single page custom template and turn off default wrapping of the_content through the plugin settings.

            If you need further help, please reach out through the contact page.

  • Charaf Erraiss says:

    First of all thank you very much for this magnificent plugin.
    I want to ask you one question: Is it possible to get just a div from another page on the same website? I tried using data-div=”#id_of_the_that_div”, but instead the popup shows all the page content.
    Thanks again.

    • Mike Doubintchik says:

      Charaf – For internal pages, it’s best to use the built in functionality of the plugin. So create a page with only the content of that div and it should work.

  • Enrique says:

    Hi Mike, I hope you are doing well. As everybody has said: thanks a lot for the hard work related to this plugin, it is amazing. I am new to this and I am learning a lot from you.

    I would like to ask about the content of the modal. The default presentation does not pull the title from the post and I want to present it in the modal, but I can manage to understand how to do it, I mean, I don’t understand the structure of the system. I took a look inside the plugin to find where is pulled the content, but I couldn’t find out. Any chance you could help me out?

    Thanks a lot, and have a great day.

  • Fabien says:


    Thanks for this wonderful plugin.
    I try to do something that seams not usual with your plugin : I want to open a popup at the loading of my page.
    Before trying things a bit messy, like hiding a url then trigger the click via js, I tryed something smarter : try to call the showModal() from the outside of the whoe function.
    With some js, I managed to do that but my popup keep being empty. I think I can’t “short circuit” your js only like that.
    Do you have any clue on how I should do that the prettiest ?

  • Fabien says:

    Ho yeah, I see ! thanks !

  • Corinna says:

    Dear Mike,
    I am trying to achieve something “special” with your plugin, but I am failing completely.
    Maybe you or someone from your community can help me with this. I am willing to pay for your customization support, of course.

    I have multiple single-portfolio-item pages on my website, which i want to open automatically in a modal with the following structure in my url bar: (that is all, I don’t want any ? or % or the parent-website in my url like you wrote this in your documentation).
    “gallery” should be the modal link to use and therefore also the css-class (better would be “single-portfolio-item-default” since wordpress creates this with every new item page – but I don’t want to have this in my url).

    When I place this url in my url bar (without clicking on a link to it from anywhere of my website), I would like to open the modal over my homepage.
    There is no need for the single portfolio item pages to open not in a modal.

    Furthermore I would like to display the whole site in the modal (without navigation – this means content, title, custom fields, pictures, videos).
    I saw your custom template above, but I cannot find any file where to put it which seems logic to me – do I have to put it into the plugin files, create a new one, or in my theme files?

    It would be fantastic if that is possible to do with your plugin somehow.
    Thank you so much for your efforts and your answer in advance!

    • Mike Doubintchik says:

      It sounds like you could use the iframe method for opening the whole site instead of just the modal-ready content.

      To open a popup immediately upon landing on a page you would have to use the URL method.

      The rest of your requirements are a bit difficult to follow and since this deal with customization to the plugin it wouldn’t really be covered by the support package.

      If you have any further questions, you could reach out through the contact page.

  • Ian Phillips says:

    Needa bit of help here.

    I have it all working and it was exactly what i needed, but there is an accumulating delay on page load i think

    The top scrollling scetion runs a list of woocommerce products and it you click book now the respective page loads in the modal.

    If you open and close via this method it seems to take longer and longer too open.

    If you then try the normal method in the same scrolling box below which uses a normal link to open a new url it has no delay.

    • Mike Doubintchik says:

      Ah yes. This is a known issue. I haven’t been able to pin point where it’s coming from. It’s been a while so I’ll take another stab at it. Will post on here if I figure it out.

  • K.B says:

    Hi. See that your plugin has a function- “Automatically update the URL in the address bar to that of the page you are popping up.”

    I would like to know if it is possible to add a function that allows users to use the mobile phone return key to make the added URL disappear and close (hide) the popup window, so as to achieve a similar mobile application effect on Android phones.

    Thank you!

    • Mike Doubintchik says:

      Unfortunately, when on a website there’s no good way to distinguish what mobile key is pressed.

  • jawad says:

    If i,m adding custom post link on button…. Popup is working but in popup, i lost the design of post. Popup not showing the same designed page or post in popup. What should i do for that, my post is designed in Elementor.

Leave a Reply

Designed by

best down free | web phu nu so | toc dep 2017