[Resolved] Order the meta items to author, read time, dates

[Anna]

Hi Generatepress,

I’ve followed many posts in the forum to display the author name, publish date, update date, and estimated read time. However, I hit the limits of my CSS knowledge and haven’t found the answer in the forums to my questions.

2 related questions:
1. How can I get the order of the meta items to show like this

by Anna Rider Updated: July 30, 2021 Updated July 25, 2021 ~8 mins to read

Currently, the behavior looks like this:

Published: July 25, 2021 ~8 mins to readby Anna Rider

Or like this if there was an update

Updated: June 30, 2022 Published: June 24, 2022 ~6 mins to readby Anna Rider

In other words, I want to rearrange the order of the meta items and have appropriate spacing in between. I prefer them to show on 1 line but if that looks terrible, especially on mobile, I’m ok with making it 2 lines, in which cause I’d rather have the author and estimated read time on one line and the 2 dates on a second separate line.

Second related issue (let me know if I need to open a new ticket for this issue), is that the meta font size appears to get larger when I view the single post on a smaller (mobile) screen. It appears on desktop as the same font size as the body content. But on mobile, the meta font size is larger than the body which looks weird to me. How do I make the meta the same size as the body regardless of the screen size?

Here’s the code I’m using:

function tu_estimated_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );

    return $time . ' mins';
}

add_filter( 'generate_post_date_output', function( $output ) {
    $output .= '~' . tu_estimated_reading_time() . ' to read';

    return $output;
} );

/* https://generatepress.com/forums/topic/how-to-show-last-updated-date-as-well-as-the-original-published-date/
 * https://generatepress.com/forums/topic/how-to-show-published-and-updated-dates/*/
/* Display updated date */
.posted-on .updated,
.posted-on .updated + .entry-date{
    display: inline-block;
    margin-right: 1em;
}
/*Add date prefixes */
.posted-on .updated:before {
    content: 'Updated: ';
}
.posted-on .entry-date:before {
    content: 'Published: ';
}
.entry-meta {
   display: inline-block;
}
.posted-on .entry-date.published {
        order: -2;
    }

[Fernando]

Hi Anna,

Here’s a PHP snippet you can try:

add_filter( 'generate_post_date_output', function( $output, $time_string ) {
	
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Published on %2$s</time>';

if ( get_the_date() !== get_the_modified_date() ) {
	$time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Updated: %4$s</time>
	<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Published: %2$s</time>';
}

$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);

return sprintf( '<span class="posted-on">%s</span> ',
$time_string
);
}, 10, 2 );

function tu_estimated_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );

    return $time . ' mins';
}

add_filter( 'generate_post_date_output', function( $output ) {
    $output .= '~' . tu_estimated_reading_time() . ' to read';

    return $output;
} );

I included your ttu_estimated_reading_time PHP snippet in the code above.

You shouldn’t need the CSS anymore

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Yes, to avoid confusion, may you start a new ticket for the second issue?

Side note: Here’s an alternative to your estimated time function if you want seconds in your estimated time:

function tu_estimated_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
	$m = floor($word_count / 200);
    $s = floor($word_count % $wpm / ($wpm / 60));
	if($m < 1) {
		$time = $s . ' second' . ($s <= 1 ? '' : 's');
	} else {
		$time = $m . ' minute' . ($m <= 1 ? '' : 's') . ', ' . $s . ' second' . ($s <= 1 ? '' : 's');
	}
	
    return $time;
}

add_filter( 'generate_post_date_output', function( $output ) {
    $output .= '~ ' . tu_estimated_reading_time() . ' to read';

    return $output;
} );

Hope this helps!

[Anna]

Hi Fernando,

I used your solution but I don’t see a change.
What I did:
1. Remove the CSS related to the dates.
2. Replaced my tu_estimated_reading_time snippet with your code snippet.

The result is I see no change to the “readby”. It is still stuck as 1 word How do I rearrange the items per my desired order as well as add a space.

I cleared the cache and reloaded (hard reload with the Network tab open and Disable cache checked).
Here’s a link to my staging site where you can see the meta information doesn’t meet the information I’m looking for (it’s missing the update date only has publish date, the date comes before the author name, and the “readBy” is one word)

https://wn9dh3ioix-staging.onrocket.site/emulsion/

Thanks for your help.

[Fernando]

What’s the entire PHP snippet you used and can you give a sample format?

[Anna]

Hi Fernando,

I used the snippet you shared in your reply #2274359.

add_filter( 'generate_post_date_output', function( $output, $time_string ) {
	
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Published on %2$s</time>';

if ( get_the_date() !== get_the_modified_date() ) {
	$time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Updated: %4$s</time>
	<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Published: %2$s</time>';
}

$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);

return sprintf( '<span class="posted-on">%s</span> ',
$time_string
);
}, 10, 2 );

