I'm looking for a solution to insert a next event and previous event navigation in a single event page. I can do it with elementor but it's a navigation by ID and not by date. Thanks for your feedback.
Thanks for the code. but i used method 1 (the one with elementor) to view the single event page, i don't think the code works with this method. it uses the page Theme/planto (theme name)/single and then uses a page template in template-parts. i think your code works with method 2 including the creation of the page single-stec_event.php, is it possible to create a widget?
Hello,
I'm looking for a solution to insert a next event and previous event navigation in a single event page. I can do it with elementor but it's a navigation by ID and not by date.
Thanks for your feedback.
Hi,
There is no built-in prev next buttons.
I just wrote you a small php hook that will do this.
Place this hook in your child-theme functions.php file
add_action('stec_single_after_content', function () { $event_id = get_the_ID(); $event_start_date = get_post_meta($event_id, 'start_date', true); $event_start_date = explode(' ', $event_start_date)[0]; $next_event = get_posts(array( 'post__not_in' => array($event_id), 'fields' => 'ids', 'post_type' => 'stec_event', 'posts_per_page' => 1, 'post_status' => 'publish', 'orderby' => 'meta_value', 'order' => 'ASC', 'meta_key' => 'start_date', 'meta_query' => array( array( 'key' => 'start_date', 'value' => $event_start_date, 'compare' => '>=', 'type' => 'DATE' ) ) )); $prev_event = get_posts(array( 'post__not_in' => array($event_id), 'fields' => 'ids', 'post_type' => 'stec_event', 'posts_per_page' => 1, 'post_status' => 'publish', 'orderby' => 'meta_value', 'order' => 'DESC', 'meta_key' => 'start_date', 'meta_query' => array( array( 'key' => 'start_date', 'value' => $event_start_date, 'compare' => '<=', 'type' => 'DATE' ) ) )); $prev_link = false; $next_link = false; $prev_title = ''; $next_title = ''; if (!empty($prev_event)) { $prev_title = get_the_title($prev_event[0]); $prev_link = get_permalink($prev_event[0]); } if (!empty($next_event)) { $next_title = get_the_title($next_event[0]); $next_link = get_permalink($next_event[0]); } if ($prev_link) { printf('<a class="stec-single-prev-event-link" href="%s">%s</a>', $prev_link, $prev_title); } if ($next_link) { printf('<a class="stec-single-next-event-link" href="%s">%s</a>', $next_link, $next_title); } });If there are next or previous events it will display links at the bottom of the content like following:
You will have to style the links.
Stachethemes Developer
Thanks for the code.
but i used method 1 (the one with elementor) to view the single event page, i don't think the code works with this method. it uses the page Theme/planto (theme name)/single and then uses a page template in template-parts. i think your code works with method 2 including the creation of the page single-stec_event.php, is it possible to create a widget?
As an Elementor widget the code will be as following:
add_action('elementor/widgets/widgets_registered', function () { class Stec_Prev_Next_Widget extends \Elementor\Widget_Base { public function get_name() { return 'stec_prev_next_widget'; } public function get_title() { return esc_html__('Prev Next Widget', 'stec'); } public function get_icon() { return 'eicon-button'; } public function get_categories() { return array('stec'); } public function get_keywords() { return array('stec', 'calendar', 'prev', 'next', 'link', 'navigation'); } protected function register_controls() { } protected function render() { global $stec_sp_event; if (!$stec_sp_event) { return ''; } $event_id = $stec_sp_event->get_id(); $event_start_date = get_post_meta($event_id, 'start_date', true); $event_start_date = explode(' ', $event_start_date)[0]; $next_event = get_posts(array( 'post__not_in' => array($event_id), 'fields' => 'ids', 'post_type' => 'stec_event', 'posts_per_page' => 1, 'post_status' => 'publish', 'orderby' => 'meta_value', 'order' => 'ASC', 'meta_key' => 'start_date', 'meta_query' => array( array( 'key' => 'start_date', 'value' => $event_start_date, 'compare' => '>=', 'type' => 'DATE' ) ) )); $prev_event = get_posts(array( 'post__not_in' => array($event_id), 'fields' => 'ids', 'post_type' => 'stec_event', 'posts_per_page' => 1, 'post_status' => 'publish', 'orderby' => 'meta_value', 'order' => 'DESC', 'meta_key' => 'start_date', 'meta_query' => array( array( 'key' => 'start_date', 'value' => $event_start_date, 'compare' => '<=', 'type' => 'DATE' ) ) )); $prev_link = false; $next_link = false; $prev_title = ''; $next_title = ''; if (!empty($prev_event)) { $prev_title = get_post_field('post_title', $prev_event[0]); $prev_link = get_permalink($prev_event[0]); } if (!empty($next_event)) { $next_title = get_post_field('post_title', $next_event[0]); $next_link = get_permalink($next_event[0]); } echo '<div class="stec-builder-element">'; echo ' <div class="stec-single-prev-next-wrapper stec-style-flexbox">'; if ($prev_link) { printf('<a class="stec-single-prev-event-link" href="%s">%s</a>', $prev_link, $prev_title); } if ($next_link) { printf('<a class="stec-single-next-event-link" href="%s">%s</a>', $next_link, $next_title); } echo ' </div>'; echo '</div>'; } } \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Stec_Prev_Next_Widget()); });Stachethemes Developer
Thanks, it works great.
it would be nice to add it in the original version :-)