Ad

Advanced Custom Field Datepicker Data Giving Errors When Used Within Custom Wordpress Post Loop

- 1 answer

I have custom wordpress front page where i want to show event dates in this format but here only post date shows..i want to replace it event date in the same format

here is my front page code

here is event post admin page enter image description here

here is the advanced customfield page where i added events_field metabox field to show under each event post texteditor in admin enter image description here

event loop before adding acf field

<?php
        
            $events = new WP_Query( array(
             'post_type' => 'event',
             'posts_per_page' => 2
            ));
            
            while($events->have_posts()){
                $events->the_post();
        ?>
          <div class="event-summary">
            <a class="event-summary__date t-center" href="#">
              <span class="event-summary__month"><?php the_time('M');?></span>
              <span class="event-summary__day"><?php the_time('d');?></span>
            </a>
            <div class="event-summary__content">
              <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h5>
              <p><?php echo wp_trim_words(get_the_excerpt(),15);?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
            </div>
          </div>
          <?php } wp_reset_postdata(); ?>

problem is after i add advanced custom field name inside php DateTime object it shows error

event loop after adding acf field

<?php
        
            $events = new WP_Query( array(
             'post_type' => 'event',
             'posts_per_page' => 2
            ));
            
            while($events->have_posts()){
                $events->the_post();
        ?>
          <div class="event-summary">
            <a class="event-summary__date t-center" href="#">
              <span class="event-summary__month"><?php the_field('event_date');
               // $eventDate  = new DateTime(get_field('event_date'));
               // echo $eventDate->format('M');        
              ?></span>
              <span class="event-summary__day"><?php the_time('d');?></span>
            </a>
            <div class="event-summary__content">
              <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h5>
              <p><?php echo wp_trim_words(get_the_excerpt(),15);?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
            </div>
          </div>
          <?php } wp_reset_postdata(); ?>

this is the error i see

enter image description here

how ever if i just add this code within loop it shows the full date years months as put in acf field

the_field('event_date');

see screenshot

enter image description here however i need to change the date format to match the theme like the first screenshot image i posted

after using EPB solution it works but only shows month number instead i need to show first three letters of month like JUN ,JUL

here is the current screenshot after using EPB code enter image description here

and here is the new events loop code after using EPB solution

 <?php
        
            $events = new WP_Query( array(
             'post_type' => 'event',
             'posts_per_page' => 2
            ));
            
            while($events->have_posts()){
                $events->the_post();
        ?>
          <div class="event-summary">
            <a class="event-summary__date t-center" href="#">
              <span class="event-summary__month"><?php
     $date_string = get_field('event_date');
     $eventDate = DateTime::createFromFormat('d/m/Y', $date_string);
      echo $eventDate->format('m');
         ?></span>
              <span class="event-summary__day"><?php the_time('d');?></span>
            </a>
            <div class="event-summary__content">
              <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h5>
              <p><?php echo wp_trim_words(get_the_excerpt(),15);?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
            </div>
          </div>
          <?php } wp_reset_postdata(); ?>

any help will be appreciated,thanks

Ad

Answer

thanks everyone i go this solved

here is the code

 <?php
            $today = date('Ymd');
            $events = new WP_Query( array(
             'post_type' => 'event',
             'posts_per_page' => 2,
             'meta_key'=> 'event_date',
             'orderby' =>'meta_value_num',
             'order'=>'ASC',
             'meta_query'=> array(
              array(
              'key'=>'event_date',
              'compare'=>'>=',
              'value'=>$today,
              'type'=>'numeric'
              )
             )
            ));
            
            while($events->have_posts()){
                $events->the_post();
        ?>
          <div class="event-summary">
            <a class="event-summary__date t-center" href="#">
              <span class="event-summary__month"><?php
     $date_string = get_field('event_date');
     $eventDate = DateTime::createFromFormat('d/m/Y', $date_string);
      echo $eventDate->format('M');
            
             ?></span>
              <span class="event-summary__day"><?php  echo $eventDate->format('d');?></span>
            </a>
            <div class="event-summary__content">
              <h5 class="event-summary__title headline headline--tiny"><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h5>
              <p><?php echo wp_trim_words(get_the_excerpt(),15);?> <a href="<?php the_permalink();?>" class="nu gray">Learn more</a></p>
            </div>
          </div>
          <?php } wp_reset_postdata(); ?>
Ad
source: stackoverflow.com
Ad