0

I have a query looping through all posts in a custom post type using a custom order (via a re-ordering plugin.)

Here's my code:

<?php
    $current_id = get_the_ID();
    $counter = 0;
    $the_query = new WP_Query(array(
        'posts_per_page' => -1,
        'post_type' => 'course_unit',
        'orderby' => 'menu_order'
    ));
?>
        <h4>Your Course Units</h4>
        <ul>
<?php if( $the_query->have_posts() ): while( $the_query->have_posts() ) : $the_query->the_post(); 
    $post_id = get_the_ID();
?>
            <li><a href="<?php the_permalink(); ?>" class="list-link<?php if($post_id == $current_id) : ?> current-unit<?php endif; ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
        </ul>
<?php wp_reset_query(); ?>

This output is this:

<h4>Your Course Units</h4>
<ul>
    <li><a href="https://website.com/unit-1/" class="list-link">Unit 1</a></li>
    <li><a href="https://website.com/unit-2/" class="list-link">Unit 2t</a></li>
    <li><a href="https://website.com/unit-3/" class="list-link">Unit 3</a></li>
    <li><a href="https://website.com/unit-4/" class="list-link">Unit 4</a></li>
    <li><a href="https://website.com/unit-5/" class="list-link current-unit">Unit 5</a></li>
    <li><a href="https://website.com/unit-6/" class="list-link">Unit 6</a></li>
    <li><a href="https://website.com/unit-7/" class="list-link">Unit 7</a></li>
    <li><a href="https://website.com/unit-8/" class="list-link">Unit 8s</a></li>
</ul>

As you can see I've attached a class to the current post so that the current course link in the list can have a special style. What I also want to do is have the styles prior to and after the current post be different. The user is supposed to go through the units one by one so I want the prior post links to be greyed out (all I need is a class and I can style it however.)

I tried to do this with a counter variable (because I can't do this with ids or date since it's a custom order) but I was unable to get it to work. How can I attach a class to all posts prior to the current one? Any help would be so appreciated.

0

A little bit of PHP can be used to determine if the current unit has been rendered or not.

In the solution below, the flag $current_unit_rendered is initially set to false. We check to see if we're on the current unit. If so, we set the $unit_class variable to the appropriate string and update the flag. Using this information, we know if we're before or after the current unit:

<?php
    $current_id            = get_the_ID();
    $current_unit_rendered = false;
    $unit_class            = '';
    $the_query = new WP_Query(array(
            'posts_per_page' => -1, // Ideally, an upper limit like 500 should be used.
            'post_type'      => 'course_unit',
            'orderby'        => 'menu_order'
    ) );
?>
<h4>Your Course Units</h4>
<ul>
    <?php if ( $the_query->have_posts() ): while ( $the_query->have_posts() ) : $the_query->the_post(); 
        if ( get_the_ID() === $current_id ) {
            $unit_class = 'current-unit';
            $current_unit_rendered  = true;
        } elseif ( true === $current_unit_rendered ) {
            $unit_class = 'future-unit';
        } elseif ( false === $current_unit_rendered ) {
            $unit_class = 'previous-unit';
        }
    ?>
    <li><a href="<?php the_permalink(); ?>" class="list-link <?php echo esc_attr( $unit_class) ?>"><?php the_title(); ?></a></li>
    <?php endwhile; endif; ?>
</ul>
<?php wp_reset_query(); ?>  
  • Woohoo! You got it, @Alison! – Dave Romsey Jan 24 '17 at 19:23
1

Set a variable to a classname before the loop:

$position = 'class-before';

Then reset it within the if condition:

if( $post_id == $current_id ) :
    ?> current-unit<?php
    $position = 'class-after';
endif;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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