I'm looking for a way to get a post content and show it dynamically in a div.

My posts are shown in a list on the left of the screen, and i'd like to show the one you click in the right part of the screen (i just need the HTML, since i want to apply another style than the single.php file).

I searched on the web for weeks, but still have no clue about how i should do this, excepted i have to use Ajax (which i dont understand completely), and maybe a WP query ?

Does anyone have an idea about how to do this, and can explain it to a noob like me ?

Thank you very much !!

EDIT : OK i figured how to get the post ID in jQuery, and tried to send it to Ajax, so i can call the post content and get it back in jQuery.

Here's the jQuery part :

jQuery(".post-link").click(function(){

    var $post_id = $this.data('id');
    jQuery.post(
    ajaxurl,
    {
        'action': 'load_post_content',
        'the_ID': $post_id
    },
    function(response){
        jQuery('#the-post-content').html(response);
    });

    return false;
});

And the function.php part :

add_action( 'wp_ajax_load_post_content', 'load_post_content' );
add_action( 'wp_ajax_nopriv_load_post_content', 'load_post_content' );

function load_post_content() {

$the_post_id = $_POST['the_ID'];

$args = array(
    'p' => $the_post_id
)

$the_query = new WP_query($args);

if ($the_query->have_posts()) : while ($the_query->have_posts() ) : $the_query->the_post();

    $post_content = the_content();

endwhile;
endif;
echo $post_content;

die();
}

I think i'm getting closer, but it still doesn't work, do you think i'm on the right way ?

Thanks !

I'm looking for a way to get a post content and show it dynamically in a div.

My posts are shown in a list on the left of the screen, and i'd like to show the one you click in the right part of the screen (i just need the HTML, since i want to apply another style than the single.php file).

I searched on the web for weeks, but still have no clue about how i should do this, excepted i have to use Ajax (which i dont understand completely), and maybe a WP query ?

Does anyone have an idea about how to do this, and can explain it to a noob like me ?

Thank you very much !!

EDIT : OK i figured how to get the post ID in jQuery, and tried to send it to Ajax, so i can call the post content and get it back in jQuery.

Here's the jQuery part :

jQuery(".post-link").click(function(){

    var $post_id = $this.data('id');
    jQuery.post(
    ajaxurl,
    {
        'action': 'load_post_content',
        'the_ID': $post_id
    },
    function(response){
        jQuery('#the-post-content').html(response);
    });

    return false;
});

And the function.php part :

add_action( 'wp_ajax_load_post_content', 'load_post_content' );
add_action( 'wp_ajax_nopriv_load_post_content', 'load_post_content' );

function load_post_content() {

$the_post_id = $_POST['the_ID'];

$args = array(
    'p' => $the_post_id
)

$the_query = new WP_query($args);

if ($the_query->have_posts()) : while ($the_query->have_posts() ) : $the_query->the_post();

    $post_content = the_content();

endwhile;
endif;
echo $post_content;

die();
}

I think i'm getting closer, but it still doesn't work, do you think i'm on the right way ?

Thanks !

• ajax
• jquery

• 1 So, on the left you have a list of posts (probably only title and date) and when someone clicks on a post there, you want to show its contents in another container? There are many ways to tackle this. A very simple one would be to have all posts' contents on the right in various containers, hidden via CSS and only shown when the link on the left is clicked (via JavaScript). What have you tried so far? – kero Commented Oct 22, 2018 at 10:36
• I tried to get the post content directly with Jquery, but the "single" page was just shown in the div with it's own css properties and scripts, so that didn't fit. Then i looked for Ajax, but didn't find anything i can apply. Your idea seems pretty good to me, but isn't it a bit heavy to load ? (There can be about 30 - 50 posts) The good point is that i can do it on my own : ) Thanks anyway ! – Cesar H Commented Oct 22, 2018 at 12:01
• Yes, load can be heavy if there are alot of posts. So probably an AJAX solution is better. Try to abstract your problem a bit further: What needs to happen? What WP functions can you use for that? The Plugin Handbook has a chapter on using Ajax, have you read that already? – kero Commented Oct 22, 2018 at 12:10
• Thanks for the link, I will study this today. To answer you, i'd like to : - When a post link is clicked, i get the HTML content in a jQuery variable. - Then, the HTML is injected in a div (via jQuery again) - If another link is clicked, the new content replaces the previous one. For the WP functions, i don't really know, i'm just using the basics of WP, JQuery and php… TY again ! – Cesar H Commented Oct 22, 2018 at 13:27
• The description is already quite good. From there on you can go further: What info do you need, to get the content (hint: ID). How do you get that info from frontend to server (AJAX as get-paramter or post). Then on the backend you need an ajax/REST endpoint, that can parse an ID and from there get the content, return the content. Back to frontend: retrieved content needs to be placed in the div. Do you see where I'm getting? – kero Commented Oct 22, 2018 at 13:56

2 Answers 2

OK, I managed to make it work, here's how i did :

Jquery part :

jQuery(".post-link").click(function(){
    var post_id = jQuery(this).data('id');

    jQuery.post(
        ajaxurl,
        {
            'action': 'load_post_content',
            'the_ID': post_id
        },
        function(response){
            jQuery('#the-post-content').html(response);
        }
    );

    return false;
});

And the function.php part :

add_action( 'wp_ajax_load_post_content', 'load_post_content' );
add_action( 'wp_ajax_nopriv_load_post_content', 'load_post_content' );

function load_post_content() {

    $the_post_id = $_POST['the_ID'];
    $args = array(
        'post_type' => 'post',
        'p' => $the_post_id
    );

    $ajax_query = new WP_Query($args);

    $the_content;

    if ( $ajax_query->have_posts() ) : while ( $ajax_query->have_posts() ) : $ajax_query->the_post();
        $the_content = the_content();
    endwhile;
    endif; 

    echo $the_content;

    wp_reset_postdata();

    die();
}

Hope it can help !

This question is asking for quite a lot of fundamental help, but essentially you would want to include the_content() for each of your posts on the left hand side. Wrap this content with <div class="article-content">..</div> so that you can easily access it with javascript.

Next, you need to add the click handler to do display the post content on the right hand side when you click one of the posts.

If you had this structure:

<div class="left">
   <article>
      <h2>My post title</h2>
      <div class="article-content"><p>Lorem Ipsum</p></div>
   </article>

   <article>
      <h2>Another post title</h2>
      <div class="article-content"><p>Lorem Ipsum</p></div>
   </article>

   <article>
      <h2>Third post title</h2>
      <div class="article-content"><p>Lorem Ipsum</p></div>
   </article>
</div>

I'm assuming jQuery is available, so you could use the following:

$('.left article').on('click', function(event) {
   var article_content = $(this).children('.article-content').html()
    $('.right').html(article_content);
});

I've made a handy fiddle for you. It's very basic, but it gives you something to start with: https://jsfiddle/g0bxwy6k/