Site logo

[Support request] Can you help me with header element?

Home Forums Support [Support request] Can you help me with header element?

Home Forums Support Can you help me with header element?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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”]”

    #1586970
    David
    Staff
    Customer Support

    Hi 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;
    }
    #1586997
    Shivam

    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.

    #1587319
    David
    Staff
    Customer Support

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

    #1587362
    Shivam

    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.

    #1587905
    Shivam

    Hey David, any update?

    #1588190
    David
    Staff
    Customer Support

    Try 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

    #1588283
    Shivam

    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.

    #1588413
    Tom
    Lead Developer
    Lead Developer

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

    #1589630
    Shivam

    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.

    #1589763
    Tom
    Lead Developer
    Lead Developer

    Can 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

    #1590823
    Shivam

    Hey, the updated function also not working…

    #1591024
    David
    Staff
    Customer Support

    Can you share all of the PHP you have added so we can see what the issue is

    #1591500
    Shivam
    /*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' );
    #1591659
    David
    Staff
    Customer Support

    Ok 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'),

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.