Solution with Timed Content
You may create multiple server side rules for each time of the day with a “daily” frequency and interval of “1”. So one rule shows the conten from 00:00 to 05:59, the next rule from 06:00-11:59, then 12:00-17:59 and so on. So if you want to show 4 different images, you create 4 rules for every image. Every rule has the same start/end date and only a different time for start/end. The repeating pattern should be “daily” with an interval of “1” and you may want to have stopping condition with and end date of 2999-01-01, so it will repeat “forever”.
In the content you will the use the rules as following in a “classic” block (or if you use a page builder, you need to use a block wich allows to add multiple shortcodes without any separation between them):
[timed-content-rule id="1"]<HTML for image 1>[/timed-content-rule][timed-content-rule id="2"]<HTML for image 1>[/timed-content-rule][timed-content-rule id="3"]<HTML for image 3>[/timed-content-rule][timed-content-rule id="4"]<HTML for image 4>[/timed-content-rule]
It’s important to avoid line breaks! Otherwise WordPress will insert a <br> tag between the images, even when they are not displayed.
Solution using PHP
A PHP based solution would involve to register a shortcode and build the output in the shortcode handler:
function my_image_shortcode_handler()
{
$output = '';
$hour = date('H');
if ($hour >= 0 && $hour < 6)
{
$output = '<img src="image-1.jpg" alt="..." />';
}
else if ($hour >= 6 && $hour < 12)
{
$output = '<img src="image-2.jpg" alt="..." />';
}
else if ($hour >= 12 && $hour < 18)
{
$output = '<img src="image-2.jpg" alt="..." />';
}
else if ($hour >= 18)
{
$output = '<img src="image-3.jpg" alt="..." />';
}
return $output;
}
add_shortcode(
'my_image_shortcode',
'my_image_shortcode_handler'
);
Instead of image-1.jpg use the full URL.
Instead of using individual if statements you may also use an array with start/end hour (or time) and image URL with alt text and check that in a loop agains the current hour (or time) to determine which array element should be used as output.
You can then add the shortcode as following:
[my_image_shortcode]
