Displaying Posts with a custom event date using Flutter

When I first heard about flutter at the Birmingham Wordcamp I was excited.  The project I was working on called for some custom fields, and I didn’t want the clients to worry if they typed a date in correctly.  Flutter can add a simple date selector when creating a post.  Since my knowledge of php programming is very limited and I am new to Flutter I searched online for a solution.

For my events section of the site, two things needed to be met:

  1. All posts in the events category to be ordered by the most recent event date
  2. All posts that are older than the current date to be excluded

There’s a great article on Doc4design.com (http://www.doc4design.com/articles/articles/flutter-date-field/) that explains a lot of the basic functions of Flutter along with inserting information from a custom Date field into wordpress. Also in this article is a link to php date display parameters.

This tutorial didn’t quite fit the clients needs so I searched the WordPress forums and found this http://wordpress.org/support/topic/288867?replies=5.  The post outlines how to use the query_posts  function to compare a custom date with today’s date, and ruling out any posts older than today.  The trick is to get the Flutter date formatting to match up with the current date in the query_posts code. Here is my final query_posts with the loop to display events. I went with a shorthand month and date display such as  Jan 10th, Oct 1st, etc.

Note: If you use this code make sure that your custom write field in flutter has the date format in the dropdown menu set to 4/20/08.

 <!-- Start the Loop. -->

    <?php
$today = date('Y-m-d');
query_posts('category_name=events&meta_key=eventdate&meta_compare=>=&meta_value='.$today.'&orderby=meta_value&order=ASC');
// special events query ... Doesn't show posts before current date
?>

  <?php while (have_posts()) : the_post(); ?>
 
 <!-- Display the Post's Content in a div box. -->
 <div class="entry">
<h4><a href="<?php the_permalink(); ?>"> <?php $thegottime = get('eventdate');
      $thetimestamp = strtotime($thegottime);
      echo date('M j', $thetimestamp);
      ?><span class="date-suffix"><?php echo date('S', $thetimestamp); ?></span> - <?php the_title(); ?></a></h4>
   <?php global $more;
$more = 0; ?>
   <?php the_content('<br><br>  Read More...'); ?>
 </div>

 <!-- REALLY stop The Loop. -->

3 thoughts on “Displaying Posts with a custom event date using Flutter

  1. Hi there,

    I’ve been trying to accomplish the same effect on my website’s events section, but I can’t seem to get the code working right. I have very minimal coding knowledge but from what it looks like, the date format is pulled from this php function date(‘Y-m-d’) and compared against the flutter date format? You mentioned that the flutter format should be set to 4/20/08, but wouldn’t that be written as (‘n/j/y’) ?

    Either way I can’t seem to get it to display properly on my site. Currently I have been using some extra code in my functions.php file to keep the dates in the events category listed in order according to the flutter custom date key, I thought that perhaps this is overriding the above code?

    This is what I’m using in the functions file.

    add_action(‘wp’, ‘check_category’);
    function check_category () {
    if (in_category(‘1’)) {
    add_filter(‘get_previous_post_sort’, ‘sort_it’);
    add_filter(‘get_next_post_sort’, ‘sort_it’);
    add_filter(‘posts_orderby’, ‘sort_it’ );
    add_filter(‘posts_join’, ‘join_it’ );
    add_filter(‘posts_where’, ‘where_it’ );

    function sort_it () {
    global $wpdb;

    return ” $wpdb->postmeta.meta_value ASC “;
    }

    function join_it( $join ) {
    global $wpdb;

    $join .= ” LEFT JOIN $wpdb->postmeta ON($wpdb->posts.ID = $wpdb->postmeta.post_id) “;

    return $join;
    }

    function where_it( $where ) {
    global $wpdb;
    $where .= “AND $wpdb->postmeta.meta_key = ‘start_date’ “;

    return $where;
    }
    }
    }

    It displays the events correctly according to the custom date key, but it still displays posts older than the current date.

    Any insight would be appreciated. I just can’t seem to figure it out!

  2. I’m not too sure if using slashes or dashes makes a difference with comparing the dates. I think as long as the order and format is the same, they will compare correctly.

    If you want to display certain data for the loop, just use the wordpress query_posts command http://codex.wordpress.org/User:JamesVL/query_posts

    Just use this snippet of code before the loop
    =&meta_value='.$today.'&orderby=meta_value&order=ASC'); ?>

    My flutter custom data key is named “eventdate” in the code. the meta compare function in the code will compare the current date with the flutter data and not display any past entries.

Leave a Reply