I'm customising a wordpress site with a static front page. I'm using a responsive/dynamic theme.
What I want to do is make it so that the featured image that is loaded on the front page will be different based on a time. For example: Say someone goes to my website at 6pm, I would want the featured image on the front page to show a picture of the night sky. However, if someone visits my site before 6pm (and as early as say 5am), then the featured image should show a picture of the day sky.
Iv'e looked everywhere for a plugin to do this for me but one does not seem to exist. Iv'e also googled this endlessly and could not find specific solutions but I have been able to find sources to get me started.
Adding featured image from external source via php and sql: http://www.wpexplorer.com/wordpress-featured-image-url/ (it would be easier to just use and UPDATE statement and change the image url in the database)
Getting time in given timezone: Get current date, given a timezone in PHP?
I could have used a lot of the code from the links provided to achieve what I want but I ran into a PROBLEM. I CANNOT find the image url of the featured image in the wordpress database. I've looked in both _postmeta and _posts with no luck. Instead it just shows the image urls of the images that came with the theme originally but have since been changed. This could possibly have something to do with the fact that I've been using the Jetpack plugin (photon) to load my images from wordpress.com servers but I have turned the feature off and still can't find the image url in the database.
As I am not a pro in php and sql it would be great to be pointed in the right direction or even better if someone could come up with a solution. I know it's not an easy implementation but definitely worthwhile as solutions cannot be found elsewhere.
This can easily be done with javascript..
Here is a quick example I did: https://jsfiddle.net/p2snuf1a/
var date = new Date();
var hours = date.getHours();
var sunset_img= "http://at-cdn-s01.audiotool.com/2014/06/03/documents/85NwUJbwC0Gx0rbiKePSWWcKUqhmdP/0/cover256x256-46428e19514b49058125b21b8107c2eb.jpg";
var night_img = "https://pbs.twimg.com/profile_images/2973095145/47f74748e0c6240db5e0b3034af6da16.jpeg";
if(hours > 18){
document.getElementById('feature_img').setAttribute('src', night_img);
}
else{
document.getElementById('feature_img').setAttribute('src', sunset_img);
}Basically, it gets the current hour, sets some variables to the image links (these can be locally stored images too). Then it checks if the hours is greater or less than a certain time, so 18 is 6pm.
You can add more 'else if()' options for other time/image combinations.
If you have your images located in your css, you can use the '.sytle' instead of .setAttribute
</div>
Well this is a preety simple task, but i can see one issue with it. PHP will be using it's own server's time to calculate day and night. So if your server is in New york and some one is surfing your website from INDIA, it will show the image depending on the time in NEW YORK. So to achieve the user's local time you will either have to use javascript or use a geo locating api that will show the exact time of the given location. Here is an example.
http://api.geonames.org/timezone?lat=47.01&lng=10.2&username=demo
For now lets just suppose you want to change the image depending on the server time. So as you only have 2 images for day and night, hardcoding it should not be an issue. (If you want to have custom fields, can look into "Advanced custom fields" plugin, it is a brilliant plugin to add custom fields in your posts).
I haven't tested this code, but it should work.
date_default_timezone_set('America/Chicago');
$am_pm = date('a');
if($am_pm == 'am'){?>
<img src="<?php echo get_template_directory();?>/images/am.png" alt="Good Morning">
<?php }elseif($am_pm == 'pm'){?>
<img src="<?php echo get_template_directory();?>/images/pm.png" alt="Good Evening">
<?php }?>