0

I need to display correspond post inside div content(left) when click on a list of links (right), I can not figure out how to pass the post ID & load the php in div (left) when click on the link.

This is my code:

  <div class="display-post">
               <?php $args = array(
                          'post__in' => array(111,444,555) /*how to pass list of ID here*/
                );

                $posts = get_posts($args);

                foreach ($posts as $p) :
                //post!
                endforeach; ?>

 </div>


 <div class="lists of link">
    <a href="#">Link a</a> //displays post id: 222 & 333; when click
    <a href="#">Link b</a> //displays post id : 111 & 444 & 555 when click 
 </div>

I'm quite new and don't know how to call the click event to pass the value in div class"display-post".

I think im gonna have to use jquery ajax method to do that but its not very clear for beginner like me, hope anyone has experienced can give me easier instruction.

0

You can achieve this by using Query String. First you have to make template in your theme folder. To show post list on right side and description of post on left side I am using div with class name right and left (specify your desires css properties in those classes).

To show list of posts in right side div

<?php
/**
* Template Name: Posts
*/
get_header();   
?>
<div class="right" style="float:right;; width:40%;">
<?php

 $paged = get_query_var('paged') ? get_query_var('paged') : 1; 

$args = array(
'post_type' => 'post',  //Specyfying post type    
'posts_per_page' => 10,  //No. of posts to show     
'paged' => $paged       //For pagination
);

$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();
    //To get ID of post
    $id = get_the_ID();     

The above code is simply creating loop to display lists of posts that happens in every post list or archive page. And to display title of posts we simply use the_title() function with permalink.

But in this case to make title as link of post we won't use permalink, instead of permalink we will use custom anchor tag (<a>) with query string concept to make title clickable. To achive this we have to specify if condition in url. In url if condition is denoted by question mark (?).

    //To show Title of post
    ?>      
    <a href="http://localhost:85/sdc/abc/?postid=<?php echo $id; ?>" style="color:#444444;"><?php the_title(); ?></a>
    <br> <?php
endwhile;
?>
</div>

In url of anchor tag of above code we are storing Post's ID in a variable postid (?postid=). $id variable contains Post's ID (as we stored post id in this variable using get_the_ID() function in above code). And we are assigning value of $id to postid. So now postid contains the Id of post.

TO show discription of posts on left side on click

Now we have postid variable in which ID of post has been stored and we just need to fetch that value/ID from postid. To fetch value of postid we will use $_GET['postid'] method as shown below.

<div class="left" style="float:left; width:40%;height:auto;">
<?php

    $post = $_GET['postid'];  //Fetching value of postid from url

Now we have value of postid in variable $post. In other words $post now contains the ID of post whose description we need to show in left side of page. Now we just need to use that ID to call content of post to the current page. For that following functions will do the trick.

    //To show post's content
        $include = get_posts("include=$post");
      $content = apply_filters('the_content',$include[0]->post_content);
      echo $content;

?>
</div>
<?php
get_footer();

Note: Read all description and also all comments on code lines to understand the code completely. I tried to make it as simple as pasible but still if have any doubt then ask.

1
  • Hi Thank you very much, this is very details and helpful. – Yoona Oct 15 '16 at 13:35

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.