How to center align post headline (title) above post and sidebar

Hi there,

you would need a Header Element to do this easily.
This example provides the shortcode for displaying the gravatar. And would be good base to start from ( minus the merged site header )

https://docs.generatepress.com/article/page-hero-examples/#example-2

Hi David,

That worked. Thank you! :)

However, the PHP and CSS given in the page you linked above, returned a huge gravater, and most importantly showed my published date instead of last updated date.

I have had issues with last updated dates in GeneratePress and Tom had given me the below PHP code that works just perfect. With showing and Google picking up the correct updated date in SERPs.

Here is the code...

add_filter( 'generate_post_author', '__return_false' );
add_filter( 'generate_show_comments', '__return_false' );
add_filter( 'generate_post_date_output', 'tu_fancy_byline' );
function tu_fancy_byline( $date ) {
	printf( ' <span class="byline">%1$s</span>',
		sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<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' ) )
		)
	);

	if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
		echo '<span class="comments-link">';
			comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
		echo '</span>';
	}

	$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
	
	if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
		$time_string = '<time class="updated" 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">%s</span>', // WPCS: XSS ok, sanitization ok.
		$time_string
	);
}

The above code is used by my current post meta data or entry data (the segment that displays author gravatar author name and date of updation).

Now...

How can I move my current meta data to the place under the post title? Is there any shortcode for it?

Please check this screenshot to understand better.

Thank you

Hi there,

Tom provides a filter for the header element here:

https://generatepress.com/forums/topic/remove-published-date-when-using-page-header/#post-897048

Hi David,

Thank you so much. I am so sorry if this sounds dumb, but can you please elaborate (I respect your time and sorry for asking this) what you mean to say?

Should I add Tom's filter and

keep my snippet (given above) as well? or
Add Tom's snippet but remove mine?

Does Tom's Filer use any of the settings from the snippet I gave you above?

And more importantly, would Tom's filter (that you provided) and mess with Tom's solution (that I provided) when I use both?

Best,
-Swadhin

You would use both - they won't interfere with each other as the second code simply filters the output of the datetime in the header element.

Hi David,

I did it. But the date doesn't display:

Here is what I have done so far:

1. I added both CSS and PHP from this section

2. I added Tom's Filter.

Now the gravater shows up but not the date whatsover.

Side Question:

Here is the CSS code I used to previously style entry meta (when I wasn't using a page hero). It is also currently active. Should I keep it as is or delete it or delete some parts of it?

.byline img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

.byline,
.comments-link,
.posted-on {
	display: inline-block;
}

.comments-link,
.posted-on {
	border-left: 1px solid #ddd;
	padding-left: 10px;
	margin-left: 10px;
}

.comments-link:before {
	display: none;
}
.posted-on .updated:before {
    content: "Last Updated ";
}
.entry-content {
    margin-top: 0.5em;
}

Just a little more CSS as the updated is hidden by default:

.page-hero time.updated {
    display: inline-block !important;
}

Hi David,

It worked. Just a little bit issue.

My Old one looked a bit different see screenshot. How do I add a

A by before my name
"last updated" before the date
And a separator line to divide both

P.S. Should I also keep the CSS snippet I gave you here:https://generatepress.com/forums/topic/how-to-center-align-post-headline-title-above-post-and-sidebar/#post-946001

The header element supports HTML so you can just add that content between the {{template_tags}} and [shortcodes].

If you're only adding the meta to the Header Element then that CSS should not be necessary.

I also add meta to the blog page.

In that case it will be needed as that CSS isn't specific to the single post.

Thank you David. This helped me so much. Learned a few things and created a good design with your help. Thanks for being generous and kind that you and the whole GP team are.

Best regards,
-Swadhin

You're really welcome - happy to be of help.

Hi David,
I ran into an issue again.

The post meta (when I addded the HTML) each displayed in a separate line. Please see screenshot. How do I solve this?