Display css ONLY on most recent post of specific category?
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>
2
Answers
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
wp_get_recent_posts()
Alternatively, you could add a custom body class and use the same stylesheet, where you differentiate exactly via that class
From the context of your question I understand that you don’t use
next_post_link
andprevious_post_link
for the implementation of the Next and Prev buttons, so you have to use CSS to hide them appropriately.next_post_link
andprevious_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:
Click here to cancel reply.