One of the most practical uses for a custom shortcode on a local business website is displaying the operating hours. This allows you to easily update and display your hours across multiple pages, ensuring your customers always know when you’re open.
In this step-by-step guide, I’ll walk you through how to create a custom settings page in the WordPress admin dashboard to manage and display your operating hours using a custom shortcode – no plugins required. For an overall look on how to create a simple Shortcode. Visit this page:
How to Create a Custom Shortcode in WordPress.
To create a settings page in the WordPress admin dashboard:
functions.php:functions.php file
function add_operating_hours_menu() {
add_menu_page(
'Operating Hours Settings', // Page title
'Operating Hours', // Menu title
'manage_options', // Capability
'operating-hours', // Menu slug
'display_operating_hours_settings', // Callback function
'dashicons-clock', // Icon
20 // Position
);
}
add_action('admin_menu', 'add_operating_hours_menu');
This code adds a new menu item called “Operating Hours” to the WordPress dashboard:
Next, create the form that will appear on the settings page:
functions.php:
function display_operating_hours_settings() {
?>
<div class="wrap">
<h3>Operating Hours</h3>
<form method="post" action="options.php">
<?php
settings_fields('operating_hours_group');
do_settings_sections('operating-hours');
submit_button();
?>
</form>
</div>
<?php
}
This function renders the settings page where you’ll manage the operating hours. But before we can see the settings, we first need to register them:
To manage and store the operating hours, you need to register these settings:
Register the Settings in functions.php:Add the following code to register and display the settings fields:
function register_operating_hours_settings() {
$days_of_week = array('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday');
foreach ($days_of_week as $day) {
register_setting('operating_hours_group', $day . '_opening_time');
register_setting('operating_hours_group', $day . '_closing_time');
add_settings_section(
$day . '_section', // Section ID
$day, // Section title
null, // Callback
'operating-hours' // Page
);
add_settings_field(
$day . '_opening_time', // Field ID
'Opening Time', // Field title
'display_time_input', // Callback to display field
'operating-hours', // Page
$day . '_section', // Section
array('day' => $day, 'type' => 'opening')
);
add_settings_field(
$day . '_closing_time', // Field ID
'Closing Time', // Field title
'display_time_input', // Callback to display field
'operating-hours', // Page
$day . '_section', // Section
array('day' => $day, 'type' => 'closing')
);
}
}
add_action('admin_init', 'register_operating_hours_settings');
function display_time_input($args) {
$option = get_option($args['day'] . '_' . $args['type'] . '_time');
echo '<input type="time" name="' . $args['day'] . '_' . $args['type'] . '_time" value="' . esc_attr($option) . '" />';
}
This code registers the opening and closing times for each day of the week, which can be selected using a time picker. Now the Settings page will look like this:
Now, let’s create a shortcode to display the operating hours on the front end of your website:
functions.php:
function display_operating_hours_shortcode() {
$output = '<div class="operating-hours">';
$days_of_week = array('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday');
foreach ($days_of_week as $day) {
$opening_time = get_option($day . '_opening_time');
$closing_time = get_option($day . '_closing_time');
if ($opening_time && $closing_time) {
$output .= '<p><strong>' . $day . ':</strong> ' . $opening_time . ' - ' . $closing_time . '</p>';
} else {
$output .= '<p><strong>' . $day . ':</strong> Closed</p>';
}
}
$output .= '</div>';
return $output;
}
add_shortcode('business_hours', 'display_operating_hours_shortcode');
This function generates the HTML needed to display the operating hours using a simple shortcode.
[business_hours]:
This is what it would look like on your website
If you’d prefer the “Operating Hours” settings page to be a subitem under the “Settings” menu:
add_menu_page Function:
add_options_page:
function add_operating_hours_menu() {
add_options_page(
'Operating Hours Settings', // Page title
'Operating Hours', // Menu title
'manage_options', // Capability
'operating-hours', // Menu slug
'display_operating_hours_settings' // Callback function
);
}
add_action('admin_menu', 'add_operating_hours_menu');
This will nest the “Operating Hours” settings page under the “Settings” menu in the WordPress dashboard.
About the Author:
Jonas is the Co-Founder of LPagery, a yearlong WordPress enthusiast and expert with over 8 years of WordPress experience.
Enables the creation of unique, personalized landing pages at scale by offering unlimited placeholders for dynamic content.
Essential for crafting content-rich, unique pages for each visitor or target group, optimizing for local SEO, e-commerce variability, or specific event details.
