How to display post list in a table layout (multiple queries in single loop)

Question

I am setting up an events page for my website. This page is using a loop to display a list of acts performing at different venues month-by-month. When a viewer comes to the page, they use a simple form to select the month, and when submitted this return the relevant data. At the moment the data fields I am displaying for each individual act in the loop are as follows:

1. Event date (Advanced custom fields data picker)
2. Venue (Advanced custom fields text field)
3. Image of act (Advanced custom fields Image field)
4. Act Name (Advanced custom fields text field)
5. Description (Advanced custom fields text area field)

You can view how this is working here

I need to change the layout so that when the list of events are returned it looks like this:

So essentially I need the loop to pump out rows for each day of the month and if there is an act at a venue on the date, to include it in the row. if there is no act on the date then i can just be left blank( as illustrated above)

Thank you for your help in advance, and if you would like any further information, I will answer as best I can.

Answer 1

Your best bet is not to run a bunch of queries but to loop through your data once to organize it then a second time to display it. Below is the logic you need. The exact code will depend on your data set.

$events = array();
$posts = WP_Query( $args );
foreach ( $posts as $post ) { 
  $venue = $post->venue;
  $day_of_month = date( 'd', $post->date );
  $events[ $venue ][ $day_of_month ][] = $post;
}
for ( $x = 1; $x <= 31; $x ++ ) {
  foreach ( $events as $venue => $ev ) {
    if ( ! empty( $ev[ $x ] ) {
      echo '<td>';
      foreach ( $ev[ $x ] as $details ) {
        echo $details;
      }
      echo '</td>';
    }
  }
}

Answer 2

I would try it this way. Use a meta query to get your events list and load everything into a datatable. This seems like a perfect time to let visitiors filter and sort.

Here's a simple implementtation (which may need tweaking). Just print or return the '$disp_data' variable from function call or in a template. If you don't have datatable set up I can help you out. Otherwise you just update the html below and use the query

    $disp_data = '<div class="data-display"><script>
    jQuery(document).ready(function() {
        jQuery("#my-events-table").dataTable( {

            columnDefs: [ {
                targets: [ 0 ],
                orderData: [ 0, 1 ]
            }, {
                targets: [ 1 ],
                orderData: [ 1, 0 ]
            }, {
                targets: [ 3 ],
                orderData: [ 3, 0 ]
            } ]
        } );

    } );
    </SCRIPT>
    <TABLE id="my-events-table" class="display" cellspacing="0" ><thead>
            <tr>
                <th>Date</th>
                <th>Venue</th>
                <th>Venue</th>
                <th>Venue</th>


            </tr>
        </thead>
                    <TBODY>';


        $args = array(
                'post_type' => 'my-event-type',
                'posts_per_page' => -1,
                'orderby' => 'meta_value',
                'order' => 'ASC',
                'meta_key' => 'acf-field',//custom field name holding event date
                'meta_query' => array(
                    array(
                        'key' => '_my-datetime-from',
                        'value' => array($start, $end),
                        'compare' => 'BETWEEN',
                        'type' => 'DATE'
                    )
                )
            );
            $posts = new WP_Query( $args );


                foreach ( $posts as $post ) { 

                      /*get you acf values here and load in to a table row*/

                $disp_data .= '<tr>
                    <td>' . $cur_property . '</td>
                    <td>' . $venue . '</td>
                    <td>' . $venue . '</td>
                    <td>' . $venue . '</td>


                </tr>';

            }
            wp_reset_postdata();
            $disp_data .= '</tbody></table></div>';