Support » Developing with WordPress » Group by custom date field

  • Resolved powerj

    (@powerj)


    I managed to adopt my loop so that it checks for a change in the custom year field and if so outputs a subheading – seems to work great.

    However, I need to have the subheading and the records beneath it in an accordian format which requires that the subheading has the class of accordian-title and the associated records beneath have the class of accordian-panel.

    Because the subheading is currently being output within the accordian-panel as opposed to above it, my accordian code isn’t working.

    eg. html needs to be:

    <h3 class="accordian-title</h3>
    <div class="accordian-panel</div>

    Currently the code outputs the title inside the .accordian panel div.

    Any guidance would be appreciated – I possibly need a foreach loop somewhere?

        global $wp_query;
    	$wp_query = new WP_Query( $args );
        
            //Establish initial variable - variable is tested against current record year and when it changes/doesn't match, it outputs a subheading for the year
            $yearChecker = " ";
        
            if ( have_posts() ) : 
        
                echo '<div class="accordian-panel>';
    
                   while ( have_posts() ) : the_post(); 
        
                //Variables
                $mediaReleaseTitle = get_the_title();
                $link = get_field('pdf_link');
                $year = get_field( 'media_release_date');
        
                //Year Subheading - check if yearChecker is not the same as the currentRecord and if not output subheading
                if ( $yearChecker != $year ) {
                    echo '<h3 class="accordian-title">Media Releases for ' . $year . '</h3>';
                }
                //Set yearChecker to current record
                $yearChecker = $year;
        
                //Loop Output
                ?>
                <div>
                    <h3 class="entry-title" itemprop="headline"><a href="<?php echo $link; ?>" target="_blank"><?php echo $mediaReleaseTitle; ?></a></h3>
                <div> <?php echo $year; ?></div>
                </div>
                 <?php
                endwhile;
      
                echo '</div>';
               
            endif;
    
    	wp_reset_query();
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    Can’t you simply move echo '<div class="accordian-panel>'; to go below echo '<h3 class="accordian-title">Media Releases for ' . $year . '</h3>';?

    You have the right idea, keep track of the previous loop’s year and do the new section code when it changes. You also need to close out the previous div, except for the very first occurrence. A bit of extra code can suppress the closing /div upon the very first loop, then setting some sort of flag to allow output on subsequent occurrences.

    Many thanks, hopefully I have this right now. Seems to be working correctly.

        global $wp_query;
    	$wp_query = new WP_Query( $args );
        
            //Establish initial variable - variable is tested against current record year and when it changes/doesn't match, it outputs a subheading for the year
            $yearChecker = " ";
        
            if ( have_posts() ) : 
    
                   while ( have_posts() ) : the_post(); 
        
                //Variables
                $mediaReleaseTitle = get_the_title();
                $link = get_field('pdf_link');
                $year = get_field( 'media_release_date');
        
                //Year Subheading - check if yearChecker is not the same as the currentRecord and if not output subheading
                    if ( $yearChecker != $year ) {
                        //Output an end div for accordian-panel if not the first loop
                        if ($yearChecker != " ") {
                            echo '</div>';  
                    }
                   
                    //and if not the same year output subheading
                    echo '<h3 class="accordian-title">Media Releases for ' . $year . '</h3>';
                    echo '<div class="accordian-panel>';
                }
        
                //Set yearChecker to current record
                $yearChecker = $year;
        
                //Loop Output
                echo '<h4 class="entry-title" itemprop="headline"><a href="' . $link. '" target="_blank">' . $mediaReleaseTitle . '</a></h4>';
                echo '<div>' . $year . '</div>';
                      
               
                endwhile;
      
               
            endif;
        
    
    	wp_reset_query();
    }
    Moderator bcworkz

    (@bcworkz)

    Looks good! That’s effectively what I had in mind. Nice work! 🙂

    I’ll go ahead and mark this topic as resolved for you. If you have any more questions, the topic remains open, just ask.

    Many thanks for your help

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.