I am hoping someone can help me out with styling my blog

Hello,

I am hoping someone can help me out with styling my blog page in a timeline format. I feel like I am pretty close but having a few issues.

1. I can't get the posts to be organized by month & year. I would like all posts that are created within the month to be displayed and only show the date (i.e.: JUN 2014) one time even if there is 10 posts in June. Then continue forward in the same setup.

Here is a demo link: http://eeequipment.wpengine.com/blog/

Here is my code:

<?php get_header(); ?>

	<section id="banner">

		<div class="wrap">

			<h2>Blog</h2>

			<img src="/wp-content/uploads/2014/06/bannerBlog.jpg" alt="">

		</div> <!-- /.wrap -->

	</section> <!-- /#banner -->

	<section id="breadcrumbs">

		<div class="wrap">

			<?php if(function_exists('bcn_display')) { bcn_display(); }?>

		</div> <!-- /.wrap -->

	</section> <!-- /#breadcrumbs -->

	<section id="content">

		<article>

                 <div class="timeline-with">
                    <div class="timeline-head"><i class="icon-chat-1"></i></div>
                    <ul class="timeline">
                    	<?php
							if(is_front_page()) { $paged = (get_query_var('page')) ? get_query_var('page') : 1;	} else { $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;}
							query_posts('posts_per_page=&paged='.$paged);
						?>

						<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

                        <li>
                            <div class="timeline-post clearfix">
                                <div class="timeline-dot">
                                	<div class="timeline-date">
                                		<?php the_date('M Y', '<h5>', '</h5>'); ?>
                                	</div><!-- /.timeline-date -->
                                </div><!-- /.timeline-dot -->
                               <!-- <div class="timeline-date"><span><?php the_time(get_option('date_format'));?></span></div> -->
                                <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 -->

                            </div><!-- /.timeline-post .clearfix -->
                        </li>

                        <?php endwhile; endif;?>

                    </ul><!-- /.timeline -->

                    <div class="timeline-nav">
                        <div class="timeline-dot"></div>
                        <ul>
                            <li class="left-nav"><?php next_posts_link(__(' ', 'framework')); ?></li>
                            <li class="right-nav"><?php previous_posts_link(__(' ', 'framework')) ?></li>
                        </ul>
                    </div><!-- /.timeline-nav -->

                    <?php  wp_reset_query(); //posts_nav_link(); ?>

                </div><!-- /.timeline-with -->

			<div class="clear"></div>

		</article>

<?php get_footer(); ?>

Any input would be great. I have a feeling I am not calling my posts properly to accommodate for this.

  • DavidM
    • DEV MAN’s Mascot

    Hi there Danny,

    Hope you're well today! :slight_smile:

    I'm not totally sure I understand what you're trying to achieve so let me see if we can get that clarified.

    Could I ask if you're trying to achieve something like the outline noted here:
    http://wordpress.org/support/topic/list-all-posts-on-a-page-split-them-by-year?replies=12

    I suspect you could use similar code and simply add in a bit extra for the months, but hopefully that outline helps illustrate things.

    Is that kinda what you're after? Could you maybe give us a similar outline?

    Thanks,
    David

  • aristath
    • Recruit

    Hello again @Danny Albeck, I hope you're well today!

    Try using this instead of your current template:
    https://gist.github.com/aristath/cdf564849f5dc71a3bc6
    You can see the actual changes I made to that here: https://gist.github.com/aristath/cdf564849f5dc71a3bc6/revisions
    Basically instead of this code:
    <?php the_date('M Y', '<h5>', '</h5>'); ?>
    I wrote this for you:

    <?php
    
    // If $temp_date is not defined, define it here
    if ( ! isset( $temp_date ) ) {
    	$temp_date = get_the_date( 'MY' );
    
    	// Output the date
    	the_date('M Y', '<h5>', '</h5>');
    }
    
    // If $temp_date is the same as this post's date, then do nothing.
    // If however they are different, then echo the month
    if ( $temp_date != get_the_date( 'MY' ) ) {
    	// Output the date
    	the_date('M Y', '<h5>', '</h5>');
    }
    
    ?>

    What that basically does is only echo the date if it's not the same month-year as the previous post in the loop.
    I haven't tested it but it should work...

    Let me know if that helps!

    Cheers,
    Ari.

  • aristath
    • Recruit

    Hello again @Danny Albeck!

    That should have worked... Could you please grant me access to your backend so that I may see exactly what is happening?
    To do so, from your dashboard go to WPMUDEV => Support => Support Access and click on the "Grant access" button.

    Cheers,
    Ari.

  • Danny Albeck
    • Site Builder, Child of Zeus

    Hey @aristath,

    Just checking in to see if you've had another chance to look at this. I tried a few more things yesterday and made a new index.php file (backing up the original as index_old.php) and got closer but still striking out.

    Thanks for the insight!

  • Danny Albeck
    • Site Builder, Child of Zeus

    Hey,

    Thank you for the response. I have 3 posts showing up for me, 1 in June and 2 in April. If needed we can create a few dummy posts for testing purposes. I appreciate you looking in to this... I'v been still looking as well.

    The latest method I tried seems to call the posts properly by month, but when I made about 6 or 7 posts everything broke visually.

  • Danny Albeck
    • Site Builder, Child of Zeus

    @aristath,

    getting real close... this works for me:

    <section id="content">
    
    		<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>
    
    	</section><!-- /#content -->

    Only issue that I am having now is that each post is rendering out its own <div class="timeline">

    What I want it to do is render out <div class="timeline"> and then each post for that month is in its own

      within the div. If you checkout the link in Firebug you can see what I am talking about... anything I do to the loop so far hasn't produced this result.
  • aristath
    • Recruit

    Hello again @Danny Albeck, I hope you're well today!

    Thank you for your patience on this thread... I visited your site just now again and say the end results, kudos! It looks great!
    I wasn't able to see what the issue you now have is (with the "timeline" div)... Have you already managed to resolve this?

    Do you still require assistance?

    Please advise,
    Ari.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.