Updated: October 1, 2024
One of the most helpful features you can add to your site is a custom business hours indicator. This allows your visitors to know when your business is open, taking into account time zones and different days of the week. It’s a must-have for businesses, especially if your audience spans multiple time zones. In this guide, I’ll show you how to create a custom business hours indicator in WordPress using an easy-to-follow method that will ensure your site’s hours are accurate and user-friendly. You can even download it as a plugin!
Why You Need a Custom Business Hours Indicator
The standard “Open” or “Closed” sign doesn’t cut it for websites—especially for those running businesses with physical locations or service hours. A custom business hours indicator in WordPress will:
- Enhances user experience by showing live business status.
- Automatically adjusts to different time zones.
- Simplifies updates to your business hours without needing to change code.
- Prevents confusion by letting customers know when they can expect service.
While there are plugins available, creating your own solution ensures maximum control over functionality and ensures no excessive plugin bloat.
Creating a Custom Business Hours Indicator with Time Zones
Let’s dive right into how you can create a custom business hours indicator in WordPress that not only adjusts to specific days but also accounts for different time zones.
Step 1: Register a Settings Page for Business Hours
- Lines 2 through 17: To make it easy for site admins to configure, we’ll start by creating a settings page. This will allow you to customize the business hours for each day and select the appropriate time zone. This function will add a new item to the “Settings” menu in the WordPress admin dashboard, where users can select time zones and enter the business hours for each day of the week.
Step 2: Add Business Hours and Time Zone Selection
- Lines 19 through 65: Now, let’s build the form where admins can input their business hours and select a time zone. With this code, site admins can select a time zone and set business hours for each day directly from the WordPress dashboard. The interface uses HTML time inputs, making it easy to set accurate opening and closing times.
Step 3: Use the Saved Business Hours in the Frontend
- Lines 67 through 94: Once the admin has set up the business hours and time zone, we can use these saved settings in the frontend to display whether the business is currently open or closed. The shortcode dynamically reads the saved business hours and time zone settings to determine whether the business is open or closed based on the current date and time.
Step 4: Optional – Add Shortcode support to WordPress Menus
- Line 96: The last line of the code allows for the shortcode to be used within a WordPress menu. This helps to easily add the Open / Closed indicator to the header or footer.
<?php
function viawebs_business_hours_admin_menu() {
add_options_page(
'Business Hours',
'Business Hours',
'manage_options',
'viawebs-business-hours',
'viawebs_business_hours_settings_page'
);
}
add_action('admin_menu', 'viawebs_business_hours_admin_menu');
function viawebs_business_hours_register_settings() {
register_setting('viawebs_business_hours_group', 'viawebs_business_hours');
register_setting('viawebs_business_hours_group', 'viawebs_business_hours_timezone');
}
add_action('admin_init', 'viawebs_business_hours_register_settings');
function viawebs_business_hours_settings_page() {
?>
<div class="wrap">
<h1>Business Hours Settings</h1>
<form method="post" action="options.php">
<?php
settings_fields('viawebs_business_hours_group');
do_settings_sections('viawebs_business_hours_group');
$business_hours = get_option('viawebs_business_hours', array());
$timezone = get_option('viawebs_business_hours_timezone', 'UTC');
?>
<table class="form-table">
<tr valign="top">
<th scope="row">Time Zone</th>
<td>
<select name="viawebs_business_hours_timezone">
<?php
$timezones = timezone_identifiers_list();
foreach ($timezones as $tz) {
echo '<option value="' . esc_attr($tz) . '" ' . selected($tz, $timezone, false) . '>' . esc_html($tz) . '</option>';
}
?>
</select>
</td>
</tr>
<?php
$days_of_week = array('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday');
foreach ($days_of_week as $day) {
$open_time = isset($business_hours[$day]['open']) ? $business_hours[$day]['open'] : '';
$close_time = isset($business_hours[$day]['close']) ? $business_hours[$day]['close'] : '';
?>
<tr valign="top">
<th scope="row"><?php echo esc_html($day); ?> Open Time</th>
<td><input type="time" name="viawebs_business_hours[<?php echo esc_attr($day); ?>][open]" value="<?php echo esc_attr($open_time); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row"><?php echo esc_html($day); ?> Close Time</th>
<td><input type="time" name="viawebs_business_hours[<?php echo esc_attr($day); ?>][close]" value="<?php echo esc_attr($close_time); ?>" /></td>
</tr>
<?php } ?>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}
function build_viawebs_business_hours_indicator_shortcode() {
$business_hours = get_option('viawebs_business_hours', array());
$timezone = get_option('viawebs_business_hours_timezone', 'UTC');
$timezone = new DateTimeZone($timezone);
$now = new DateTime('now', $timezone);
$day_of_week = $now->format('l');
$output = '<div style="padding: 5px 10px; background: #ff0000; color: #ffffff; max-width: 100px; text-align: center; font-weight: 500; border-radius: 15px;">Closed</div>';
if (isset($business_hours[$day_of_week])) {
$open_time = $business_hours[$day_of_week]['open'];
$close_time = $business_hours[$day_of_week]['close'];
if ($open_time && $close_time) {
$opentime = new DateTime($open_time, $timezone);
$closetime = new DateTime($close_time, $timezone);
if ($now >= $opentime && $now <= $closetime) {
$output = '<div style="padding: 5px 10px; background: #0cb90c; color: #ffffff; max-width: 100px; text-align: center; font-weight: 500; border-radius: 15px;">Open</div>';
}
}
}
return $output;
}
add_shortcode('vwopenclose', 'build_viawebs_business_hours_indicator_shortcode');
add_filter('wp_nav_menu_items', 'do_shortcode');
Why This Custom Business Hours Indicator is So Useful
There are numerous benefits to adding a custom business hours indicator in WordPress:
- Flexibility: No need to hard-code business hours—update them whenever needed through a simple admin interface.
- Time Zone Awareness: Customers from different regions won’t be confused, as the hours automatically adjust based on the selected time zone.
- Professional Look: Displaying a dynamic “Open” or “Closed” sign improves your site’s usability, making it easy for visitors to know when to expect service.
This system is also an excellent option for agencies that manage multiple client sites, ensuring that each site’s business hours are accurate and easy to manage. Adding a custom business hours indicator in WordPress doesn’t just benefit your visitors—it also simplifies how you manage business hours. By leveraging a combination of custom settings and dynamic shortcodes, you can ensure that your site always reflects accurate business hours in any time zone. Implementing this feature adds a professional touch that enhances user experience, and you can easily modify it as your business needs evolve.