- This topic has 14 replies, 3 voices, and was last updated 5 years, 3 months ago by
David.
-
AuthorPosts
-
December 19, 2020 at 12:21 am #1586730
Shivam
Hey GeneratePress,
I had created a custom-designed header template with Elementor page Builder for my blog posts (check screenshot) (check live page). But it is actually slowing down my site because of additional requests and size.
This is why I have decided to use GeneratePress header element to create the same header.
Can you please provide me the required HTML tag and CSS for that?
Additional Info:
For the main heading, use the default H1 tag.
For subheading, I have created a custom field called “nerdsubheading”
For the social share button, use this shortcode “[social_warfare buttons=”facebook,twitter”]”December 19, 2020 at 6:19 am #1586970David
StaffCustomer SupportHi there,
the header element docs explain how to do that:
https://docs.generatepress.com/article/header-element-overview/
The elements content would be:
<h1>{{post_title}}</h1> <p>{{custom_field.nerdsubheading}}</p> [social_warfare buttons="facebook,twitter"]You can set the Header Elements padding, background colors and text colors.
For custom styling of the text elements:
.page-hero h1 { font-size: 54px; text-shadow: 2px 0px 2px rgba(0, 0, 0, 0.1); } .page-hero p { color: #BEF6FF; font-size: 27px; font-weight: bold; }December 19, 2020 at 6:40 am #1586997Shivam
Hey David, I know the basic. The problem is firstly, I want to wrap heading and subheading in one class, so I can add background to them.
Then the main thing I want to know from you is how I can style the author image, name, date and then finally social share button on the right side.. (check screenshot)
All these stylings can be easily done with a page builder like Elementor but I am not able to style the same way with CSS. So, if possible please help me with that.
December 19, 2020 at 9:38 am #1587319David
StaffCustomer SupportYou should apply the header element as i said above, just remove the Social Share Shortcode. Once thats done we can look at Hooking in the Author Byline and social icons below that.
December 19, 2020 at 10:30 am #1587362Shivam
Thank you David for your reply, I have added h1 and custom subtitle as per your instruction. And everything is working fine.. (Here is the page URL). It has already made a lot of difference in my page performance. (Now page is making 28 fewer requests and page size has also decreased)
Now i want to add date, author byline and social share button similarly like this… What to do next.
December 20, 2020 at 4:31 am #1587905Shivam
Hey David, any update?
December 20, 2020 at 6:55 am #1588190David
StaffCustomer SupportTry this:
1. Add this PHP Snippet to your site:
add_action('wp', function() { if (is_single() ) { add_filter( 'generate_header_entry_meta_items', '__return_empty_array' ); add_action( 'generate_after_header', 'db_custom_post_meta', 25 ); } }); function db_custom_post_meta() { $header_post_types = apply_filters( 'generate_entry_meta_post_types', array( 'post', ) ); if ( ! in_array( get_post_type(), $header_post_types ) ) { return; } ?> <div class="meta-wrapper grid-container"> <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' ); ?> </div> <div class="entry-meta-date"> Updated: <?php generate_do_post_meta_item( 'date' ); ?> </div> </div> </div> <div class="meta-social"> <code><!-- Shortcode goes here --></code> </div> </div> <?php }Note the line above:
<!-- Shortcode goes here -->replace all of that with your Social Share shortcode.Then add this CSS:
.entry-meta-container, .meta-wrapper { display: flex; align-items: center; font-size: 15px; padding: 10px 20px; } .entry-meta-gravatar { margin-right: 10px; } .entry-meta-gravatar img { width: 50px; border-radius: 50%; } .entry-meta-info { display: block; } .meta-social { margin-left: auto; }May need some tweaking
December 20, 2020 at 8:31 am #1588283Shivam
Hey David, Thanks most of the things worked very well (live page)
But I have two little issues now.
(1.) Social share shortcode is not working (check screenshot)
(Note: There is no problem in the shortcode as I am adding the shortcode anywhere in my post with post editor, it is working well)(2.) I want to remove “By” word from author byline.
Although I already tried this code given by Tom in one of the thread, but it didn’t work:
add_filter( 'generate_post_author_output', 'tu_remove_by_byline' ); function tu_remove_by_byline() { printf( ' <span class="byline">%1$s</span>', // WPCS: XSS ok, sanitization ok. sprintf( '<span class="author vcard" itemtype="https://schema.org/Person" itemscope="itemscope" itemprop="author"><a class="url fn n" href="%1$s" title="%2$s" rel="author" itemprop="url"><span class="author-name" itemprop="name">%3$s</span></a></span>', esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ), /* translators: 1: Author name */ esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ), esc_html( get_the_author() ) ) ); }(3.) I want to show updated date, currently, it is showing first published date.
December 20, 2020 at 11:16 am #1588413Tom
Lead DeveloperLead DeveloperHi there,
1. Instead of just the shortcode, you need to do this:
<?php echo do_shortcode( '[your-shortcode]' ); ?>2. Try this:
add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) { if ( 'author' === $item ) { $output = ''; } return $output; }, 20, 2 );3. This should help: https://docs.generatepress.com/article/generate_post_date_show_updated_only/
December 21, 2020 at 9:04 am #1589630Shivam
Hey, Tom Shortcode worked perfectly but the PHP code for removing “By” word from author didn’t work…
Secondly, I don’t know why but all the CSS code I have added in my customizer is not applying in mobile version of the site.
Note: I am not using any caching plugin and I have already cleared caching from browsers.
December 21, 2020 at 11:19 am #1589763Tom
Lead DeveloperLead DeveloperCan you try the updated function?
As for the CSS, make sure there are no parse errors in it. You can paste it into this tool to check: https://jigsaw.w3.org/css-validator/validator
December 22, 2020 at 7:31 am #1590823Shivam
Hey, the updated function also not working…
December 22, 2020 at 10:31 am #1591024David
StaffCustomer SupportCan you share all of the PHP you have added so we can see what the issue is
December 22, 2020 at 9:10 pm #1591500Shivam
/*PHP code for date,author and social share after header */ add_action('wp', function() { if (is_single() ) { add_filter( 'generate_header_entry_meta_items', '__return_empty_array' ); add_action( 'generate_after_header', 'db_custom_post_meta', 25 ); } }); function db_custom_post_meta() { $header_post_types = apply_filters( 'generate_entry_meta_post_types', array( 'post', ) ); if ( ! in_array( get_post_type(), $header_post_types ) ) { return; } ?> <div class="meta-wrapper grid-container"> <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' ); ?> </div> <div class="entry-meta-date"> Updated: <?php generate_do_post_meta_item( 'date' ); ?> </div> </div> </div> <div class="meta-social"> <?php echo do_shortcode( '[ss_social_share networks="twitter;Facebook" align="center" shape="rounded" size="small" labels="label" spacing="1" hide_on_mobile="0" total="0" all_networks="0" hover_animation="ss-hover-animation-1"]' ); ?> </div> </div> <?php } /**removing author link **/ add_filter( 'generate_post_author_output', function() { printf( ' <span class="byline">%1$s</span>', sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s <span class="fn n author-name" itemprop="name">%4$s</span></span>', __( 'by','generatepress'), 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() ) ) ); } ); /**remove by word from author meta**/ add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) { if ( 'author' === $item ) { $output = ''; } return $output; }, 20, 2 ); /**show updated date**/ add_filter( 'generate_post_date_show_updated_only', '__return_true' );December 23, 2020 at 1:27 am #1591659David
StaffCustomer SupportOk so remove this:
add_filter( 'generate_inside_post_meta_item_output', function( $output, $item ) { if ( 'author' === $item ) { $output = ''; } return $output; }, 20, 2 );Then change this line:
__( 'by','generatepress'),to:
__( '','generatepress'), -
AuthorPosts
- You must be logged in to reply to this topic.