function tu_estimated_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes( $content );
    $clean_content = strip_tags( $clean_content );
    $word_count = str_word_count( $clean_content );
    $time = ceil( $word_count / $wpm );

    return $time . ' mins';
}

add_filter( 'generate_post_date_output', function( $output ) {
    $output .= '~' . tu_estimated_reading_time() . ' to read';

    return $output;
} );

The current format using the above snippet you provided is:

Published on August 4, 2022 ~9 mins to readby Anna Rider

My desired format is the following:

By Anna Rider Updated on August 5, 2022 Published on August 4, 2022 ~9 mins to read

[Ying]

Hi Anna,

Try adding this CSS:

.single .entry-meta {
    display: flex;
}

.single .entry-meta  span.byline {
    order: -1;
    padding-right: 10px;
}

[Anna]

Hi Ying,

Thank you for your help and providing the CSS snippet. This fixed the metadata for a post that has been updated. Here is an example: https://garlicdelight.com/emulsion/

However, it still looks like the undesired metadata for a post that has not been updated. You can see the example here:
https://garlicdelight.com/chopped-caprese-salad/

How do I make the published but never updated post have the same metadata appearance as an updated post?

Thanks for your help.

[Fernando]

How are you seeing it from your end? It seem like it’s in the right order from my end already: https://share.getcloudapp.com/12uL2P5k

[Anna]

Hi Fernando,

Yes, you are right because of this snippet, it is the desired order.

.single .entry-meta {
    display: flex;
}

However, when I shrink my screen to a mobile view, the metadata is extremely hard to read because the items are on multiple lines now. This is worse for me in terms of readability. How can I get the same result as display: flex; but on smaller screens/mobile the words flow on 1 line like they do with this snippet.

.single .entry-meta {
    display: inline-block;
}

Meaning I would prefer the following:

On desktop

by Anna Rider Published: August 23, 2021 ~5 mins to read

On mobile

by Anna Rider
Published: August 23, 2021
~5 mins to read

Instead of this undesirable result:

by Anna Published: August. ~5 mins
Rider 23, 2021 to read

My problem with using inline-block is that we get back to the incorrect order of metadata.

[David]

Hi there,

change:

.single .entry-meta {
    display: flex;
}

to:

.single .entry-meta {
    display: flex;
    flex-wrap: wrap;
}

[Anna]

Hi David,

Thank you. Your solution to add the wrap helped significantly.
1. Just curious, if it possible to have the dates on the same line if they fit the width? So that Update and Publish are on the same lines to leave less whitespace around the metadata? If that’s asking too much, I’m happy to leave it as is.

2. One question about the display, when I see the metadata on this post in mobile mode, the “Published” text appears a bit higher to my eye than the byline. Why is that? Here is an example post where you can see this behavior when you shrink your screen down to mobile view size. https://garlicdelight.com/apple/

3. The metadata on my Category pages still uses the same old ordering of metadata items including no space between “read” and “by” so it looks like “readby”. How do I get this new format to show up on my Category pages. Here is an example of the current behavior: https://garlicdelight.com/recipes/

Thanks for your help.

[Fernando]

1-3. Try turning these:

.single .entry-meta {
    display: flex;
    flex-wrap: wrap;
}

.single .entry-meta  span.byline {
    order: -1;
    padding-right: 10px;
}

into:

.single .entry-meta, .category .entry-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}

.single .entry-meta  span.byline, .category .entry-meta span.byline {
    order: -1;
    padding-right: 10px;
}

.single .entry-meta span.posted-on time, .category .entry-met span.posted-on time {
    display: inline !important;
}

[Anna]

Hi Fernando,

Thank you for your help. I implemented the CSS you showed me and I like the formatting on mobile plus the dates are in line with the byline.
However, the “readby” problem is back where it is 1 word and missing a space. Also the byline is at the end of the metadata items now instead of the first item.

Do you know how to fix this?

Here’s an example: https://garlicdelight.com/remoulade-sauce/

Thanks for your help.

[Fernando]

It should look like this with the CSS I provided: https://share.getcloudapp.com/Z4uDbe4E

Looking at the CSS from my end, it seems it hasn’t been updated/changed yet.

I looked at the CSS you added, and it seems the that selectors are incorrect. Try copying and pasting the one I provided.

[Anna]

Hi Fernando,

Yes you are right. My apologies, I accidentally had .single twice.

I’m curious. If I want to remove the meta data from showing up on Category pages, would I hide it in the CSS or another setting under Customizer?

Also, if I want the reading time to display on the same line as the Publish date when I shrink the screen to a mobile view how would I achieve that?

[Author]

Posts