0

​ Hello, I have an archive posts page where I am pulling in the posts dynamically and sorting them by Year then Month. I am trying to add the bootstrap accordion effect hiding the months under the year till it is clicked.

I am using echo $year_current to generate a unique id for each year. But for some reason still it is not working. Just the first year with everything else hidden. I have a counter on it to apply the '.in' class

  <?php $c = 0; ?>
<div id="collapse-<?php echo $year_current; ?>" class="panel-collapse collapse <?php if( $c == 1 ) echo 'in'; ?>" role="tabpanel" aria-labelledby="heading-<?php echo $year_current; ?>">

Any help would be very much appreciated! Here is my code:

  <?php
/*
Template Name: Archives
*/
get_header(); ?>

<div id="mid_yellow">
  <p>Archives</p>
</div>
  <div id="mid_yellow">
  </div>
    <p ></p>
    <?php $c = 0; ?>
    <?php
    global $wpdb;

    $limit = 0;
    $year_prev = null;
    $months = $wpdb->get_results("SELECT DISTINCT MONTH( post_date ) AS month , YEAR( post_date ) AS year, COUNT( id ) as post_count FROM $wpdb->posts WHERE post_status = 'publish' and post_date <= now( ) and post_type = 'post' GROUP BY month , year ORDER BY post_date DESC");

    foreach($months as $month) :

        $year_current = $month->year; $c++;

        if ($year_current != $year_prev)
        {
            if($year_current != date('Y'))
            {
            ?>
                </ul>
            <?php
            }
            ?>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-<?php echo $year_current; ?>">
      <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" aria-controls="collapse-<?php echo $year_current; ?>" href="#collapse-<?php echo $year_current; ?>/"><?php echo $month->year; ?></a>
        </h4>
    </div>

    <div id="collapse-<?php echo $year_current; ?>" class="panel-collapse collapse <?php if( $c == 1 ) echo 'in'; ?>" role="tabpanel" aria-labelledby="heading-<?php echo $year_current; ?>">
      <ul class='list-group'>
        <?php
        }
        ?>

            <li class='list-group-item'>
                <a href="<?php bloginfo('url') ?>/<?php echo $month->year; ?>/<?php echo date("m", mktime(0, 0, 0, $month->month, 1, $month->year)) ?>"><span class="archive-month"><?php echo date_i18n("F", mktime(0, 0, 0, $month->month, 1, $month->year)) ?></span></a>
            </li>

        <?php
        $year_prev = $year_current;

    endforeach;
    ?>
      </ul>
    </div>
  </div>
</div>

<?php get_footer(); ?>
1

the_ID() is for post IDs, so would only be relevant if you were adding an id attribute to individual posts.

For your purposes you can use anything you want, as long as it's unique to the year, and since years themselves are unique, just use that: $year_current.

For example:

<div id="collapse-<?php echo $year_current; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-<?php echo $year_current; ?>">
| improve this answer | |
  • Thank you for this! The $year_current did indeed give me unique classes for each year. The issue is it is still all hidden as the accordion still has a problem. Something I missed I also updated the code above with your solution. – Deirdre Mc T May 9 '18 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.