Create Read More Popups for Posts

Deprecated Warning #

The [popup][/popup] shortcode in the code example below is deprecated (obsolete) since Popup Maker version 1.7. We don't support this shortcode anymore, and the [popup][/popup] shortcode can stop working any time (especially after we release Popup Maker 2.0).

We don't recommend using the [popup][/popup] shortcode. See our Shortcode Button help guide for the shortcodes we actively support.

Try This Instead #

At the end of this doc, we've added an alternative for automatically creating post previews inside popups. This option uses Popup Maker's Remote Content extension. You'll have a fully supported visual builder that gives you all the settings you need for creating dynamic content inside a popup. Learn more by visiting the Remote Content extension page.

In the current iteration of Popup Maker, doing this requires some custom code, and this guide is going to present that code so you can have your post preview in your modals!

So, wherever you want you’re Post Preview to be displayed in a popup with a read more link, you can modify your theme's existing template and Loop to include something like this.

CODE AHEAD: This is an example, and customizing this to fit your existing theme template will require a basic knowledge of PHP.

<?php while ( have_posts() ) : the_post();?>
<article>
    <h2><a class="popmake-post-<?php the_ID();?>" href="<?php the_permalink();?>"><?php the_title();?></a></h2>
    <?php echo do_shortcode("[popup id='post-". get_the_ID() ."' size='small' title='". get_the_title() ."']". get_the_content() . "[/popup]");?>
</article>
<?php endwhile; ?>

This loop includes the [popup] shortcode, so it creates the popups on the fly, and they will be created dynamically for all posts in this Loop. Simply replace your current loop with this modified version and it will work out-of-the-box!

Customizing to fit your theme is to be expected.

Key concepts: #

You can use the shortcode to dynamically make popups anywhere in a while/for type loop or the WordPress Loop.
The only required attribute for the [popup] shortcode is the id.
The id in the shortcode is also used in the form of “popmake-id” as a class on the element that will Trigger that popup to open.

Using the Remote Content Extension #

With the premium Popup Maker Remote Content extension, all you need to do is:

Create a popup. You need only one popup because we'll reuse it to display content from each of your posts.
Add a click trigger with the Extra CSS Selector for your post titles.
Drop in a Remote Content area using the Popup Maker shortcode button in the editor toolbar.
Select Load From URL and enter .entry-content as the CSS selector that loads your post's content.
Target your blog index page.

The Result #

Here's a quick clip that shows the result.

What's happening in that video? #

Thanks to our setup above, when we go to our Blog page, all blog post titles become click triggers that load post content. To top things off, if you've got a Popup Maker popup inside one of your posts, it'll work. Just be sure to make your popups Stackable.

Here's a rundown of what's going on in the demo above.

The first post has a Gravity Forms (GF) shortcode in it. When we click the post title, our popup appears with the GF form.
The second post has an image gallery. Clicking on the post tile launches our popup with the gallery inside.
Lastly, we preview a post with YouTube video popups inside it. When we click a button to launch our video popup, it works like a charm. The video loads and starts playing in a completely separate popup. Notice that the "preview" popup is still open in case we want to keep previewing that post or watch another video. How convenient!

The trick is setting our Remote Content (post preview) and video popups to be Stackable and lowering the z-index of our post preview popup by 1 (less than the video popup z-indexes). Since the video popups have a higher z-index than the post preview popup, they'll display "on top" of the post preview popup instead of being hidden behind it.