Add HTML before/after event content since 6.7 release
-
I’ve had a problem with The Events Calendar page not showing my site’s header and footer, related to the use of a child theme I created for 2024 (twentytwentyfour). To work around this issue, I used the Events->Display->Additional Content features “Add HTML before event content” and “Add HTML after event content“, in which I added HTML to display clickable images. In the input text box, I had HTML code that started with <a> anchor tags, and it worked as designed.
After the install of version 6.7, I went in to Events->Display->Additional Content to make a change to the “Add HTML to the after event content”. When I pressed SAVE CHANGES, the code in both the “before” and “after” input boxes disappears, and the content is blank.
Experimenting, I discovered that these input boxes only seem to accept plain text. When an HTML bracket “<” is in the input field, the whole input area gets cleared when SAVE CHANGES is applied. Now I cannot create a click link image on the event page to provide navigation back. I’ve tested the “Add Media” buttons, and the same thing happens — after selecting media, the input area is filled with the proper HTML to display the media, but when you press SAVE CHANGES, that code (and media) disappears.
If I enter plain text in those areas for Additional Content, the text is saved when I press SAVE CHANGES. It is when the left bracket is included in the input, sometimes the left bracket is removed, other times the entire input area disappears.
While the core issue is related to the missing header/footer, I’d be happy to see that the “Additional Content” allow me to enter HTML be fixed, as it seems like a code bug more than an issue with my child theme.
The page I need help with: [log in to see the link]
-
I received an email from support providing me a workaround for this issue: Adding functions “tribe_events_before_html” and “tribe_events_after_html”
Here is the “before” code I added to functions.php in my child theme:
add_filter( ‘tribe_events_before_html’, function ( $content ) {
$content .= ‘<div>’;
$content .= ”<a href=”/”><img src=”/wp-content/uploads/2024/08/redd-logo-v3.png” alt=”Redd Logo” style=”max-width: 100%; height: auto;”></a>’
$content .= ‘</div>’;
return $content;
} );
BTW, this is WordPress 6.* with FSE and block themes.
<?php
/*
Plugin Name: Events Config
Description: Adds a custom HTML section before the events calendar.
Version: 1.0
Author: Codelyfe.github.io
*/
// Register a new admin menu for the Events Config settings
add_action('admin_menu', 'events_config_menu');
function events_config_menu() {
add_menu_page('Events Config', 'Events Config', 'manage_options', 'events-config', 'events_config_page', 'dashicons-calendar-alt');
}
// Display the Events Config settings page
function events_config_page() {
?>
<div class="wrap">
<h1>Events Config</h1>
<form method="post" action="options.php">
<?php
settings_fields('events_config_options');
do_settings_sections('events-config');
submit_button();
?>
</form>
</div>
<?php
}
// Register and define the settings
add_action('admin_init', 'events_config_settings');
function events_config_settings() {
register_setting('events_config_options', 'events_html');
add_settings_section('events_config_main', 'Events Config Settings', 'events_config_section_text', 'events-config');
add_settings_field('events_html', 'Event HTML Content', 'events_html_input', 'events-config', 'events_config_main');
}
function events_config_section_text() {
echo '<p>Enter the custom HTML content for the events section.</p>';
}
function events_html_input() {
$html = get_option('events_html');
echo '<textarea name="events_html" style="width: 100%; height: 200px;">' . esc_textarea($html) . '</textarea>';
}
// Add custom HTML before the events HTML
add_filter('tribe_events_before_html', 'events_custom_content');
function events_custom_content($content) {
$html = get_option('events_html');
if (!empty($html)) {
$content .= '<div style="margin: 0 auto; width: 50%;">' . $html . '</div><br/><br/>';
}
return $content;
}If anyone is looking for a fix. You can use this code. Create a new folder and call it “eventeditor”. Then create a file called “eventconfig101.php”. Place the code above inside the PHP file. Zip the folder and upload the zip as a plugin.
What does it do? It adds a new menu item “Event Config” for you to add custom HTML to the top of all the event pages.
- You must be logged in to reply to this topic.
