Random Daily Banners in WordPress Twenty Seventeen

We continue Series Twenty Seventeen by showing you how to create a Random Daily Banner in WordPress. In the Twenty Seventeen Theme we can set the header image to random display, but it changes on every page load. That’s cool but annoying. We want a random display of our banners, but want to change the image on a DAILY basis.

The Daily Banner approach gives your visitors variety as well as a consistent brand across all pages. On the Home Page:

And all subsequent pages.

Leveraging WordPress Theme Management Tools

You’ll see that we are able to do this using very little code. Before we get to the code, let’s look at where our mod begins, in the WordPress Twenty Seventeen Customization area where we upload our images and select “Randomize Uploaded Headers.”

WP_OPTIONS

We need a place to store our static data, and there’s no better place than the WordPress wp_options table. We even have built-in API retrieval and update methods at our disposal. The two WP_OPTIONS settings we need are nixmash_current_banner_id and nixmash_current_date.

Now we get to the code, where we add an update_banner() function in our Child Theme’s functions.php file. Notice we will hook into the “init” action, which according to the WordPress Code Reference, fires after WordPress has finished loading but before any headers are sent.

We will let the WordPress header retrieval logic to do its thing in theme.php, then add a couple of lines of code to pull our Daily Banner image from the Random Uploaded Images array.

And we’ve got our sweet banner images which changes each day!