49 jili vip login register download.Enjoy Free 888+200 Daily Legal Bonus

Resolved

Bri

(@tinnyfusion)

Good Afternoon,

I wonder if someone is able to assist with a CSS issue I have please?

I am currently working on localhost only and even though I am using LocalWP v8.3.2+6660 to develop, it seems that it will not let me share a live link (GraphQL error).

Anyway, I am using a couple of snippets to get min reading time and to also show published date of post and Last Updated date of post (not one or the other). These are both working just fine. The issue I am having is that when a post has been updated it (correctly shows) both the original published date as well as the last updated date which is what I want. However, I am struggling with the CSS to align these next to each other.

See below:

I would like the updated section to be to the right of the published part with a 1px grey line separating the two (EG: color: 333; border-right: 1px) as opposed to underneath it. I am thinking maybe display: inline-block; but I have hit a wall with this…

Here is the code I currently have:

// Calclate estimated reading time of Article/Post from number of words
function reading_time() {
    global $post;
    $content = get_post_field( 'post_content', $post->ID );
    $word_count = str_word_count( strip_tags( $content ) );
    $readingtime = ceil($word_count / 183); // Change to edit reading speed (WPM). Slow=100, Ave=183, and fast=260

    if ($readingtime == 1) {
      $timer = " min"; // minute
    } else {
      $timer = " mins"; // minutes
    }
    $totalreadingtime = $readingtime . $timer;

    return $totalreadingtime;
}

// Show both Published date and Last Updated date for Posts/Articles
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<span class="label">Published: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';

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

    $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date( 'jS F, Y' ) ), // Adjusted format for published date
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date( 'jS F, Y' ) ) // Adjusted format for modified date
    );

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


// Generate author image and name with reading time
add_filter( 'generate_post_author_output', function() {
    // Calculate reading time dynamically
    $reading_time = reading_time();

    // Output author information without the link
    return sprintf( '<div class="author vcard">%s</div><div class="author-wrap"><span>Written by <span class="author-name" itemprop="name">%s&nbsp;</span></span><span class="label" id="reading-time">Read Time: %s</span></div>',
            get_avatar( get_the_author_meta( 'ID' ) ),
            esc_html( get_the_author() ),
            $reading_time
    );
} );

add_filter( 'generate_header_entry_meta_items', function() {
    return array(
        'author',
        'date',
    );
} );

If you require any further information please let me know.

Thank you.

Viewing 15 replies - 1 through 15 (of 36 total)

1 2 3 →

David

(@diggeddy)

Tags