How do I print on my frontend the result from a selected dropdown metabox (wordpress)?

Question

So, I've created a custom post type that have this metabox. The metabox is ok, but I'm not sure if it is saving right (I guess it is). Assuming that is all ok with this code (please, if there's anything wrong, tell me) I would like to know... How do I show this day and month selected from my metabox in my front-end?

(I don't know much about back-end and I'm trying to figure this out, sorry for any missunderstood)

Custom Post Type code:

function ccr_agenda() {

    $labels = array(
        'name'                => __( 'Agenda', 'codexcoder' ),
        'singular_name'       => __( 'Agenda', 'codexcoder' ),
        'add_new'             => _x( 'Add New Item', 'codexcoder', 'codexcoder' ),
        'add_new_item'        => __( 'Add New Item', 'codexcoder' ),
        'edit_item'           => __( 'Edit item', 'codexcoder' ),
        'new_item'            => __( 'New item', 'codexcoder' ),
        'view_item'           => __( 'View Agenda', 'codexcoder' ),
        'search_items'        => __( 'Search in Agenda', 'codexcoder' ),
        'not_found'           => __( 'Not found in Agenda', 'codexcoder' ),
        'not_found_in_trash'  => __( 'Not found in Agenda Trash', 'codexcoder' ),
        'parent_item_colon'   => __( 'parent-item Agenda:', 'codexcoder' ),
        'menu_name'           => __( 'Agenda', 'codexcoder' ),
        );

    $args = array(
        'labels'              => $labels,
        'hierarchical'        => false,
        'description'         => 'descrição',
        'taxonomies'          => array(),
        'public'              => true,
        'show_ui'             => true,
        'show_in_menu'        => true,
        'show_in_admin_bar'   => true,
        'menu_position'       => null,
        'menu_icon'           => null,
        'show_in_nav_menus'   => true,
        'publicly_queryable'  => true,
        'exclude_from_search' => false,
        'has_archive'         => true,
        'query_var'           => true,
        'can_export'          => true,
        'rewrite'             => true,
        'capability_type'     => 'post',
        'supports'            => array(
            'title', 'editor', 'thumbnail'
            )
        );

    register_post_type( 'agenda', $args );
    flush_rewrite_rules( false );
}

add_action( 'init', 'ccr_agenda' );

The metabox code:

// Agenda meta box register
add_action( 'add_meta_boxes', 'agenda_metabox' );

function agenda_metabox($post){
    add_meta_box('agenda_metabox_id', 'Date event', 'show_agenda_metabox', '$post->post_type', 'side' , 'high');
}

// Saving Agenda data
add_action('save_post', 'ccr_agenda_save');

function ccr_agenda_save(){ 
    global $post;
    if(isset($_POST["dia_agenda"])){
         //UPDATE: 
        $meta_agenda_dia = $_POST['dia_agenda'];
        update_post_meta($post->ID, 'show_agenda_metabox', $meta_agenda_dia);
        //END OF UPDATE
    }

    if(isset($_POST["mes_agenda"])){
         //UPDATE: 
        $meta_agenda_mes = $_POST['mes_agenda'];
        update_post_meta($post->ID, 'show_agenda_metabox', $meta_agenda_mes);
        //END OF UPDATE

    }
}

function show_agenda_metabox($post){
    $meta_agenda_dia = get_post_meta($post->ID, 'show_agenda_metabox', true); 

    $meta_agenda_mes = get_post_meta($post->ID, 'show_agenda_metabox', true); 
    ?>   

    <label>Select a day:  </label>

    <select name="dia_agenda" id="dia_agenda">
      <option value="01" <?php selected( $meta_agenda_dia, '01' ); ?>>01</option>
      <option value="02" <?php selected( $meta_agenda_dia, '02' ); ?>>02</option>
// [ ... ]
      <option value="30" <?php selected( $meta_agenda_dia, '30' ); ?>>30</option>
      <option value="31" <?php selected( $meta_agenda_dia, '31' ); ?>>31</option>
    </select>

    <br />

    <label>Select a month:  </label>

    <select name="mes_agenda" id="mes_agenda">
      <option value="01" <?php selected( $meta_agenda_dia, '01' ); ?>>jan</option>
// [... ]
      <option value="12" <?php selected( $meta_agenda_dia, '12' ); ?>>dec</option>
    </select>


    <?php
}

My front-end i'm trying to print the selected day and month like this:

<ul id="event-list">
    <?php

        $args = array(
            'post_type'     => 'agenda',
            'post_status'   => 'publish',
            'posts_per_page'=> 4,
        );

        $getPosts = new WP_Query($args);
        add_filter( 'the_title', 'max_title_length');

        while($getPosts->have_posts()) : $getPosts->the_post(); ?>

        <li>
            <span class="event">
                <h4 id="day"><?php echo get_post_meta(get_the_id(), 'dia_agenda', true ); ?></h4>
                <h5 id="month"><?php echo get_post_meta(get_the_id(), 'mes_agenda', true ); ?></h5>
            </span>

            <span class="sidebar-post-title"><a href="<?php echo the_permalink(); ?>"><?php the_title(); ?></a></span>
        </li>

        <?php endwhile;
        remove_filter( 'the_title', 'max_title_length');

    ?>                  
</ul>

But this code above it prints nothing on the screen. So, I have 2 questions about this:

1. What could I'm doing wrong? How could I get this right?

2. Once I get/printed the right results, How can I show it in this list/loop order by those results? (Like, the day&month more near to my current day will be displayed first on the list, and so on).

I've searched about this but I didn't get any good results. Maybe it's because I don't know much about back-end (like I said before), I'm just trying to learn. (Consider this fact when you read this, pls :D)

---

1st UPDATE - (changes sugessted by @yivi)

I did the changes and the metabox is not displayed on my custom post type page anymore. Did I missing something here?

// Agenda meta box register
add_action( 'add_meta_boxes', 'agenda_metabox' );

function agenda_metabox($post){
    add_meta_box('agenda_metabox_id', 'Date Event', 'show_agenda_metabox', '$post->post_type', 'side' , 'high');
}

// Saving Agenda data
add_action('save_post', 'ccr_agenda_save');

function ccr_agenda_save(){ 
    global $post;
    if(isset($_POST["dia_agenda"])){
         //UPDATE: 
        $meta_agenda_dia = $_POST['dia_agenda'];
        update_post_meta($post->ID, 'dia_agenda', $meta_agenda_dia);
        //END OF UPDATE
    }

    if(isset($_POST["mes_agenda"])){
         //UPDATE: 
        $meta_agenda_mes = $_POST['mes_agenda'];
        update_post_meta($post->ID, 'mes_agenda', $meta_agenda_mes);
        //END OF UPDATE
    }
}

function show_agenda_metabox($post){
    $meta_agenda_dia = get_post_meta($post->ID, 'dia_agenda', true); 

    $meta_agenda_mes = get_post_meta($post->ID, 'mes_agenda', true); 

 [...]

Answer 1

You are saving your metas under the show_agenda_metabox , but you are trying to retrieve dia_agenda and mes_agenda keys.

You have this:

update_post_meta($post->ID, 'show_agenda_metabox', $meta_agenda_dia);
update_post_meta($post->ID, 'show_agenda_metabox', $meta_agenda_mes);

And then this:

echo get_post_meta(get_the_id(), 'mes_agenda', true );

With the two "update_post_meta" you are actually overwriting your "day" meta with your "month" meta. So you should probably change that to something like:

update_post_meta($post->ID, 'agenda_dia', $meta_agenda_dia);
update_post_meta($post->ID, 'agenda_mes', $meta_agenda_mes);

And then use these calls, accordingly.

echo get_post_meta(get_the_ID(), 'agenda_mes', true );
echo get_post_meta(get_the_ID(), 'agenda_dia', true );

That should work.

(Also check that in your "month" select you are actually referring your "day" variable):

<select name="mes_agenda" id="mes_agenda">
  <option value="01" <?php selected( $meta_agenda_dia, '01' ); ?>>jan</option>

(Remember changing those $meta_agenda_dia with $meta_agenda_mes)

For sorting by these metas, check WP_Query sorting docs, which allow you to sort by one of those metas; but WP doesn't allow natively to sort by more than meta. You can do it by using the posts_orderby filter, but it's probably a bit beyond your current skillset, at least right now.