Open WordPress Post in Modal Without Plugin

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.

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

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>

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">
        <?php
        // 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>

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

            // End of the loop.
        endwhile;
        ?>

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