WordPress.org

Ready to get started?Download WordPress

Forums

WP Tiles
[resolved] Change the post date format (4 posts)

  1. threehats
    Member
    Posted 6 months ago #

    Hi there,

    My client is keen to change the date format of the posts to M d, Y [Oct 02 2013], but that particular option isn't available in the byline settings. Is there a way I can change it?

    And, while I'm at it, I'd be even more grateful if the CSS for this layout could be sorted so that it was

    Oct
    02
    2013

    with it being justified, making day font-size much larger. Too much of an ask?

    You can see where I'm heading under 'Latest from our blog' on the mock site here: http://lift.threehats.co.nz/

    Many thanks in advance!

    Jane

    http://wordpress.org/plugins/wp-tiles/

  2. Mike
    Member
    Plugin Author

    Posted 6 months ago #

    Hi Jane,

    Really cool implementation of WP Tiles there on your website! Hats off :)

    The simplest way of getting the date to display M d, Y, is by setting the date format for your whole WP install to that format. The first WP Tiles date option defaults to the one from your options.

    If this is not an option, however, you need to do something more hacky. I've been meaning to implement a filter for the byline format, but never got around to it. I may include it in the next release.

    Until that time, you can loop over all the tiles data using the wp-tiles-data filter. You can do something like this:

    add_filter( 'wp-tiles-data', function( $tiles, $posts ) {
        $post = reset( $posts );
        foreach ( $tiles as &$tile ) {
            $tile['byline'] = mysql2date( 'M d, Y', $post->post_date );
            $post = next( $posts );
        }
    }, 10, 2 );

    Once you have this function, you can modify the byline to suit your needs exactly. To separate month day and year, change it to this:

    add_filter( 'wp-tiles-data', function( $tiles, $posts ) {
        $post = reset( $posts );
        foreach ( $tiles as &$tile ) {
            list( $month, $day, $year ) = array(
                mysql2date( 'M', $post->post_date ),
                mysql2date( 'd', $post->post_date ),
                mysql2date( 'Y', $post->post_date )
            );
    
            $formatted_date =
                "<span class='month'>$month</span>
                 <span class='day'>$day</span>
                 <span class='year'>$year</span>";
    
            $tile['byline'] = $formatted_date;
            $post = next( $posts );
        }
        return $tiles;
    }, 10, 2 );

    Good luck!
    Mike

  3. threehats
    Member
    Posted 6 months ago #

    Hi Mike,

    Thanks for the great feedback on the implementation, cheers!

    Now for the 'dur' moment. I've just found the date format customize section in the main settings. So that's all good (indication of expecting it to be hard, so look for the hard way!)

    But to double-check (and possibly a second 'dur' moment), where should I put the second filter you have listed? In the theme's functions.php page? The child's?

    And as I haven't had to use the first 'wp-tiles-data' filter, should there be an alteration to the code?

    And would this be an example css for the date?

    wp-tile-container .grid .extra .day {
    font-size: 20px;
    }

    I'm at the 'a little knowledge is dangerous' stage, I think...

  4. Mike
    Member
    Plugin Author

    Posted 6 months ago #

    Hehe, no problem. WP settings can be a mess sometimes ('wait.. I'm sure there was a setting for that somewhere').

    Anyway, if you drop the second snippet in your functions.php, it should work out of the box and the css snippet should work as well (just make sure you add a '.' before wp-tile-container).

    That said, the snippet is using a closure, which only works with PHP >= 5.3. To really make it work anywhere, turn it into something like this:

    add_filter( 'wp-tiles-data', 'wp_tiles_custom_date_formatting', 10, 2 );
    function wp_tiles_custom_date_formatting( $tiles, $posts ) {
        $post = reset( $posts );
        foreach ( $tiles as &$tile ) {
            list( $month, $day, $year ) = array(
                mysql2date( 'M', $post->post_date ),
                mysql2date( 'd', $post->post_date ),
                mysql2date( 'Y', $post->post_date )
            );
    
            $formatted_date =
                "<span class='month'>$month</span>
                 <span class='day'>$day</span>
                 <span class='year'>$year</span>";
    
            $tile['byline'] = $formatted_date;
            $post = next( $posts );
        }
        return $tiles;
    }

Reply

You must log in to post.

About this Plugin

About this Topic