Display post by click on the link

Question

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.

Related Posts: