2 comments

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]

   Log in to Reply

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>';
   }
   

   Log in to Reply