Entry Meta Style

Example 1

To apply this style to your site, first you need to add this PHP snippet:

add_filter( 'generate_post_author_output', function() {
    return sprintf( ' <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' ) )
        )
    );
} );

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

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    return array(
        'categories',
        'post-navigation',
    );
} );

Then style it with this CSS snippet:

.byline img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

.comments-link,
.posted-on {
	border-left: 1px solid #ddd;
	padding-left: 10px;
	margin-left: 10px;
}

Example 2

To apply this style to your site, first you need to add this PHP snippet:

add_filter( 'generate_header_entry_meta_items', '__return_empty_array' );

add_action( 'generate_after_entry_title', function() {
    $header_post_types = apply_filters(
		'generate_entry_meta_post_types',
		array(
			'post',
		)
    );

    if ( ! in_array( get_post_type(), $header_post_types ) ) {
        return;
    }
    ?>
        <div class="entry-meta entry-meta-container">
            <div class="entry-meta-gravatar">
                <?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?>
            </div>

            <div class="entry-meta-info">
                <div class="entry-meta-author">
                    <?php generate_do_post_meta_item( 'author' ); ?> in <?php generate_do_post_meta_item( 'categories' ); ?>
                </div>

                <div class="entry-meta-date">
                    <?php generate_do_post_meta_item( 'date' ); ?>
                </div>
            </div>
        </div>
    <?php
} );

Then style it with this CSS snippet:

.entry-meta-container {
    display: flex;
    align-items: center;
}

.entry-meta-gravatar {
    margin-right: 10px;
}

.entry-meta-gravatar img {
    width: 50px;
    border-radius: 50%;
}

.entry-meta-info {
    display: block;
}

Example 3

To apply this style to your site, first you need to add this PHP snippet:

// Generate author image and link in separate containers
add_filter( 'generate_post_author_output', function() {
    return sprintf( ' <div class="author vcard">%4$s</div><div class="author-wrap"><span class="label">Written by</span><a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></div>',
            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' ) )
    );
} );

// Filter meta items to display date and author
add_filter( 'generate_header_entry_meta_items', function() {
    return array(
        'date',
        'author',
    );
} );

// Filter post date to display latest date
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<span class="label">Last updated: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';

    if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
        $time_string = '<span class="label">Last 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() ),
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date() )
    );

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

Then style it with this CSS snippet:

.entry-meta:not(footer),
.entry-meta .posted-on,
.entry-meta .author-wrap {
    display: flex;
}

.entry-meta {
    align-items: center;
    justify-content: center;
}

.entry-meta .posted-on,
.entry-meta .author-wrap {
    flex-direction: column;
    font-size: 16px;
    padding: 0 25px;
    flex: 1;
}

.entry-meta .posted-on {
    text-align: right;
}

.entry-meta .label {
    font-size: 14px;
    color: #aaa;
    margin-bottom: 0.25em;
}

.author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    vertical-align: middle;
}