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 <div> 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:

<?php
// 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) {
    $today_class = 'custom-today';
} else {
    $today_class = '';
}
?>

<div class="your-existing-classes <?php echo $today_class; ?>">
    <!-- Your post content goes here -->
</div>

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 <div>. Add any additional classes you desire and save the template file.

Now, when you visit a post that was written today, the <div> 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:

<div <?php post_class(); ?>>
    <!-- Your post content goes here -->
</div>

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:

<?php
// Get the current post's date and convert it to the visitor's timezone
$post_date = get_the_date('Y-m-d');
$post_date_timezone = get_post_time('O');
$post_date_timezone_offset = substr($post_date_timezone, 0, 3) * 3600 + substr($post_date_timezone, 3, 2) * 60;

$current_date = date('Y-m-d', current_time('timestamp', false));
$current_date_timezone = get_option('timezone_string');
$current_date_timezone_offset = get_option('gmt_offset') * 3600;

// Calculate the offset between the post date and the current date based on timezones
$timezone_offset = $current_date_timezone_offset - $post_date_timezone_offset;

// Adjust the post date by the timezone offset
$post_date_adjusted = date('Y-m-d', strtotime($post_date) + $timezone_offset);

// Check if the post was written today
if ($post_date_adjusted === $current_date) {
    $today_class = 'custom-today';
} else {
    $today_class = '';
}
?>

<div class="your-existing-classes <?php echo $today_class; ?>">
    <!-- Your post content goes here -->
</div>

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.