Support » Fixing WordPress » Dynamic date?

  • Resolved ousmanemariko

    (@ousmanemariko)


    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.

Viewing 15 replies - 1 through 15 (of 24 total)
  • 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().

    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.

    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.

    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 🙂

    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!

    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.

    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>

    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();

    I haven’t added the loop yet.

    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>

    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 }
    
    	?>

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

    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();

    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();

    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
    }
    
    ?>
Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘Dynamic date?’ is closed to new replies.