Yearly Archive from a custom date metabox (Event Start Date)

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) */

            ?>