WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Dynamic date? (25 posts)

  1. ousmanemariko
    Member
    Posted 2 years ago #

    I'm trying to get the date to show like it does on here: loopinsight.com. Basically the site shows the current date at the top of the page and if you scroll down, the date is shows when the posts were published on a previous date until another day shows up.

    I know I need a date-container in my style.css file. I know how to do that, but I don't know how to do it in the php file.

  2. Jacob Chappell
    Member
    Posted 2 years ago #

    The dates that are displayed with each post are saved when the posts are saved (as in they're static). As far as the *current date* goes, that's pretty simple with PHP's date() function. Read that page to get the formatting that you want. Here's the formatting that the loopinsight.com site you linked to uses:

    <?php echo date( 'F d, Y' ); ?>

    You could force that captalization of the month name with either CSS's text-transform property or directly in PHP with strtoupper().

  3. ousmanemariko
    Member
    Posted 2 years ago #

    I got that part, but what I'm stuck on is getting it to show not just at the top, but as the days change as I scroll down the page. So it's something like this

    January 10, 2011
    post
    post
    post
    post
    January 9, 2011
    post
    post
    post
    January 6, 2011
    post
    post

    That date only shows as the post date changes.

  4. Jacob Chappell
    Member
    Posted 2 years ago #

    Ahhh, I get it. Just thinking off the top of my head, here's a solution that could work. What you need to do is use WP_Query and order your posts by their date descending (in other words newest posts come first). Now right before the loop, create a variable to keep track of date/time information. On each iteration of the loop, check to see if the date/time of the current post is different than that of the saved date/time. If it is, output the new date/time and reset the variable to be this new value. Otherwise do nothing.

    Hope this logic doesn't sound too confusing the way I'm presenting it. Here's sort of an (untested) example of what I mean:

    // Variable to store date/time
    $datetime = null;
    
    // WordPress Loop
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    
    	// If datetime is null, set it to the current datetime.
    	// Otherwise, perform the output check.
    	if ( $datetime === null ) {
    		$datetime = (int) get_the_time( 'Ymd' );
    	} else if ( (int) get_the_time( 'Ymd' ) > $datetime ) {
    		// This post was made on a new day, so output that day:
    		the_time( 'F d, Y' );
    	}
    
    	// Normal wordpress posts output like title and content.
    	// These will be ran on every iteration of the loop (as usual)
    	// but the datetime will only be printed when a new day
    	// is reached.
    	the_title();
    	the_content();
    	// etc..
    
    endwhile;
    endif;

    Let me know if anything needs clarification.

  5. Jacob Chappell
    Member
    Posted 2 years ago #

    Oh, as an early clarification, I'm using Ymd as the format for the date/time because it will output the year month and day stringed together like this:

    20110129 for January 29, 2011

    I can then cast that to an integer and perform a check against other integers with it. Since we're only paying attention to the year, month and day (and not the time) the check will only return true if a post was made on a separate day (rather than separate time which posts naturally will be).

    In other words, a post on February 1st of 2011 would become this:

    20110201

    And 20110201 is greater than 20110129 :)

  6. ousmanemariko
    Member
    Posted 2 years ago #

    Thanks! I'm going to try it out. I'm still very, very new to editing php files so I hope I don't ruin anything. I'll check back in a bit!

  7. ousmanemariko
    Member
    Posted 2 years ago #

    Should I add a <div class=....> for the date?

    If so, is is the index.php the only place in which I should add it? I think I would have to modify the style.css file and add it?

    Sorry if these are beginner questions.

  8. Jacob Chappell
    Member
    Posted 2 years ago #

    Hey, no problem.

    Honestly, you can format the date however you like. A div with a special class wouldn't be bad. You'd need to add the div itself to the index file where the date is being outputted. As for the styling, you'd need to either edit style.css or create your own stylesheet and put it in there. Might look something like this:

    /* style.css */
    .my-post-date {
    	color: #999;
    	margin-bottom: 0.5em;
    	/* whatever other styles you want */
    }
    
    /* index.php */
    <div class="my-post-date">
    	<?php the_time( 'F d, Y' ); ?>
    </div>
  9. ousmanemariko
    Member
    Posted 2 years ago #

    Ok, going back to the loop, should that be added to index.php? Here's what it looks like now.

    get_header(); // Loads the header.php template. ?>
    
    	<div id="content" class="hfeed content">
    
    		<?php do_atomic( 'before_content' ); // sboard_before_content ?>
    
    		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    			<div id="post-<?php the_ID(); ?>" class="<?php sboard_entry_class(); ?>">
    
    				<?php do_atomic( 'before_entry' ); // sboard_before_entry ?>
    
    				<div class="entry-content">
    					<?php the_content( sprintf( __( 'Continue reading %1$s', sboard_get_textdomain() ), the_title( ' "', '"', false ) ) ); ?>
    					<?php wp_link_pages( array( 'before' => '<p class="page-links pages">' . __( 'Pages:', sboard_get_textdomain() ), 'after' => '</p>' ) ); ?>
    				</div><!-- .entry-content -->
    
    				<?php do_atomic( 'after_entry' ); // sboard_after_entry ?>
    
    			</div><!-- .hentry -->
    
    			<?php if ( is_singular() ) { ?>
    
    				<?php do_atomic( 'after_singular' ); // sboard_after_singular ?>
    
    				<?php comments_template( '/comments.php', true ); // Loads the comments.php template ?>
    
    			<?php } ?>
    
    			<?php endwhile; ?>
    
    		<?php else: ?>
    
    			<?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?>
    
    		<?php endif; ?>
    
    		<?php do_atomic( 'after_content' ); // sboard_after_content ?>
    
    	</div><!-- .content .hfeed -->
    
    <?php get_footer();
  10. ousmanemariko
    Member
    Posted 2 years ago #

    I haven't added the loop yet.

  11. ousmanemariko
    Member
    Posted 2 years ago #

    Does this look right? It's added right after the fourth line of code
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <div class="my-post-date">
    	<?php the_time( 'F d, Y' ); ?>
    
    <?php $datetime = null;
    	if ( $datetime === null ) {
    		$datetime = (int) get_the_time( 'Ymd' );
    	}
    	 else if ( (int) get_the_time( 'Ymd' ) > $datetime ) {
    		// This post was made on a new day, so output that day:
    		the_time( 'F d, Y' );
    	} ?>
    </div>
  12. Jacob Chappell
    Member
    Posted 2 years ago #

    You need to remove that first occurrence of the_time(). You only want that to output if the condition is met. Also, you need to initialize $datetime *before* the loop, otherwise it will just reset to null on every iteration rendering it useless.

    <?php
    
    	$datetime = null;
    	if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    	if ( $datetime === null ) {
    		$datetime = (int) get_the_time( 'Ymd' );
    	} else if ( (int) get_the_time( 'Ymd' ) > $datetime ) { ?>
    		<div class="my-post-date">
    			<?php the_time( 'F d, Y' ); ?>
    		</div>
    	<?php }
    
    	?>
  13. ousmanemariko
    Member
    Posted 2 years ago #

    I get an error in the second to last line with
    <?php}

  14. Jacob Chappell
    Member
    Posted 2 years ago #

    Oops, I accidentally posted it with the closing tag after the loop line. Change this:

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

    to this:

    if ( have_posts() ) : while ( have_posts() ) : the_post();
  15. ousmanemariko
    Member
    Posted 2 years ago #

    The following is what I have but I'm not getting anything. I don't think I did it right.

    get_header(); // Loads the header.php template. ?>
    
    	<div id="content" class="hfeed content">
    
    		<?php do_atomic( 'before_content' ); // sboard_before_content ?>
    
    <?php
    
    	$datetime = null;
    	if ( have_posts() ) : while ( have_posts() ) : the_post();
    
    	if ( $datetime === null ) {
    		$datetime = (int) get_the_time( 'Ymd' );
    	} else if ( (int) get_the_time( 'Ymd' ) > $datetime ) { ?>
    		<div class="my-post-date">
    			<?php the_time( 'F d, Y' ); ?>
    		</div>
    	<?php }
    
    	?>
    
    			<div id="post-<?php the_ID(); ?>" class="<?php sboard_entry_class(); ?>">
    
    				<?php do_atomic( 'before_entry' ); // sboard_before_entry ?>
    
    				<div class="entry-content">
    					<?php the_content( sprintf( __( 'Continue reading %1$s', sboard_get_textdomain() ), the_title( ' "', '"', false ) ) ); ?>
    					<?php wp_link_pages( array( 'before' => '<p class="page-links pages">' . __( 'Pages:', sboard_get_textdomain() ), 'after' => '</p>' ) ); ?>
    				</div><!-- .entry-content -->
    
    				<?php do_atomic( 'after_entry' ); // sboard_after_entry ?>
    
    			</div><!-- .hentry -->
    
    			<?php if ( is_singular() ) { ?>
    
    				<?php do_atomic( 'after_singular' ); // sboard_after_singular ?>
    
    				<?php comments_template( '/comments.php', true ); // Loads the comments.php template ?>
    
    			<?php } ?>
    
    			<?php endwhile; ?>
    
    		<?php else: ?>
    
    			<?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?>
    
    		<?php endif; ?>
    
    		<?php do_atomic( 'after_content' ); // sboard_after_content ?>
    
    	</div><!-- .content .hfeed -->
    
    <?php get_footer();
  16. Jacob Chappell
    Member
    Posted 2 years ago #

    Sorry again, I see another problem. As I was saying last night, none of this code I'm giving you is tested, it's just a foundation more or less. But I do see one thing that I forgot to put in there. We're not actually ever setting the new datetime if it succeeds. Also, we need to actually echo the first datetime as well. Change only this part:

    <?php
    
    $datetime = null;
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    
    if ( $datetime === null ) {
    	$datetime = (int) get_the_time( 'Ymd' );
    } else if ( (int) get_the_time( 'Ymd' ) > $datetime ) { ?>
    	<div class="my-post-date">
    		<?php the_time( 'F d, Y' ); ?>
    	</div>
    <?php }
    
    ?>

    to this:

    <?php
    
    $datetime = null;
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    
    if ( $datetime === null ) {
    	$datetime = (int) get_the_time( 'Ymd' );
    	?>
    
    	<div class="my-post-date">
    		<?php the_time( 'F d, Y' ); ?>
    	</div>
    
    	<?php
    } else if ( (int) get_the_time( 'Ymd' ) > $datetime ) {
    	$datetime = (int) get_the_time( 'Ymd' ); // reseting the datetime
    	?>
    
    	<div class="my-post-date">
    		<?php the_time( 'F d, Y' ); ?>
    	</div>
    
    	<?php
    }
    
    ?>
  17. ousmanemariko
    Member
    Posted 2 years ago #

    It's now showing the first date at the top of the page. Now all I need is to get it to the rest.

    I'm not good enough at php to even modify the code, but I'll see what I can do. Thanks for the help.

  18. Jacob Chappell
    Member
    Posted 2 years ago #

    No problem!

    Are you sure that the posts you're testing with were actually made on different days?

  19. ousmanemariko
    Member
    Posted 2 years ago #

    Yea. I just put a test post up now. The leading date changed, but the previous date didn't move down with the last post.

  20. ousmanemariko
    Member
    Posted 2 years ago #

    I'm probably doing something wrong. Not sure what..

  21. Jacob Chappell
    Member
    Posted 2 years ago #

    Oh, I bet you're not ordering by post date descending. Add this code *right before* you begin the loop. I'll leave the before and after lines in tact so that you know exactly where to place it.

    $datetime = null;
    // the following lines are new
    global $query_string;
    query_posts( $query_string . '&orderby=date&order=DESC' );
    // end new lines
    if ( have_posts() ) : while ( have_posts() ) : the_post();

    Since you're using query_posts to alter the query, you may also wish to reset it after the loop:

    <?php endwhile; ?>
    
    		<?php else: ?>
    
    			<?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?>
    
    		<?php endif; ?>
    		<?php
    
    		// the following lines are new
    		rewind_posts();
    		wp_reset_query();
    		// end new lines
    
    		?>
  22. ousmanemariko
    Member
    Posted 2 years ago #

    Still a no-go. :/

  23. Jacob Chappell
    Member
    Posted 2 years ago #

    Wait... >.> I feel so stupid!! If the dates are descending then of course post dates won't get larger...they'll get smaller!!!

    Change the comparison operator to less-than hehe.

    This:

    } else if ( (int) get_the_time( 'Ymd' ) > $datetime ) {

    to this:

    } else if ( (int) get_the_time( 'Ymd' ) < $datetime ) {

    I so hope this works!

  24. ousmanemariko
    Member
    Posted 2 years ago #

    Holy crap. It works! Thank you SO much. I really appreciate your help.

  25. Jacob Chappell
    Member
    Posted 2 years ago #

    Yay :) So glad I could help! Take care!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.