0

I have a video viewing section on my site. The single post template displays a large area where the video plays and then there's a column of thumbnails representing other videos along the right side. Much like YouTube.

If the current video that is being displayed (let's say the post ID is 123) matches one of the thumbnail on the right (also ID 123) I want to give the thumbnail a different css class (represented by the inline style below) so I can highlight it, letting the user know this is the video currently playing.

I'm using wp_query to grab the posts for the right sidebar portion and I can't figure out how to compare the two IDs while in the loop. Below is a simplified version of what I thought would work, but it just gives the class to all iterations of the loop instead of just the current one.

<?php while ( have_posts() ) : the_post(); 
$primaryid = get_the_ID(); ?>
<?php 
            $args = array (
                'post_type' => 'post',
                'post_status' => 'publish',
                'orderby' => 'meta_value_number',
                'meta_key' => 'episode',
                'order' => 'ASC',
                );
            // The Query
            $query = new WP_Query( $args );

            // The Loop
            if ( $query->have_posts() ) { ?>

                <?php while ( $query->have_posts() ) {
                    $query->the_post(); ?>
                    <?php if (get_the_ID() == $primaryid) {
                        $style = 'style="border: 1px solid #fff;"';
                        } ?>
<?php endwhile; // end of the loop. ?>

1 Answer 1

1

Figured it out, but not sure if it's the best way or not. I got the id of the current post in the loop and then used is_single to figure out which post was being displayed, then gave if the styling. The problem was, this was also carrying over to the next itteration of the loop and altering that styling as well. To fix that I just rest the $style variable to null at the end of the loop.

$curID = get_the_ID(); 
                     if (is_single($curID) == true) {
                        $style = 'style="border: 1px solid #fff;"';
                        } 
//Stuff here?>

<?php $style = ''; ?>
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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