add active class based on permalink and url

Question

i am facing a issue, on my wordpress site in left side i loaded post list with title and excerpt, and when you click on that content will get load on right side of page and its working fine

but i like to add active or current class when any link from list get clicked and open in side, and first one as active already as it is already displaying content on right side

please check code

on left side i am using

<?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();
    $excerpt = get_the_excerpt();
    $excerpt = substr( $excerpt , 0, 100);

    ?>  
<article id="post-<?php the_ID(); ?>" class="et_blog_post"  >
<div class="entry-content">   
   <h3 calss="entry-title" >  
       <a onclick="location.href='https://example.com/blog/?postid=<?php echo $id; ?>#post'"  ><?php the_title(); ?></a></h3>
<div class="post-content"><div class="post-content-inner">
<p><?php echo $excerpt; ?></p></div>
<p><a onclick="location.href='https://example.com/blog/?postid=<?php echo $id; ?>#post'"  class="blog-read-more"  > READ MORE</a></p>

     </div></div>
</article> <?php
endwhile;
?>

and on right side i am using

<?php

    $post = $_GET['postid'];  //Fetching value of postid from url
    //To show post's content
        $include = get_posts("include=$post");
        $title = get_the_title();
      $content = apply_filters('the_content',$include[0]->post_content);?>
<div class="entry-content">   
   <h1><?php echo get_the_title($post); ?></a></h1>
     <p><?php echo $content; ?></p>

now issue is that i am want to add current or active class to article like class= "et_blog_post active" if current post is opened in right side for that i tried lot of solution that are provided here, i like to use url==href it add class but nothing working please suggest a solution thanks in advance and sorry for bad english

Answer 1

For the left side you could do this,

<?php
$args = array(
  'post_type'      => 'post',
  'posts_per_page' => 10,   
  'paged'          => get_query_var('paged') ? get_query_var('paged') : 1,
);
$loop = new WP_Query( $args );

// add custom function before loop, so you can apply excerpt filter only to this case
do_action('my_custom_pre_loop_action');

// is url parameter set, if so force it to integer
$current_post_id = ! empty( $_GET['postid'] ) ? absint($_GET['postid']) : 0;

while ( $loop->have_posts() ) : $loop->the_post();
  $post_class = 'et_blog_post';
  // is the current loop item the same as the post in view?
  if ( get_the_id() === $current_post_id ) {
    $post_class .= ' active';
  } else if ( 0 === $loop->current_post ) {
    $post_class .= ' active' // make first post active as a fallback
  }
?>
  <article id="post-<?php the_ID(); ?>" class="<?php echo $post_class ?>">
    <div class="entry-content">   
      <h3 class="entry-title">  
        <a href="/blog/?postid=<?php the_ID(); ?>#post">
          <?php the_title(); ?>
        </a>
      </h3>
      <div class="post-content">
        <div class="post-content-inner">
          <?php the_excerpt(); ?>
        </div>
        <p>
          <a href="/blog/?postid=<?php the_ID(); ?>#post" class="blog-read-more">READ MORE</a>
        </p>  
      </div>
    </div>
  </article>
<?php 
endwhile;
// reset global $post after custom WP_Query loop
wp_reset_postdata();

And instead of setting the excerpt length with substr(), you can use excerpt_length filter. In the example above I added custom action which adds the length filter so that it happens only in this context and not site wide.

// apply custom exerpt lenght only when your custom action is fired
add_action('my_custom_pre_loop_action', 'apply_my_custom_exerpt_length');
function apply_my_custom_exerpt_length() {
  // if you want to apply this globally on your site then just move the add_filter to your functions.php
  add_filter('excerpt_length', 'my_custom_exerpt_length');
}

function my_custom_exerpt_length($length) {
  return 100;
}

And for completeness sake, example for the right side,

<?php
$current_post_id = ! empty( $_GET['postid'] ) ? absint($_GET['postid']) : 0;
$post = get_post( $current_post_id );
?>
<div class="entry-content">
  <?php if ( $post ) : ?>
    <h1><?php echo get_the_title($post); ?></h1>
    <?php echo apply_filters( 'the_content', get_the_content($post) ); ?>
  <?php endif; ?>
</div>