- This topic has 6 replies, 2 voices, and was last updated 3 years, 3 months ago by
David.
-
AuthorPosts
-
October 30, 2019 at 1:31 am #1048497
Shivam
Hey team, Can you please give me the PHp and CSS code to make this type of exact header…
click here to check screenhot click here to visit reference website
October 30, 2019 at 6:52 am #1048699David
StaffCustomer SupportHi there,
you can use a Header Element, it doesn’t have to display the featured background image, like this example which gets you 80% of the way there:
https://docs.generatepress.com/article/page-hero-examples/#example-2
To get the Reading Time you can add this Snippet to create a
[reading-time]
shortcode: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; } add_shortcode('reading-time', 'tu_estimated_reading_time');
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 30, 2019 at 6:52 am #1048701David
StaffCustomer SupportHi there,
you can use a Header Element, it doesn’t have to display the featured background image, like this example which gets you 80% of the way there:
https://docs.generatepress.com/article/page-hero-examples/#example-2
To get the Reading Time you can add this Snippet to create a
[reading-time]
shortcode: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; } add_shortcode('reading-time', 'tu_estimated_reading_time');
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 30, 2019 at 7:08 am #1048721Shivam
Thank you and how to add that category archive in that style above header?
October 30, 2019 at 7:28 am #1048741David
StaffCustomer SupportYou can use the
{{post_terms.taxonomy}}
template tag – add it to your header like so:<span class="hero-terms">{{post_terms.category}}</span>
Then this CSS to style it:
.hero-terms { display: block; font-size: 0; margin-bottom: 30px; } .hero-terms a { background-color: red; color: #fff; font-size: 12px; border-radius: 5px; padding: 10px; margin: 7px; }
Having different colors for different categories is a lot more complex, not simply done if you have lots of them
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 30, 2019 at 7:32 am #1048745Shivam
ok thanks for your help, one colour is enough…one mmore question i don’t know why but after installing elementor my all page and post became full width, How can i fix it…
October 30, 2019 at 7:33 am #1048749David
StaffCustomer SupportI saw your other topic related to Elementor. One of us will answer there.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.