Date Time Control for WordPress Customizer

Date Time Control for Customizer was added in WordPress 4.9.

Date Time Control for WordPress Customizer

A client project required date time control option in the customizer. There were options to add date control and time control separately. But I was looking for a single control which could be used for both date and time.

Fortunately, when searching around I found ‘WP_Customize_Date_Time_Control‘ class in the WordPress core which was added to the latest WordPress 4.9.0 release.

Below is how the control looks like in WordPress Customizer. We have the date field followed by the time field along with meridiem field. Along the time field, we also get the website’sĀ timezone.

Date Time Control in WordPress Customizer
Date Time Control in WordPress Customizer

Date Time Control: How to use?

You can add the control to an already specified WordPress Customizer section or you can create a new section using the below code. The core sections are: title_tagline, colors, header_image, background_image, nav_menus, widgets, static_front_page and custom_css.

// Custom Section
$wp_customize->add_section( 'twd_datetime_section',
   array(
      'title'       => __( 'Date Time', 'twd' ),
      // Visible title of section
      'priority'    => 160,
      // Determines what order this appears in
      'capability'  => 'edit_theme_options',
      // Capability needed to tweak
      'description' => __( 'Example for Date Time Control.', 'twd' ),
      // Descriptive tooltip
      'panel' => 'topaz_options'
   )
);

In order to store the date time values, we need to define the setting for the Date Time Control. Sanitization callback is necessary for valid data-time value.

// Date Time Setting
$wp_customize->add_setting( 'twd_datetime',
   array(
      'default'           => false,
      'type'              => 'theme_mod', // theme_mod or option
      'capability'        => 'edit_theme_options',
      'transport'         => 'refresh',
      'sanitize_callback' => 'twd_sanitize_date_time'
   )
);

Next, we need to define the Date Time Control itself. The control type for Date Time as the name suggests is ‘date_time‘.

// Date Time Control
$wp_customize->add_control(
   'twd_datetime_control', // Set a unique ID for the control
   array(
      'label'    => __( 'Date Time', 'twd' ),
      'settings' => 'twd_datetime',
      'priority' => 10,
      'type'     => 'date_time',
      'section'  => 'twd_datetime_section' // change it your requirements
   )
);

Finally, we define the sanitization callback. I usedĀ ‘Y-m-d h:m:s’ format but you can use any of the available date formats in PHP.

/**
 * Sanitize date time value
 * @param $input
 * @return string
 */
function twd_sanitize_date_time( $input ) {
   $date = new DateTime( $input );
   return $date->format('Y-m-d h:m:s');
}

You now have a fully functional Date Time Control in WordPress Customizer.

Displaying Date-Time Value

Displaying date-time value is same as displaying any other theme option value. The code to get date time value is below:

get_theme_mod( 'twd_datetime', '12/15/2018 23:59:59' ) // with default value, change as needed

Notes:

  • Timezone is connected to the WordPress Timezone setting available under Settings > General on the WordPress dashboard.
  • This control will not work with WordPress versions below 4.9.
  • Add code to your theme’s functions.php file or in a plugin file as required.

Feel free to post your questions related to the Date Time Control in the comment section below.

Like this post?

Get more stuff on WordPress design, development & business before they get published.

Leave a Response