Friday, November 24, 2023
HomeMobile MarketingWordPress: Add A Customized Class If The Put up Was Printed At...

WordPress: Add A Customized Class If The Put up Was Printed At this time


I’m consistently getting requests from our shoppers for customizations I’ve by no means even thought of. Just lately, we had a shopper that needed some {custom} styling for his or her posts revealed as we speak in order that they may very well be highlighted using a {custom} CSS class. They needed to include the category on archive pages, search outcomes, and single submit web page templates of their little one theme.

To customise the <div> class in a WordPress template primarily based on whether or not the submit was written as we speak, you possibly can 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 as we speak's date
$current_date = date('Y-m-d');

// Test if the submit was written as we speak
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. Substitute 'your-existing-classes' with the present courses that you just wish to carry on the <div>. Add any extra courses you need and save the template file.

Now, while you go to a submit that was written as we speak, the <div> factor could have the extra class custom-today, permitting you to type it otherwise utilizing CSS. Right here’s an instance:

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

A number of Situations All through Your Theme

If you happen to needed to make use of this method on a number of theme information, you possibly can add a {custom} perform to your little one theme’s features.php file:

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

    // Get as we speak's date
    $current_date = date('Y-m-d');

    // Test if the submit was written as we speak
    if ($post_date === $current_date) {
        $courses[] = 'custom-today';
    }

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

Then, inside every template, you possibly can 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 primarily based in your WordPress server’s time and timezone, not the customer’s time and timezone. If you happen to needed the consumer’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 primarily based on timezones
$timezone_offset = $current_date_timezone_offset - $post_date_timezone_offset;

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

// Test if the submit was written as we speak
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 components primarily based 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 shortly. Nevertheless, it could actually trigger points when the content material must be dynamically up to date.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments