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

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

Home Forums Support Order the meta items to author, read time, dates

Viewing 15 posts - 16 through 30 (of 30 total)
  • Author
    Posts
  • #2315191
    Fernando
    Customer Support

    You should still be able to disable it in the customizer.

    With regards to the time reading, try modifying the PHP here: https://generatepress.com/forums/topic/order-the-meta-items-to-author-read-time-dates/#post-2315182:~:text=3%3A02%20pm-,%232304720,-EDIT%20%7C%20MOVE

    Into:

    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 . '~' . tu_estimated_reading_time()
    );
    }, 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';
    }
    #2351273
    Anna

    Hi Fernando,

    Thanks for the updated snippet. The result looks like this:

    by Anna Rider
    Posted: Updated: August 5, 2022 Posted: Published: August 4, 2022~9 minutes

    1. What do I need to change to remove the Posted:?
    Here is my Additional CSS in the Customizer

    
    /* Add date prefixes */
    .posted-on .updated:before {
        content: 'Edited: ';
    }
    .posted-on .entry-date:before {
        content: 'Posted: ';
    }
    .entry-meta {
       display: inline-block;
    }
    .posted-on .entry-date.published {
            order: -2;
    }

    2. How do I add a space before the ~9 minutes so it doesn’t look squashed next to the Publish date.

    3. How do I make this meta data text smaller? I didn’t find an option in the Typography section of the Customizer.

    Thank you so much for your help. I really appreciate it.

    #2351278
    Fernando
    Customer Support

    1. Remove this:

    .posted-on .entry-date:before {
        content: 'Posted: ';
    }

    2. Add this:

    .entry-meta time.entry-date.published {
        padding-right: 5px;
    }

    3. In Typography, add a font rule. Set the Target to Custom.entry-header .entry-meta

    #2351967
    Anna

    Hi Fernando,

    Wow thank you so much for your help on the CSS. It was really useful. The “Posted: ” went away.

    I also added the padding. But I would like more padding because the words still look stuck together without a space, especially on mobile. When I increased the padding from padding-right: 5px; to padding-right: 10px; I didn’t see a difference. Is there another way I can use to add padding? So it doesn’t look like this “Published on August 23, 2021~5 minutes”. I would prefer it look like this “Published on August 23, 2021 ~5 minutes”

    I didn’t know about the Typography Manager. I was using GP theme 3.1.3 but only switched the new typography manager on. It’s so powerful! My metadata looks much smaller now which is fantastic. Thank you for helping me with it.

    On Mobile, I noticed the Publish date is on a different line than the byline. Is it hard to make them the same line? This is when I shrink the screen very small? This is not a big deal to me. Just curious what the options are.

    Thank you so much for your excellent help Fernando. I really appreciate it!

    #2353544
    Fernando
    Customer Support

    Try this code instead:

    .entry-meta time.entry-date.published:after {
        content: " ";
        padding-right: 5px;
    }

    Then, for the second issue, try adding this PHP snippet first:

    add_filter('generate_header_entry_meta_items', function($output){
    	if(is_single()){
    		return array(
    			'author',
    			'date',
    		);
    	}
    	return $output;
    }, 10);

    Let me know once done, and we’ll proceed from this.

    #2358232
    Anna

    Hi Fernando,

    I updated the CSS. The space between the last date and the reading time looks great now. Thank you so much. Is it possible to also apply this to the date and word “Publish”?

    I added the PHP snippet you requested.

    Thank you again for your help. I really appreciate it.

    #2358537
    Fernando
    Customer Support

    Great! It’s possible, but let’s focus on fixing the alignment first. On mobile, it still wraps. So try to remove this code:

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

    Hi Fernando,

    I removed the CSS per your recommendations. It looks so much better! Thanks for your suggestion. Can I add the space now?

    #2360934
    Fernando
    Customer Support

    To clarify, are you referring to these spaces?: https://share.getcloudapp.com/L1u9Ww54

    #2363381
    Anna

    Hi Fernando,

    Great question. Sorry I was not precise. I mean the space between the “2022” and “Published” is narrower than the space between “Rider” and “Updated” as well as smaller than the space between “2022” and “~6 mins”. Is there a way to make the space between “2022” and “Published” consistent with the padding that is between “2022” and “~6 min” if there is an update, otherwise keep it the same if there is only a Published date because the post has never been updated?

    Let the know if that’s unclear, and I can try to explain a different way.

    Also I forgot to ask earlier, what does the PHP you gave in https://generatepress.com/forums/topic/order-the-meta-items-to-author-read-time-dates/page/2/#post-2315191 and https://generatepress.com/forums/topic/order-the-meta-items-to-author-read-time-dates/page/2/#post-2353544 do?

    Thank you very much again for your help.

    #2363442
    Fernando
    Customer Support

    In you Additional CSS, you have this code:

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

    Replace 10px with 5px

    Then add this as well:

    .single .entry-meta span.posted-on .updated-date {
        padding-right: 5px;
    }

    Those snippets are to fix the alignment and order of the entry meta.

    #2390261
    Anna

    Hi Fernando,
    It looks great. I’m really grateful for all of your help with formatting the metadata. One final question before I ask to close the ticket, what’s the PHP snippet do that you gave me in this comment? https://generatepress.com/forums/topic/order-the-meta-items-to-author-read-time-dates/page/2/#post-2315191
    Thank you very much again.

    #2390584
    Fernando
    Customer Support

    It’s for the Date meta structure and for the time to read.

    You’re welcome Anna!

    #2396028
    Anna

    Thank you very much, Fernando. I really appreciate all your help. Marking as resolved.

    #2397487
    Fernando
    Customer Support

    You’re welcome Anna!

Viewing 15 posts - 16 through 30 (of 30 total)
  • You must be logged in to reply to this topic.