[Support request] How to customize single post meta items and placements?

[einsync]

Hi, I want to replicate the style of this single post meta items and placement like in the picture below:

I want to add Author Name | Twitter handle | Post Date below Post Title in my single post. If possible, I want to add categories above the Post Title too.

Any idea how to do it in GP theme? Thanks

GeneratePress 2.1.3

GP Premium 1.7.1

[Tom]

Hi there,

To move the categories above the title, try this:

add_filter( 'generate_category_list_output','tu_remove_categories' );
function tu_remove_categories( $categories ) {
	if ( is_single() ) {
		return '';
	}
	
	return $categories;
}

add_action( 'generate_before_content','tu_cats_above_title' );
function tu_cats_above_title() {
	if ( is_single() ) {
		$categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
		if ( $categories_list ) {
			printf( '<span class="entry-meta cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
				_x( 'Categories', 'Used before category names.', 'generatepress' ),
				$categories_list
			);
		}
	}
}

To add the Twitter handle, we could do this:

add_filter( 'generate_post_author_output', function( $output ) {
    return $output . ' | <a href="TWITTER URL">@yourhandle</a> | ';
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[einsync]

Thanks Tom, it works. Easy and straightforward solution.

Another quick question, how to transform the category text in single post to uppercase?

For example from Review to REVIEW.

[David]

Hi there,

you could add this CSS:

.single-post .cat-links {
    text-transform: uppercase;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[einsync]

add_filter( 'generate_post_author_output', function( $output ) {
    return $output . ' | <a href="TWITTER URL">@yourhandle</a> | ';
} );

Hi. I had to bump again this topic. The @twitter-handle next to Author name works, but only for single author wordpress sites. I have two author for my site, and both authors are showing the same exact twitter handle next to their author’s name in single post.

If there are better solutions please let me know. Thanks.

[Tom]

Try this instead:

add_filter( 'generate_post_author_output', function( $output ) {
    $twitter = get_the_author_meta( 'twitter' );

    if ( $twitter ) {
        return $output . ' | <a href="https://twitter.com/' . $twitter . '">@' . $twitter . '</a> | ';
    }

    return $output;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts