WordPress: Add A Custom Class If The Post Was Published Today

I’m constantly getting requests from our clients for customizations I’ve never even considered. Recently, we had a client that wanted some custom styling for their posts published today so that they could be highlighted utilizing a custom CSS class. They wanted to incorporate the class on archive pages, search results, and single post page templates of their child theme.

To customize the

class in a WordPress template based on whether the post was written today, you can utilize PHP and WordPress template tags within your template file. Here’s an example of how you can achieve this:

In this code snippet, we compare the post’s date ($post_date) with the current date ($current_date). If they match, we assign a custom class (custom-today) to the $custom_class variable; otherwise, it remains empty. Replace 'your-existing-classes' with the existing classes that you want to keep on the

. Add any additional classes you desire and save the template file.

Now, when you visit a post that was written today, the

element will have the additional class custom-today, allowing you to style it differently using CSS. Here’s an example:

.custom-today {
background-color: yellow;
}

Multiple Instances Throughout Your Theme

If you wanted to use this approach on several theme files, you can add a custom function to your child theme’s functions.php file:

function add_custom_class_based_on_date($classes) {
    // Get the current post's date
    $post_date = get_the_date('Y-m-d');

    // Get today's date
    $current_date = date('Y-m-d');

    // Check if the post was written today
    if ($post_date === $current_date) {
        $classes[] = 'custom-today';
    }

    return $classes;
}
add_filter('post_class', 'add_custom_class_based_on_date');

Then, within each template, you can just add post_class:

Incorporating Time Zones

The above example adds the class based on your WordPress server’s time and timezone, not the visitor’s time and timezone. If you wanted the user’s timezone included… here you go:

Caching can impact the expected behavior when implementing dynamic functionality like customizing elements based on the current date or visitor’s timezone. Caching helps improve website performance by storing static versions of web pages or content to serve them more quickly. However, it can cause issues when the content needs to be dynamically updated.

Source link