Better HTML structure in date and time meta output

[teugene]

In the date and time meta for an event with separators, the HTML output sample will appear as below:

<h2><span class="tribe-event-date-start">December 25, 2017 | 9:00 pm</span> — <span class="tribe-event-time">11:00 pm</span></h2>

This HTML structure is very limiting in terms of how I want to format/style it. Is there anyway that the output could be as the example below?

<h2><span class="tribe-event-date-start">December 25, 2017</span><span class="tribe-event-date-sep"> | </span><span class="tribe-event-time-start">9:00 pm</span><span class="tribe-event-time-range-sep"> — </span><span class="tribe-event-time">11:00 pm</span></h2>

[Crisoforo]

Hi there!

Thanks for reaching out to support. There is a filter you can use to change the markup of the date or any content inside of it, you can add the following snippet of code in the functions.php file, the file can be found into your current active theme.


// functions.php file
function tribe_change_event_schedule_markup( $markup ) {
// make sure your date separator has one space before and after on the settings
// first place is the part to change, second part is the new markup and last one is where should search.
$markup = str_replace( ' | ', ' | ', $markup );
// make sure your time separator has one space before and after on the settings
// first place is the part to change, second part is the new markup and last one is where should search.
$markup = str_replace( ' - ', ' - ', $markup );
return $markup;
}
add_filter( 'tribe_events_event_schedule_details_inner', 'tribe_change_event_schedule_markup' );


With the code above will replace the default separators but only if they have a space before and after so you can adjust as needed based on your settings in Events > Display.

Let me know if you have any questions about this or how that goes.

Best
Crisoforo

[teugene]

Thanks. With minor modifications, I got it to work as how I like.

That brings me to another question: since this code relies on the using default separator, is there anyway to force the separator option to the default value and disable the option in the settings? Will there be any unforeseen issues doing so?

[Crisoforo]

Hey!

That’s awesome. In order to avoid a problem if someone changes the default option you can make use of the update version to rely on the value on the admin settings of each separator.


function tribe_change_event_schedule_markup( $markup ) {
// make sure your date separator has one space before and after on the settings
// first place is the part to change, second part is the new markup and last one is where should search.
$datetime_separator = tribe_get_option( 'dateTimeSeparator', ' @ ' );
$markup = str_replace( $datetime_separator, ' | ', $markup );
// make sure your time separator has one space before and after on the settings
// first place is the part to change, second part is the new markup and last one is where should search.
$time_range_separator = tribe_get_option( 'timeRangeSeparator', ' - ' );
$markup = str_replace( $time_range_separator, ' - ', $markup );
return $markup;
}
add_filter( 'tribe_events_event_schedule_details_inner', 'tribe_change_event_schedule_markup' );


And if you want to remove those options from the admin options as well is possible with the following snippet of code.


function tribe_display_settings_tab_fields_remove_separators( $fields ) {
// Removes date time separator from the fields
if ( isset( $fields['dateTimeSeparator'] ) ) {
unset( $fields['dateTimeSeparator'] );
}
// Removes time range separator from the fields
if ( isset( $fields['timeRangeSeparator'] ) ) {
unset( $fields['timeRangeSeparator'] );
}
return $fields;
}
add_filter( 'tribe_display_settings_tab_fields', 'tribe_display_settings_tab_fields_remove_separators' );


Please let me know if you have any questions about this. And hopefully this clarify this a little more.

Have a good day and happy holidays.

[teugene]

Thanks. Works perfectly!

[Crisoforo]

That’s great. Please feel free to reach out again if you have any other questions.

[Author]

Posts