[Resolved] Design meta line (s. Screenshot)

[Horst]

Hi there,

I saw this screenshot in another thread here in the forum. How can the design of the meta line be redesigned as in the example? In addition to the content on my blog, I also added views. I would also like to take this into account. Do you have a solution for me?

Thank you very much and best regards, Horst

https://dl.dropboxusercontent.com/s/pfyz13ahv67uata/Screen%20Shot%202020-03-13%20at%2023.35.59.png?dl=0

[Tom]

Hi there,

What’s the main aspect you’re going for? The text descriptive text above the meta items?

You would need to set the HTML up appropriately, so the descriptive text had its own elements. For example, the views and read time don’t have the necessary HTML right now for that kind of layout.

Let me know 🙂

[Horst]

Hi there,
yes, that’s what it was about. I have attached the presentation.

I thought I had read about this topic here in the forum before, but I never found it again. When I found the screenshot (see above), I thought again that the topic had already been dealt with here.

If it is too difficult to complete the presentation in this way, I don’t want to do any unnecessary work. Thanks for the feedback.

Regards, Horst

https://dl.dropboxusercontent.com/s/y2yenkhki2bj1gc/2020-03-15_17h30_43.png?dl=0

[Tom]

Hi there,

It’s not easy, but it’s possible.

Can you share the function you’re currently using to add the gravatar + other items to the meta? We should be able to tweak it 🙂

[Horst]

Hi there,
I hope you don’t laugh now when you look at my adjustment (Part 2). Part 1 came from one of your threads in the forum.

This is how it works so far.

Thanks for your help.

Regards, Horst

Part 1

add_filter( 'generate_post_author', '__return_false' );
add_filter( 'generate_show_comments', '__return_false' );
add_filter( 'generate_post_date_output', 'tu_fancy_byline' );
function tu_fancy_byline( $date ) {
	printf( ' <span class="byline">%1$s</span>',
		sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></span>',
			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
			esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
			esc_html( get_the_author() ),
			get_avatar( get_the_author_meta( 'ID' ) )
		)
	);
	
	echo $date;

	if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
		echo '<span class="comments-link">';
			comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
		echo '</span>';
	}
}

Part 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 . ' Min.';
}

add_filter( 'generate_post_date_output', function( $output ) {
   $output .= ' | <span id="views">' . the_views() . '</span>' . '<span id="read-time"> Lesezeit: ' . tu_estimated_reading_time() . '</span>' ;
    return $output;  
 } 	);

[Tom]

Ok, let’s adjust it a bit:

add_filter( 'generate_post_author', '__return_false' );
add_filter( 'generate_show_comments', '__return_false' );
add_filter( 'generate_post_date_output', 'tu_fancy_byline' );
function tu_fancy_byline( $date ) {
    printf( ' <span class="byline">%1$s</span>',
        sprintf( '<div class="author-heading">Author</div><span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></span>',
            esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
            esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
            esc_html( get_the_author() ),
            get_avatar( get_the_author_meta( 'ID' ) )
        )
    );
	
    echo '<span class="date-wrapper"><span class="date-headline">Date</span>';
        echo $date;
    echo '</span>';

    if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
        echo '<span class="comments-link-wrapper"><span class="comments-link-heading">Comments</span>';
            echo '<span class="comments-link">';
                comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
            echo '</span>';
        echo '</span>';
    }

    echo '<span class="views-wrapper"><span class="views-heading">Views</span>';
        echo '<span id="views">' . the_views() . '</span>';
    echo '</span>';

    echo '<span class="read-time-wrapper"><span class="read-time-heading">Read Time</span>';
        echo '<span id="read-time"> Lesezeit: ' . tu_estimated_reading_time() . '</span>';
    echo '</span>';
}

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 . ' Min.';
}

It won’t be pretty right away, but it should give us the HTML we need to accomplish that layout.

Let me know 🙂

[Horst]

Hello Tom,

thank you very much. I have inserted the code. It looks good. Can you give me an example of the CSS needed? I would then (hopefully) be able to customize the rest of the content myself. That would be great.

Thanks for the great work.
Regards, Horst

[David]

Hi there,

try this CSS:

.single .entry-header .entry-meta,
.single .entry-header .entry-meta>span {
    display: flex;
}

.single .entry-header .entry-meta>span {
    flex-direction: column;
    align-items: center;
    flex: 1 0 20%;
    line-height: 3.5em;
}

.single .entry-header .entry-meta span>span,
.author-heading {
    border-left: 0;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
    width: 100%;
    text-align: center;

}

.single .entry-header .entry-meta>span>span:first-child,
.author-heading {
    border-bottom: 1px solid;
}

I think you still have the filter for the_views() function as the | is still being displayed.

[Horst]

Hello David,

Thank you very much for the great work. It looks exactly the way I wanted it to.

Thank you very much and best regards, Horst

[David]

You’re welcome – let us know if you need help with the mobile / tablet responsive views 🙂

[Horst]

Hello tom, hello david,

The compilation of the first part of the code used is probably due to the output of the update date. However, I would like to issue the date of the contribution. Can you tell if I’m right and how to change the code accordingly?

Otherwise everything has turned out very nicely. Thanks again.

Regards, Horst

[David]

I am seeing these 2 CSS styles in your site – maybe in your child theme ?

.posted-on .published {
    display: none;
}

.posted-on .updated {
    display: block;
}

If you remove them then it will display the published date.

[Horst]

Hi there,

have already found the error. CSS. : – /
Thanks.

Regards, Horst

[David]

Glad to hear that

[Horst]

Hi there,
I am just wondering whether the changed meta line could be transferred to a hero header. Would the effort be high or would this takeover be relatively easy?

I find this solution very nice.
https://torquemag.io/2020/03/consequences-of-not-updating-your-wordpress-website/

Best regards, Horst

[Author]

Posts