0

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 !

  • 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 Oct 22 '18 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 Oct 22 '18 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 Oct 22 '18 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 Oct 22 '18 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 Oct 22 '18 at 13:56
1

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 !

0

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

  • Thank you ! I'll try this. It may be a bit heavy to load, there is about 30-50 posts, but since they're just have text and pictures, maybe it should work fine. I'll try and tell you ! – Cesar H Oct 22 '18 at 16:07
  • The other option is to use the javascript to make an AJAX request to get the post content. You'd need to add the post ID to each article, perhaps using a data-attribute <article data-post-id="12345"> then your JS would pass this value back to your server. The downside to this is you make a network request every time someone clicks a post. There may be a slight delay in the response, but in your case it may be better as 50 lots of post content would make the page too big. Good luck and let me know how you get on. – Alexander Holsgrove Oct 22 '18 at 16:17
  • Hi ! I think i found the "theorical way" but still cant properly make it work. I added some code to the main question so it can be easier to figure what's the problem, tell me if you have an idea ! Thank you very much ! – Cesar H Oct 23 '18 at 9:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.