Side Bar List Recent Post and add custom CSS for Current Page

  • Resolved mrioux

    (@mrioux)


    12 years, 5 months ago

    I have no problem listing the 5 most recent post titles in the side bar.

    My problem is being able to assign a class to the ‘li’, but only to the Active ‘li’
    My goal is when the user clicks the Post, it marks it as the current post (highlights the background of that title). If the user clicks another post, it highlights that one, indicating the user is currently on that post.

    My code to pull the 5 recent post.

    [moderator: please mark any code using the ‘code’ button – see forum guidelines for posting code – the code below is already corrupted]

    <ul>
  <?php
    $archive_query = new WP_Query('showposts=5');
    while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
  <li class="Active"><a href="..." rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
  <?php endwhile; ?>
</ul>

    My CSS

    .share ul li a:hover,.share ul li.active a , .share ul li.current-active a, .share ul li.current-active a {
	color:#fff;
	background:#4e88c2 url(images/side-nav-a-bg.jpg) center left no-repeat;
	text-decoration:none;
}

    What happends, is that all the 5 post listed in the side bar display the background as Active.

Viewing 2 replies - 1 through 2 (of 2 total)

  • try:

    <?php
global $post; if( is_single() ) $current = $post->ID;
$archive_query = new WP_Query('showposts=5');
while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
<li <?php if( $post->ID == $current ) echo ' class="active"'; ?>>
.....
    Thread Starter mrioux

    (@mrioux)

    Hi thanks for your help. Your last line of code was really beneficial.

    I was able to do it with thise code. 

    <ul>

    <?php
        $lastposts = get_posts('numberposts=5&orderby=date&cat=-52');
        foreach($lastposts as $post) :
        setup_postdata($post); ?>

        <li<?php if ( $post->ID == $wp_query->post->ID ) { echo ' class="active"'; } else {} ?>>

            <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>

        </li>

    <?php endforeach; ?>

</ul>
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Side Bar List Recent Post and add custom CSS for Current Page’ is closed to new replies.