[Support request] Need some help in designing header

[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

[David]

Hi 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/

[David]

Hi 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/

[Shivam]

Thank you and how to add that category archive in that style above header?

[David]

You 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/

[Shivam]

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…

[David]

I 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/

[Author]

Posts