- This topic has 16 replies, 3 voices, and was last updated 6 months, 3 weeks ago by
Tom.
-
AuthorPosts
-
June 30, 2020 at 1:39 am #1346600
Rohan Verma
We want to have exact same look for the metadata (we also want author image with the name)
: https://prnt.sc/t8zl7w.I have attached the website link as well
June 30, 2020 at 7:58 am #1347141David
StaffCustomer SupportHi there,
try adding this PHP Snippet:
// set entry header post meta add_action( 'wp', function() { if ( is_single() ) { add_filter( 'generate_header_entry_meta_items', function( $items ) { return array( 'author', 'date', 'comments-link', ); } ); } } ); // add avatar to author add_filter( 'generate_post_author_output', function() { return sprintf( ' <div class="avatar vcard">%4$s</div><span class="byline"><span class="label">by</span><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' ) ) ); } ); // Set date to latest and no link add_filter( 'generate_post_date_output', function( $output, $time_string ) { $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>'; $updated_time = get_the_modified_time( 'U' ); $published_time = get_the_time( 'U' ) + 86400; if ( $updated_time > $published_time ) { $time_string = '<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( '<span class="posted-on"><span class="date-label">Posted on </span>%s</span>', $time_string ); }, 10, 2 ); // Remove labels from comments number link add_filter( 'comments_number', 'wporg_com_num', 10, 2 ); function wporg_com_num ( $out, $num ) { // Two parameter as in filter described if ( 0 === $num ) { $out = 'Leave Comment'; // If No comments } elseif ( 1 === $num ) { $out = ' 1 '; // If 1 comment } else { $out = $num; // More than 1 comment } return $out; }
And this CSS to style it:
/* Add top bottom border to meta */ .single .entry-header .entry-meta { padding: 10px 0; border-top: 1px solid; border-bottom: 1px solid; border-color: #ccc; } /* Make all elements flex */ .single .entry-header .entry-meta, .single .entry-header .entry-meta>span { display: flex; align-items: flex-end; } /* Postition labels over meta */ .single .entry-header .entry-meta>span { flex-direction: column; align-items: flex-start; flex-basis: 20%; } /* Add border to posted-on and force comments over */ .single .entry-header .posted-on { flex: 1; padding-left: 10px; border-left: 1px solid #ccc; } /* Vertical Align Comments */ .single .entry-header .entry-meta .comments-link { align-items: flex-end; align-self: center; } /* set meta label font size */ .single .entry-header .byline .label, .single .entry-header .posted-on .date-label { font-size: 12px; } /* Style Avatar */ .single .entry-header .avatar img { border-radius: 100%; height: 36px; width: 36px; margin-right: 10px; } /* style comments link */ .single .entry-header .comments-link a { font-size: 12px; background-color: #ff6666; color: #fff !important; padding: 5px 13px; border-radius: 3px 3px 0 3px; position: relative; } .single .entry-header .comments-link a:before { content: ''; display: block; width: 0; height: 0; position: absolute; right: 0; top: 100%; border: 0 solid transparent; border-width: 6px 10px; border-left-width: 0; border-top-color: #AA0000; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 2, 2020 at 11:50 am #1349828Rohan Verma
Thanks David that code works. Can we can get this style https://prnt.sc/tanpmf
I am liking this one more than the previous one. Date under the author name
July 2, 2020 at 12:04 pm #1349835Rohan Verma
And also this type of category style https://prnt.sc/tanzm9
If possible please guide me. Thanks
July 2, 2020 at 2:30 pm #1349908Tom
Lead DeveloperLead DeveloperHi there,
For that style, you just need this:
.entry-header .entry-meta { display: flex; flex-direction: column-reverse; }
To move your categories, you’ll want to disable the output in Customize > Layout > Blog.
Then, add this:
add_action( 'generate_before_entry_title', function() { $categories_list = get_the_category_list( _x( ' ', 'Used between list items, there is a space after the comma.', 'generatepress' ) ); if ( $categories_list ) { printf( '<span class="entry-meta cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>', _x( 'Categories', 'Used before category names.', 'generatepress' ), $categories_list ); } $tags_list = get_the_tag_list( '', ' ' ); if ( $tags_list ) { printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span> ', esc_html_x( 'Tags', 'Used before tag names.', 'generatepress' ), $tags_list ); } } );
It’ll need some CSS, but it should get you started.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 2, 2020 at 10:12 pm #1350135Rohan Verma
Tags are not showing up. I have checkmark it from layout blog but still, no tag is showing up in a single post. I have updated our site link
July 2, 2020 at 10:26 pm #1350142Rohan Verma
and how to show the date under the author name. With your code date is showing above author
July 3, 2020 at 9:35 am #1350841Tom
Lead DeveloperLead DeveloperJust updated the function above.
Remove
flex-direction: column-reverse;
if you want the order reversed.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 3, 2020 at 9:51 am #1350855Rohan Verma
Tags are showing at the top after adding the PHP. I want the tag to be placed after the content area just like the default and the category above title
July 3, 2020 at 2:30 pm #1351060Tom
Lead DeveloperLead DeveloperIn that case, remove the code I just added. You should just be able to keep the “Display post tags” option turned on in Customize > Layout > Blog.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 4, 2020 at 1:34 am #1351366Rohan Verma
Hello, I have enabled that option still no tags showing up. All other meta options are working only tags are not showing up. Check screenshot: https://prnt.sc/tbm7f1
I have updated site link as well so that you can check
July 4, 2020 at 1:45 pm #1352075Tom
Lead DeveloperLead DeveloperAny other functions active on the site? Something must be turning them off.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 4, 2020 at 10:27 pm #1352315Rohan Verma
Yes, there are some codes we are using;
1) To show updated date
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”>Last Updated on: %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( ‘<span class=”posted-on”>%s</span> ‘,
$time_string
);
}, 10, 2 );
function rocket_lazyload_exclude_src( $src ) {
$src[] = ‘Logo-RMG-black.png’;return $src;
}2) To show author image alongside the author name single post
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<span class=”author-name” itemprop=”name”>%3$s</span></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’,
);
} );July 5, 2020 at 10:34 am #1352905Tom
Lead DeveloperLead DeveloperThis function is preventing tags from showing up:
add_filter( 'generate_footer_entry_meta_items', function( $items ) { return array( 'categories', ); } );
What was the original intention of the filter? To exclude something?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 5, 2020 at 10:37 am #1352908Rohan Verma
No to show the author image alongside the name in a single post. Only for this purpose > https://prnt.sc/tca5rw
can you share an alternate PHP code
-
AuthorPosts
- You must be logged in to reply to this topic.