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

 $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>

</article> <?php

and on right side i am using


    $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


For the left side you could do this,

$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

// 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(); ?>
      <div class="post-content">
        <div class="post-content-inner">
          <?php the_excerpt(); ?>
          <a href="/blog/?postid=<?php the_ID(); ?>#post" class="blog-read-more">READ MORE</a>
// reset global $post after custom WP_Query loop

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,

$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; ?>
  • not its not working, check steedarmor.com/blog-test my current code is working fine, but when i replace it with your code, ( make change to url from /blog/ to /blog-test/ ) it not loading content on right and even link is not working, a link have #post( link to div) at end so it not working that why i used onclick in my code Apr 3 '20 at 6:21
  • but your answer help alot by making some changes it work for me i just include i not make any changes to right side code and in left side code i just included do_action('my_custom_pre_loop_action'); do_action('my_custom_pre_loop_action'); $current_post_id = ! empty( $_GET['postid'] ) ? absint($_GET['postid']) : 0; and $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'; } form you code and it work for me thank you Apr 3 '20 at 6:36
  • one more question as if you check steedarmor.com/blog-test now active is added when we click on any article in left side, how can add active to first most article as default as it loading to right as default content Apr 3 '20 at 6:54
  • @arjunkushwah I think you could make the first post active just by adding another if check to the left side loop. I added simple example to my code. Apr 3 '20 at 14:04
  • @arjunkushwah the link problem is interesting, I tested the links by changing onclicks to hrefs on dev tools and they worked as expected. But, my code is just a suggestion - use whatever works for you. Apr 3 '20 at 14:06

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.