Display css ONLY on most recent post of specific category?

Question

The below is just a scenario to provide context so you understand what im trying to accomplish, However please keep your answers related to the title if possible and a css solution/function.

I have a podcast site that im working on. And i have "next" and "prev" buttons on the podcast post pages that take the user in order to the next podcast episode by date and these buttons only display for the podcast post category.

(so just regular wordpress blog posts in a category called "podcast")

My issue is the most recent podcast post (for example podcast Ep# 150) would display a "next" episode button. - Being that Ep#150 is the newest podcast post there should be no "Next" button displayed. Right now its taking you to "Ep# 1" when you press it which makes sense, but i would rather not direct users to older episodes on our newest posts.

So i just want to "display:none;" that button on the most recent post in the podcast category.

Thanks for any help!

<span class="prev-ep-wrap">
  <span class="prev-ep">
   <?php next_post_link_plus( array( 'order_by' => 'post_date', 'loop' => true, 'tooltip' => 'Previous Episode', 'in_same_cat' => true, 'ex_cats' => '30, 11', 'link' => 'Previous Episode' ) );?>
  </span>
</span>
<span class="next-ep-wrap">
  <span class="next-ep">
   <?php previous_post_link_plus( array( 'order_by' => 'post_date', 'loop' => true, 'tooltip' => 'Next Episode', 'in_same_cat' => true, 'ex_cats' => '30, 11', 'link' => 'Next Episode' ) );?>
  </span>
</span>

Answer 1

From the context of your question I understand that you don't use next_post_link and previous_post_link for the implementation of the Next and Prev buttons, so you have to use CSS to hide them appropriately.

next_post_link and previous_post_link simply don't display the links if the current post is the last/first on the loop, so I think it would be better to add them in your template instead of using CSS.

You can check the documentation here:

• next_post_link
• previous_post_link

Answer 2

I highly suggest using L.Milo's answer, since this will actually solve the problem and adding custom CSS will only masquerade it.

---

To add custom CSS to the latest post of a category, the following should work. It does the following

1. Get the id of the latest post of that category using wp_get_recent_posts()
2. Check if currently a single post is displayed and if so, check if it has the id of the latest post (ie., it is the latest post)
3. If so, enqueue another stylesheet.

<?php

function wpse_enqueue_on_latest_post() {
    $args = array(
        'numberposts' => 1,
        'category' => 12,// id of the category
    );
    list($latest) = wp_get_recent_posts($args);

    if (is_single( $latest['ID'] )) {
        wp_enqueue_style( ... );
    }
}
add_action('init', 'wpse_enqueue_on_latest_post');

Alternatively, you could add a custom body class and use the same stylesheet, where you differentiate exactly via that class

<?php

function wpse_add_latest_post_body_class($classes) {
    $args = array(
        'numberposts' => 1,
        'category' => 12,// id of the category
    );
    list($latest) = wp_get_recent_posts($args);

    if (is_single( $latest['ID'] )) {
        $classes[] = 'latest-of-category-xxx';
    }
    return $classes;
}
add_filter('body_class', 'wpse_add_latest_post_body_class');