Highlight post in sidebar on single page

Question

When you have a menu for say pages, it's easy to highlight your current page, since WP puts a class on it.

But what I have is a sidebar with the 20 latest posts in a loop and a separate main content area for the normal page loop and single page/category page etc.

My sidebar loop looks like this.

<ul>
                    <?php
                        $sidebar_query = new WP_Query(array(
                            'showposts' => 20
                        ) );
                    ?>

                    <?php while ($sidebar_query->have_posts()) : $sidebar_query->the_post(); ?>

                        <li>
                        <?php if(has_post_thumbnail()) :?>
                            <div class="figure">
                                <?php the_post_thumbnail('sidethumb'); ?>
                            </div> <!-- end div figure //centers thumbnail -->
                        <?php else :?>
                        <?php endif;?>
                            <a href="<?php the_permalink() ?>">
                                <span class="theparentcat">
                        <?php
                            $cat_names = wp_list_pluck( get_the_category(), 'cat_name');
                            echo wp_sprintf_l( '%l', $cat_names );
                        ?>
                            </span>
                            <h2><?php the_title (); ?></h2>
                            <span class="thetime">
                                <?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?>
                            </span>
                            </a>
                        </li>

                    <?php endwhile; wp_reset_query(); ?>
                </ul>   

Now, what'd be the best way (if there's a way) to highlight the current post when on a single page? Now I could echo out a class or something in there, but then it'd be applied to all the posts in the loop so that'd be useless.

So I've got say,

Story one Story two Story three

in the sidebar and I'm on the page of story 1, how would one add a class to only that post so it can be highlighted with css?

Answer 1

The simplest thing would be to add a class to the link that contains the post ID.

<a href="<?php the_permalink() ?>" class="post-<?php echo get_the_ID(); ?>">

You can then write a custom CSS function, put it in functions.php and hook to the wp_head. This function only serves to echo the necessary CSS to highlight the link.

function theme_prefix_highlight_current_post_in_sidebar() {
    if( is_single() ) {
        global $post;
    ?>
    <style type="text/css" media="screen">
        body.postid-<?php echo $post->ID; ?> a.post-<?php echo $post->ID; ?> {
            color: #f00;
        }
    </style>
    <?php
    }
}
add_action('wp_head', 'theme_prefix_highlight_current_post_in_sidebar');

EDIT: On a sidenote, if you might want to add conditional checks like is_single() in this function to only display this on the pages where it is needed.