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;
}