WordPress page content in Modal Pop-Up - wordpress

Question

I am working on a WordPress gallery website which has only three pages: Home, Gallery, and Bio (http://adamgreener.com/).
When you click Bio, the Bio content pops up, powered by Easy Modal plugin (the content is manually typed in HTML in the plugin settings).
I also have the exact same HTML content in a WordPress page (which mobile viewers see, rather than a popup).
The page is very simple to edit, but the Modal content is not so friendly to the average user. I am seeking a way that I can allow the user to edit only the Bio page, and have that modal content update at the same time.
What would be the best route for such an action?
Thanks in advance!

Answer 1

You could use get_page to get the page content, and a shortcode to display it in the popup. In the functions.php file of your WordPress theme, e.g.:
add_action( 'init', 'greener_shortcode_init', 11 );
function greener_shortcode_init()
{
add_shortcode( 'greener_bio', 'greener_bio_shortcode' );
}
function greener_bio_shortcode( $atts )
{
$page_id = 123; // the ID of the Bio page
$page_data = get_page( $page_id );
$return = '';
$return .= '<h2>' . $page_data->post_title . '</h2>';
$return .= $page_data->post_content;
return $return;
}
Then, in your modal, use the shortcode:
[greener_bio]

Answer 2

There are two possible ways to accomplish what you're going for, both described in depth in my blog post: https://allurewebsolutions.com/open-wordpress-post-modal-without-plugin
You can also just use my plugin for this: https://wordpress.org/plugins/wp-post-modal/
First Method
The first method requires modifying the template that serves the content you want to appear in the modal. For example, you have a template called modal-content-template.php.
Inside that template we wrap the content we want loaded into the modal with:
<?php if (!$_GET) { ?>
// content that gets loaded on mobile
<?php } ?>
Full example of a template where we are excluding the WordPress header and footer:
<?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(); } ?>
CodePen example for the JS required to make this work
Second Method
The second method is a little more elegant. We use the modalContent.load(post_link + ' #modal-ready'); method to load the modal content.
The modal contact is wrapped in a wrapper container with ID #modal-ready. This can be done without even touching the page template using a function that hooks into the content.
add_action('the_content', 'wrap_content');
function wrap_content($content)
{
return '<div id="modal-ready">' . $content . '</div>';
}