Set post thumbnail to have class active on single page WordPress

• SOLVED

Hi,

I have code that is displaying thumbnails which represent each post on a portfolio template page. This code is also on the single.php page when one of these thumbs is clicked such as all the post thumbnails are still visible. I need, however, the active single post thumbnail to have a class active attached to either the li, a or img tags such that I can differentiate it from the others through CSS.

Here is the link to the portfolio template page: <a href="http://etheridgereno.com/gallery/" target="_blank">http://etheridgereno.com/gallery/</a>

I have tried javascript/jquery but can't get it functioning. I have also tried $IDOutsideLoop = $post->ID but also am probably not using it correctly.

Here is the code that is displaying the thumbs:

<ul class="display <?php if ($portfolio_2col == true) echo 'thumb_view';?>">
<?php
$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
$porto_cat = get_option('vulcan_portfolio_cid');
$porto_num = (get_option('vulcan_porto_num')) ? get_option('vulcan_porto_num') : 4;
$portfoliotext = (get_option('vulcan_portfoliotext')) ? get_option('vulcan_portfoliotext') : 40;
if (post_type_exists('portfolio')) {
query_posts(array( 'post_type' => 'portfolio', 'showposts' => $porto_num, 'paged'=>$page));
} else {
query_posts('category_name='.$porto_cat.'&showposts='.$porto_num.'&paged='.$page);
}
while ( have_posts() ) : the_post();
$portfolio_meta = get_post_meta($post->ID, 'vulcan_meta_options', true );
?>
<li>
<a href="<?php the_permalink();?>">
<div class="content_block">
<div class="pf-box-view">
<?php if ($portfolio_meta['portfolio_thumbnail']) { ?>
<img src="<?php bloginfo('template_directory');?>/timthumb.php?src=<?php echo $portfolio_meta['portfolio_thumbnail'];?>&amp;h=122&amp;w=207&amp;zc=1" alt="" />
<?php }?>
</div>
<h6><span style="font-family:FUT-MED, Arial, Helvetica, sans-serif; color:#666;"><?php the_title();?></span></h6>
</div></a>
</li>
<?php endwhile;?>
</ul>

Thanks in advance!

Lindsay

Answers (1)

2011-05-02

Kailey Lampert answers:

Maybe something like this?

<?php if (is_single()) $single_id = $post->ID; else $single_id = false; ?>


<ul class="display <?php if ($portfolio_2col == true) echo 'thumb_view';?>">

<?php

$page = (get_query_var('paged')) ? get_query_var('paged') : 1;

$porto_cat = get_option('vulcan_portfolio_cid');

$porto_num = (get_option('vulcan_porto_num')) ? get_option('vulcan_porto_num') : 4;

$portfoliotext = (get_option('vulcan_portfoliotext')) ? get_option('vulcan_portfoliotext') : 40;

if (post_type_exists('portfolio')) {

$the_query = WP_Query(array( 'post_type' => 'portfolio', 'showposts' => $porto_num, 'paged'=>$page));

} else {

$the_query = WP_Query('category_name='.$porto_cat.'&showposts='.$porto_num.'&paged='.$page);

}

while ( $the_query->have_posts() ) : $the_query->the_post();

$portfolio_meta = get_post_meta($post->ID, 'vulcan_meta_options', true );

$active_class = ( $single_id && get_the_ID() == $single_id ) ? ' class="active"' : '';
?>
<li<?php echo $active_class; ?>>
<a href="<?php the_permalink();?>">
<div class="content_block">
<div class="pf-box-view">
<?php if ($portfolio_meta['portfolio_thumbnail']) { ?>
<img src="<?php bloginfo('template_directory');?>/timthumb.php?src=<?php echo $portfolio_meta['portfolio_thumbnail'];?>&amp;h=122&amp;w=207&amp;zc=1" alt="" />
<?php }?>
</div>

<h6><span style="font-family:FUT-MED, Arial, Helvetica, sans-serif; color:#666;"><?php the_title();?></span></h6>

</div>
</a>
</li>

<?php endwhile;?>

</ul>

At the beginning, I check to see if the current page is a single post, then save the ID to $single_id. Then, during the thumbnail loop I compare the $single_id to each thumbnail - if there's a match, add a class of "active."

If you're able to try it, let me know how it goes.

---

Lindsay McGhee comments:

Hi Kailey!

Thanks so much for your reply! It makes sense when you explain it I just don't have the know how to write the code myself.

Unfortunately this code is producing a fatal error:

Fatal error: Call to undefined function: wp_query() in /nfs/c05/h01/mnt/69778/domains/etheridgereno.com/html/wp-content/themes/etheridge/single.php on line 106

How would I go about defining the function wp_query()?

Thanks!

---

Kailey Lampert comments:

Sorry - my mistake for not testing the code.

Replace the 2 occurrences of "$the_query = WP_Query" with "$the_query = new WP_Query"