
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.
Hey Doug. That’s really slick!
Side note, I suggest you move your ‘subscribe to’ check box above the add comment button… to me that’s a little more user friendly.
Great job on your new calendar graphics and CSS.
Thanks Sean.
The positioning of the check box is on purpose. Putting it outside the other fields would create separation between it and the other tightly spaced fields. By placing it near the button, it’s putting a selection near an action, this actually might cause more people to miss it as they complete their thoughts in a comment and move to submit.
One thing that is missing is proper tab stops, though. I am going to correct that.
Well I think there is a bug in your code now that it’s a new day. The calendar icon still says today but it’s actually tomorrow now 🙂
The last sentence of the the post states the issue – I have to adjust for GMT. I also need to adjust for Caching so I’m trying to kill 2 birds with 1 stone.
Ok, I didn’t realize that’s what you were meaning about adjusting for GMT.
I’m sure you’re on top of it mr code monkey 🙂 but maybe you could do some sort of ‘if’ statement looking at your server time?
if server date/time is X compared to post date/time show X image or something to that effect.