CODEWITHSUNDEEP
phphtmlwordpress
this_guy
this_guy

Reputation: 604

List posts by month with specific HTML markup - Wordpress

Basically I want to display the posts by month in this format. I have Googled and searched on this site for hours, but I cannot find a solution that is exactly what I want. Any help is greatly appreciated. Thanks!

What I am trying to do in HTML - 

<!--JUNE-->
<a href="#" class="trigger current">June 2013</a>
<div class="pane wdiv">
  <ul>
    <li>Post Title</li>
    <li>Post Title</li>
  </ul>

   <ul>
      <li>Post Title</li>
      <li>Post Title</li>
   </ul>

   <ul>
      <li>Post Title</li>
      <li>Post Title</li>
   </ul>

<div style="clear:both;"></div>
</div>

<!--May-->
<a href="#" class="trigger current">May 2013</a>
<div class="pane wdiv">
  <ul>
    <li>Post Title</li>
    <li>Post Title</li>
  </ul>

   <ul>
      <li>Post Title</li>
      <li>Post Title</li>
   </ul>

   <ul>
      <li>Post Title</li>
      <li>Post Title</li>
   </ul>

<div style="clear:both;"></div>
</div>

What I have tried and played around with for the past 3 hours with no luck - 

<?php global $post;

$args = array( 'numberposts' => 5,);

$myposts = get_posts( $args );

foreach( $myposts as $post ) :  setup_postdata($post); ?>

<?php the_date('F Y','<a href="#" class="trigger current">','</a>'); ?> 

   <div class="pane wdiv">
      <ul>
         <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
      </ul>
      <div style="clear:both;"></div>
   </div>

<?php endforeach; ?>

What is being displayed

<!--JUNE-->
<a href="#" class="trigger current">June 2013</a> 

   <div class="pane wdiv">
      <ul>
         <li>Test Post</li>
      </ul>
      <div style="clear:both;"></div>
   </div>

   <div class="pane wdiv">
      <ul>
         <li>Test Post2</li>
      </ul>
      <div style="clear:both;"></div>
   </div>

<!--May-->
<a href="#" class="trigger current">May 2013</a> 

   <div class="pane wdiv">
      <ul>
         <li>Awesome Video</li>
      </ul>
      <div style="clear:both;"></div>
   </div>


   <div class="pane wdiv">
      <ul>
         <li>Recommended Readings</li>
      </ul>
      <div style="clear:both;"></div>
   </div>


   <div class="pane wdiv">
      <ul>
         <li>Recommended Readings</li>
      </ul>
      <div style="clear:both;"></div>
   </div>

Upvotes: 0

Views: 193

Answers (1)

George Yates
George Yates

Reputation: 1247

The problem you have there is that you're looping through the posts and you're going to get a date for each post. Instead, you want to detect what month you're on. Here's what my loop would look like.

<?php
if (!empty($myposts)) :
global $post;
    $month = date( 'n', strtotime($myposts[0]->post_date) );
    ?>
    <a href="#" class="trigger current"><?php echo date('F Y', strtotime($myposts[0]->post_date)) ?>
    <div class="pane wdiv">
    <ul>
    <?php
    foreach ( $myposts as $post ) : 
        setup_postdata($post);
        if (get_the_time('n') !== $month) : ?>
        </ul>
        <div style="clear:both;"></div>
        </div>
        <a href="#" class="trigger current"><?php the_time('F Y') ?></a>
        <div class="pane wdiv">
        <ul>
        <?php endif; ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endforeach; ?>
    </ul>
    <div style="clear:both;"></div>
    </div>
<?php endif; ?>

Now it's letting me edit, response edited as per comments below:

<?php
if (!empty($myposts)) :
    global $post;
    $month = date( 'n', strtotime($myposts[0]->post_date) );
    ?>
    <a href="#" class="trigger current"><?php echo date('F Y', strtotime($myposts[0]->post_date)) ?>
    <div class="pane wdiv">
    <ul>
    <?php
    foreach ( $myposts as $post ) : 
        setup_postdata($post);
        if (get_the_time('n') !== $month) : ?>
        </ul>
        <div style="clear:both;"></div>
        </div>
        <a href="#" class="trigger current"><?php the_time('F Y') ?></a>
        <div class="pane wdiv">
        <ul>
        <?php endif; ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
        <?php 
        $month = get_the_time('n');
    endforeach; ?>
    </ul>
    <div style="clear:both;"></div>
    </div>
<?php endif; ?>

Upvotes: 1

Related Questions