- This topic has 11 replies, 4 voices, and was last updated 4 years, 4 months ago by Leo.
-
AuthorPosts
-
September 20, 2019 at 9:06 am #1014626Kemo
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 lotmy site: https://woodwaker.com/
September 20, 2019 at 9:40 am #1014652DavidStaffCustomer SupportHi 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.September 20, 2019 at 10:22 am #1014708Kemothank I’ve updated the original post. You can see the category links on the home page.
September 20, 2019 at 1:24 pm #1014800DavidStaffCustomer SupportOk – 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; }
September 21, 2019 at 12:58 am #1015004Kemowow, 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.
September 21, 2019 at 5:49 am #1015124DavidStaffCustomer SupportAwesome – Glad we can be of help π
November 17, 2019 at 11:38 am #1065733AngelicaSupport here is indeed amazing.
But how would I go about centering that category label?November 17, 2019 at 11:52 am #1065741LeoStaffCustomer SupportCan you link me to the page in question?
Feel free to open a new topic so you can use the private URL field.
Thanks π
November 17, 2019 at 11:58 am #1065745AngelicaThis page: https://doce.blog.br/page/2
I want the label to be centered in the image.
November 17, 2019 at 12:05 pm #1065749LeoStaffCustomer SupportHmm it’s using absolute positioning so a bit tough to centered.
You could try modifying the
left: 10px;
in the CSS above toleft: 40%;
November 17, 2019 at 12:41 pm #1065781AngelicaAmazing!
Thanks!November 17, 2019 at 12:47 pm #1065782LeoStaffCustomer SupportNo problem π
-
AuthorPosts
- The topic ‘I want to move the category display above the title’ is closed to new replies.