Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

up vote 3 down vote accepted

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.

share|improve this answer
    
Well adding the echo get_the_id in on the permalink in the sidebar loop certainly shows the posts ID, but that function doesn't seem to do anything when I paste it in my sidebar, not on the single nor the index or any other page. –  andy Apr 24 '13 at 12:05
    
Please read my response. You need to put the function in the Theme's functions.php file. –  Fränk Apr 24 '13 at 12:06
    
Yes, that's where I put it! :p Ah, I'm silly, it is spitting out a style in the themes header now. <style type="text/css" media="screen"> body.postid-453 a.post-453 { background-color: #f00; } </style> The problem is it's not styling the post, hrmm. –  andy Apr 24 '13 at 12:08
    
Ah nevermind, I'm being dopey because I didn't sleep last night, I change the echo to the containing li and forgot to change the function accordingly, now I've just got to work out how to make it work for single pages only! –  andy Apr 24 '13 at 12:10
    
It's all in my response. :) Just add if( is_single() ) { after the opening brace of the function and add a closing brace at the end of it. Like this the code will only be executed on single pages. And then you maybe can get some sleep. –  Fränk Apr 24 '13 at 12:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.