[Support request] Injecting styles in posts on archive pages

[Mike]

Sorry to ask, as this isn’t really in your remit… but I can’t find an answer anywhere.
What I would like is to enter a date in a custom field on a post (e.g. my_date ). On ARCHIVE pages, if this date is in the past, I want to add a class to the <article> or .inside-article element.
Is this possible? I wondered if I could use an element/hook.
I also thought I might have to edit the archive.php – but this only does header/footer – the actual archive is created somewhere else. Could you let me know where?
Thank you in advance for any pointers.

[Tom]

Hi there,

If it’s applying to a single post or page, it’s the same as always (get_post_meta()) regardless of whether you’re on an archive or not.

For example:

add_filter( 'post_class', function( $classes ) {
    if ( get_post_meta( get_the_ID(), 'my_date', true ) ) {
        $classes[] = 'add-class-if-my-date';
    }

    return $classes;
} );

That will apply to posts with that custom field on archives and single.

Hope this helps!

[Mike]

Thanks Tom, can’t believe it’s so simple. One last question…
I have this, which does what I want (only adds class if today > custom field date.)

add_filter( 'post_class', function( $classes ) {
    if ( get_post_meta( get_the_ID(), 'date_fade', true ) ) {
		$pdate  = time();
		$holddate =  get_post_meta( get_the_ID(), 'date_fade', true );
		$mydate = strtotime( $holddate );
		if ( $pdate>$mydate ) { $classes[] = 'date-fade'; }
    }
    return $classes;
} );

But I’d like to only target the class on archives. Usually WP adds .archive as a class, but GP does not? What would be the best way to target ‘date-fade’ class only on archive pages in CSS.
Thanks again.

[Tom]

You could make it so the class is only added on archives:

add_filter( 'post_class', function( $classes ) {
    if ( is_singular() ) {
        return $classes;
    }

    if ( get_post_meta( get_the_ID(), 'date_fade', true ) ) {
		$pdate  = time();
		$holddate =  get_post_meta( get_the_ID(), 'date_fade', true );
		$mydate = strtotime( $holddate );
		if ( $pdate>$mydate ) { $classes[] = 'date-fade'; }
    }
    return $classes;
} );

Let me know 🙂

[Mike]

I could… but I can see it will be useful to change posts as well.
So ideally I’d like:

<style>
.archive .date-fade { dothis }
.page .date-fade { dosomethingelse }
</style>

I’m being fussy I know, but checking post_type means more server overhead, where a simple css class would be lighter.
If there are no classes like .page and .archive, I guess I’ll do another if (single/archive) and use a different class for each.
Thanks for the help, it really is appreciated.
Mike

[Tom]

Both of those classes exist in WordPress regardless of the theme you use (unless it goes out of its way to remove them).

They should both be available on your site.

[Author]

Posts