Hoping someone can take a look at my code and help me out. Right now I am trying to show my blog in a timeline style approach. My current query is generating the posts how I would like them to but I am not getting the HTML structure properly. Right now I have a that contains a with post info. I would like the to generate a unique for each post within that month instead of each time generating a new for the post. So for example… if July 2014 has 3 blog posts I want the structure to be:

<div class="timeline">
<ul class="post1">
<ul class="post2">
<ul class="post3">
</div>

Right now it generates as:

<div class="post1">
<ul>
</div>
<div class="post2">
<ul>
</div>

Here is my template:

<article>
    <div class="timeline-with">
        <?php
            $counter = 0;
            $ref_month = '';
            $monthly = new WP_Query(array(
                'posts_per_page' => -1
            ));
            if( $monthly->have_posts() ) : while( $monthly->have_posts() ) : $monthly->the_post();
            if( get_the_date('mY') != $ref_month ) {
                if( $ref_month );
        ?>
        <script>
            jQuery(document).ready(function() {
                jQuery("div.timeline:nth-child(3n+1)").addClass("rightli");
            });
        </script>
        <div class="timeline-date">
            <h5><?php echo get_the_date('M Y'); ?></h5>
        </div><!-- /.timeline-date -->
        <?php
            $ref_month = get_the_date('mY');
            $counter = 0;
            } if ($counter++ < 5) {
        ?>
        <div class="timeline <?php echo strtolower(get_the_time('F-Y')); ?>">
            <ul>
                <div class="timeline-dot"></div><!-- /.timeline-dot -->
                    <li>
                        <div class="timeline-post clearfix">
                            <div class="timeline-post-wrap">
                                <?php if (has_post_thumbnail()) { ?>
                                    <?php the_post_thumbnail( 'full' ); ?>
                                <?php } else { ?>
                                    <!-- Do Nothing -->
                                <?php } ?>
                                <div class="post_info">
                                    <h2 class="post-title"><a href="<?php the_permalink();?>"><?php the_title();?></a></h2>
                                    <span>By <?php the_author(); ?> | <?php the_time(get_option('date_format'));?></span>
                                </div><!-- /.post_info -->
                                <p><?php echo excerpt(25); ?></p>
                                <div class="timeline-meta">
                                    <a href="<?php the_permalink();?>" class="more"><?php echo __('Read More >')?></a>
                                    <span class="timeline-comments"><i class="icon-comment"></i> <?php comments_number('0','1 comment','% comments')?></span>
                                </div><!-- /.timeline-meta -->
                            </div><!-- /.timeline-post-wrap -->
                            <?php } else { ?>
                            <?php } ?>
                            </div><!-- /.timeline-post .clearfix -->
                    </li>
            </ul><!-- /.timeline -->
        </div><!-- /.timeline -->
        <?php endwhile; endif; ?>
        <div class="timeline-nav">
            <div class="timeline-dot"></div>
            <ul>
                <li class="left-nav"><?php next_posts_link(__(' ')); ?></li>
                <li class="right-nav"><?php previous_posts_link(__(' ')) ?></li>
            </ul>
        </div><!-- /.timeline-nav -->
        <?php wp_reset_query(); ?>
    </div><!-- /.timeline-with -->
    <div class="clear"></div>
</article>

Any help is appreciated, thank you!

Read more here: WP_Query Sorting Posts by month … timeline effect


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , ,

Wordpress related questions and answers: