Tuesday, July 11, 2023
HomeMobile MarketingWordPress: Add A Customized Class If The Publish Was Revealed At this...

WordPress: Add A Customized Class If The Publish Was Revealed At this time


I’m continuously getting requests from our shoppers for customizations I’ve by no means even thought-about. Not too long ago, we had a consumer that wished some {custom} styling for his or her posts printed at the moment in order that they may very well be highlighted using a {custom} CSS class. They wished to include the category on archive pages, search outcomes, and single submit web page templates of their baby theme.

To customise the <div> class in a WordPress template based mostly on whether or not the submit was written at the moment, you may make the most of PHP and WordPress template tags inside your template file. Right here’s an instance of how one can obtain this:

<?php
// Get the present submit's date
$post_date = get_the_date('Y-m-d');

// Get at the moment's date
$current_date = date('Y-m-d');

// Examine if the submit was written at the moment
if ($post_date === $current_date) {
    $today_class = 'custom-today';
} else {
    $today_class = '';
}
?>

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

On this code snippet, we examine the submit’s date ($post_date) with the present date ($current_date). In the event that they match, we assign a {custom} class (custom-today) to the $custom_class variable; in any other case, it stays empty. Exchange 'your-existing-classes' with the present lessons that you just wish to carry on the <div>. Add any further lessons you need and save the template file.

Now, once you go to a submit that was written at the moment, the <div> factor could have the extra class custom-today, permitting you to model it in a different way utilizing CSS. Right here’s an instance:

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

A number of Cases All through Your Theme

When you wished to make use of this strategy on a number of theme information, you may add a {custom} operate to your baby theme’s capabilities.php file:

operate add_custom_class_based_on_date($lessons) {
    // Get the present submit's date
    $post_date = get_the_date('Y-m-d');

    // Get at the moment's date
    $current_date = date('Y-m-d');

    // Examine if the submit was written at the moment
    if ($post_date === $current_date) {
        $lessons[] = 'custom-today';
    }

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

Then, inside every template, you may simply add post_class:

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

Incorporating Time Zones

The above instance provides the category based mostly in your WordPress server’s time and timezone, not the customer’s time and timezone. When you wished the person’s timezone included… right here you go:

<?php
// Get the present submit's date and convert it to the customer'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 submit date and the present date based mostly on timezones
$timezone_offset = $current_date_timezone_offset - $post_date_timezone_offset;

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

// Examine if the submit was written at the moment
if ($post_date_adjusted === $current_date) {
    $today_class = 'custom-today';
} else {
    $today_class = '';
}
?>

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

Caching can affect the anticipated habits when implementing dynamic performance like customizing parts based mostly on the present date or customer’s timezone. Caching helps enhance web site efficiency by storing static variations of internet pages or content material to serve them extra rapidly. Nonetheless, it may well trigger points when the content material must be dynamically up to date.



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments