I just coded a workaround solution for this issue, if anyone is interested here is my solution:
-
This solution is using the Bootstrap Navs Option , so you need first to download Bootstrap and link it in your header or index file.
-
Please read the comments in the below code carefully to can understanding what is happened
The Solution (Code):
<?php
/*
Template Name: Archives Events
*/
echo '<div class="tabbable">';/* Start Bootstrap Tabs Parent Div (tabbable) */
$args = array(
'post_type' => 'event',/* Change with your custom post type name */
'meta_key' => 'event_starttextdate',/* Change with your custom date metabox (Event Start Date) */
'orderby'=> 'meta_value',
'order' => 'ASC',
);
/* Important Variables */
$emptyvalue = "";
$optionname = "optionname";
$the_query = new WP_Query($args);
/* Start Bootstrap Tabs ul */
echo '<ul class="nav nav-tabs">';
/* Query Posts (Events) */
$arr = array();
while ( $the_query->have_posts() ) : $the_query->next_post();
$id= $the_query->post->ID;
/* Get all dates of posts from the custom date metabox (Event Start Date) */
$evestdate = get_post_meta($id, 'event_starttextdate', true);
/* Strtime the year from the results */
$this_month = strtotime($evestdate);
$cuseveyear = date( 'Y', $this_month );
$archiveyear = $cuseveyear;
$archiveyears = $archiveyear;
/* Remove duplicated years */
if(!in_array($archiveyear, $arr)){
array_push($arr, $archiveyear);
$get_archiveyear = $_GET['institution-archiveyear'];
/* For each year do the following */
foreach( (array) $archiveyears as $archiveyear ) {
echo '<li>';/* create li and a href for each year */
echo "<a class="archiveyear" href="#".$archiveyear."" data-toggle="tab">"; /* href is equal to the result year */
echo $archiveyear ;
echo '</a>';
echo '</li>';
}
}
endwhile;
echo '</ul>';
/* End Bootstrap Tabs ul */
?>
<?php
$args = array(
'post_type' => 'event',/* Change with your custom post type name */
'meta_key' => 'event_starttextdate',/* Change with your custom date metabox (Event Start Date) */
'orderby'=> 'meta_value',
'order' => 'ASC',
);
/* Important Variables */
$emptyvalue = "";
$optionname = "optionname";
$the_query = new WP_Query($args);
/* Start Bootstrap Tab content div */
echo '<div class="tab-content">';
$arr = array();
/* Query Posts (Events) */
while ( $the_query->have_posts() ) : $the_query->next_post();
$id= $the_query->post->ID;
/* Get all dates of posts from the custom date metabox (Event Start Date) */
$evestdate = get_post_meta($id, 'event_starttextdate', true);
/* Strtime the year from the results */
$this_month = strtotime($evestdate);
$cuseveyear = date( 'Y', $this_month );
$archiveyear = $cuseveyear;
$archiveyears = $archiveyear;
/* Remove duplicated years */
if(!in_array($archiveyear, $arr)){
array_push($arr, $archiveyear);
$get_archiveyear = $_GET['institution-archiveyear'];
/* For each year do the following */
foreach( (array) $archiveyears as $archiveyear ) {
/* create Bootstrap div tab-pane */
echo "<div class="tab-pane" id='".$archiveyear."'>";
$argss = array(
'post_type'=> 'event',
);
$the_query = new WP_Query( $argss );
while ( $the_query->have_posts() ) : $the_query->the_post();
/* Get all dates of posts from the custom date metabox (Event Start Date) */
$evestdate_single = get_post_meta( $post->ID, 'event_starttextdate', true );
/* Strtime the year from the results */
$this_month_single = strtotime($evestdate_single);
$cuseveyear_single = date( 'Y', $this_month_single );
$cuspermalink = get_post_permalink($id);
/* If the result year is equal to the archive year do the following */
if ($cuseveyear_single == $archiveyear) {
echo '<p style="border-bottom:1px solid #DDDDDD;padding:0;padding-bottom:5px;margin-left:100px;">';
echo "<a href="".$cuspermalink."">";
echo the_title();
echo '</a>';
echo '</p>';
}
endwhile;
} echo '</div>';/* End Bootstrap div tab-pane */
}
endwhile;
echo '</div>';/* End Bootstrap Tab content div */
echo '</div>';/* End Bootstrap Tabs Parent Div (tabbable) */
?>