[Resolved] I want to move the category display above the title

Home Forums Support I want to move the category display above the title

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1014626
    Kemo

    Hi!

    I want to move the category link above the title, but only on pages like archive, search, category pages. Not on single posts.

    ideally, i want to put the category tag on my post’s featured image, but i think just moving it above the title and moving it up with CSS so that it’s on the image should do the trick.

    like here:
    https://i.imgur.com/c7wMB0n.png
    thanks a lot

    my site: https://woodwaker.com/

    #1014652
    David
    Staff
    Customer Support

    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.

    #1014708
    Kemo

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

    #1014800
    David
    Staff
    Customer Support

    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;
    }
    #1015004
    Kemo

    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.

    #1015124
    David
    Staff
    Customer Support

    Awesome – Glad we can be of help πŸ™‚

    #1065733
    Angelica

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

    #1065741
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #1065745
    Angelica

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

    I want the label to be centered in the image.

    #1065749
    Leo
    Staff
    Customer Support

    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%;

    #1065781
    Angelica

    Amazing!
    Thanks!

    #1065782
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘I want to move the category display above the title’ is closed to new replies.