I want to move the category display above the title

Hi there,

can you link me to your site so i can see what the blog setup is.
You can edit your original topic and use the Site URL field to share it privately.

thank I've updated the original post. You can see the category links on the home page.

Ok - so first off we need to move the category links above the title and wrap it and the post image in a container - with this PHP snippet:

// Open Post Image Wrap to contain image and category links
add_action( 'generate_before_content','db_open_image_wrap',1);
function db_open_image_wrap() {
	if ( is_home() || is_archive() ) {
	echo '<div class="post-image-wrap">';
	}
}

// Remove categories from default position
add_filter( 'generate_category_list_output','tu_remove_categories' );
function tu_remove_categories( $categories ) {
	if ( is_home() || is_archive() ) {
		return '';
	}
	
	return $categories;
}

// Add category link within Post Image Wrap
add_action( 'generate_before_content','tu_cats_above_title', 15 );
function tu_cats_above_title() {
	if ( is_home() || is_archive() ) {
		$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></div>',
				_x( 'Categories', 'Used before category names.', 'generatepress' ),
				$categories_list
			);
		}
	}
}

Then we add some CSS to create the overlay and style the tag links:

.post-image-above-header .inside-article .post-image {
    margin-bottom: 0.5em !important;
}

.post-image-wrap {
    position: relative;
}

.post-image-wrap .entry-meta {
    position: absolute;
    bottom: 15px;
    left: 10px;
    font-size: 12px;
    padding: 4px 8px;
    background-color: #fff;
    border-radius: 2px;
}

.post-image-wrap .entry-meta:before {
    display: none;
}

wow, again, and again, your level of support is insane. I've been recommending your theme to all the people I know because of this. thanks again.

Awesome - Glad we can be of help :)

Support here is indeed amazing.
But how would I go about centering that category label?

Can you link me to the page in question?

Feel free to open a new topic so you can use the private URL field.

Thanks :)

This page: https://doce.blog.br/page/2

I want the label to be centered in the image.

Hmm it's using absolute positioning so a bit tough to centered.

You could try modifying the left: 10px; in the CSS above to left: 40%;

Amazing!
Thanks!

No problem :)