0

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 <div> that contains a <ul> with post info. I would like the <div> to generate a unique <ul> for each post within that month instead of each time generating a new <div> 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!

2
  • it's maybe worth noting that the only valid child of a ul is an li, the div you have as a child of the ul violates html spec. – Milo Jul 9 '14 at 17:56
  • @Milo, thank you... I am updating that. Any thoughts on the posts filing in the desired structure? – Danny Jul 9 '14 at 17:58

Your Answer

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

Browse other questions tagged or ask your own question.