0

On this dev site, I have a post that displays three items (under Coming Soon) and I would like to modify the class on the 'learn more' link at the end to display three different options, one for each entry.

p class="lm-red" p class="lm-green" p class="lm-blue"

The code is like this:

<?php
$args = array( 'post_type' => 'post', 'posts_per_page' => 3, 'cat' => 2, 'sort_by' => 'event_begin_date', 'order' => 'ASC');
query_posts( $args );
while (have_posts()) : the_post(); ?>

<div class="cs col-sm-6 col-md-4 col-lg-4">
<article class="project-item">
<a href="#">
    <figure class="fig">
        <img class="img-responsive" alt="" src="<?php the_field('event_image'); ?>">
      </figure>
    <div class="content">
        <h3><?php the_title(); ?></h3>
        <p class="dates hidden-xs"><?php the_field('event_dates'); ?></p>
        <p class="hidden-xs"><?php the_field('event_snippet'); ?></p>
    <p class="lm">Learn More</p>
  </div>    
  </a>
</article>
</div>
<?php endwhile;?>

I have tried targeting the items in css using nth-child, but attempting to do so has resulted in all items being styled the same regardless.

p.lm { 
    font: 16px "Open Sans", sans-serif; 
    text-align: center;
    text-transform: uppercase;
    background-color: #AC162C;
    position: absolute;
    width: 280px;
    bottom: 0;
    left: 20px;
    color: #fff;
}

p.lm:nth-child(2n) { 
    background-color: #b9b329;  
}

p.lm:nth-child(3n) { 
    background-color: #1270f8;
}

I would appreciate some insights for resolving this, either through WP or CSS.

  • Do not use query_posts, ever, it breaks the main query object on which so may functions and plugins rely. Every page has a custom post class which you can target via its css selector. Please see post_class – Pieter Goosen Jul 23 '15 at 19:18
  • Hi Pieter, this is a custom site that does not use the normal WP template structure. – fmz Jul 23 '15 at 19:59
1

First of all, never use query_posts, use WP_Query to create additional queries.

You can target specific post positions in the loop by using the built in current_post var of the query object.

Here's an example using the post_class function:

<?php
$my_posts = new WP_Query( array( 'posts_per_page' => 3 ) );
if( $my_posts->have_posts() ):
    while( $my_posts->have_posts() ):
        $my_posts->the_post();
        ?>
        <div <?php post_class( 'index-' . ( $my_posts->current_post + 1 ) ); ?>>
            <p class="lm">Learn More</p>
        </div>
        <?php
    endwhile;
    wp_reset_postdata();
endif;
?>

Then in your CSS:

.index-1 .lm { /* styles for 1st post */ }
.index-2 .lm { /* styles for 2nd post */ }
.index-3 .lm { /* styles for 3rd post */ }
  • 1
    Milo, I am currently listening to The Phantom Tollbooth - one of my favorite books. Interesting that you should be the one to come along and answer the question. Thanks for the insight. – fmz Jul 23 '15 at 21:12

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.