[Resolved] Category and Tags on the same line

[Sean]

Date
Category Tags

I’m trying to change the format on the index page of my blog to display the Category next to the Tags on the same line. I currently have a Snippets activated, but I’m not sure how to modify the positions of meta data. It’s to move the meta data from the bottom of the post to the top. Not sure if this Snippets even matters, but just in case:

if ( ! function_exists( 'generate_posted_on' ) ) :
/**
 * Prints HTML with meta information for the current post-date/time and author.
 */
function generate_posted_on() {

	if ( 'post' !== get_post_type() ) 
		return;
	
	$date = apply_filters( 'generate_post_date', true );
	$author = apply_filters( 'generate_post_author', true );
	$categories = apply_filters( 'generate_show_categories', true );
	$tags = apply_filters( 'generate_show_tags', true );
	$comments = apply_filters( 'generate_show_comments', true );
		
	$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() )
	);
	
	// If our date is enabled, show it
	if ( $date ) :
		printf( '<span class="posted-on">%1$s</span>',
			sprintf( '<a href="%1$s" title="%2$s" rel="bookmark">%3$s</a>',
				esc_url( get_permalink() ),
				esc_attr( get_the_time() ),
				$time_string
			)
		);
	endif;
	
	// If our author is enabled, show it
	if ( $author ) :
		printf( ' <span class="byline">%1$s</span>',
			sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%1$s <a class="url fn n" href="%2$s" title="%3$s" rel="author" itemprop="url"><span class="author-name" itemprop="name">%4$s</span></a></span>',
				__( 'by','generate'),
				esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
				esc_attr( sprintf( __( 'View all posts by %s', 'generate' ), get_the_author() ) ),
				esc_html( get_the_author() )
			)
		);
	endif;
	
	// Show the category and tags
	if ( 'post' == get_post_type() ) {

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

		$tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'generate' ) );
		if ( $tags_list && $tags ) {
			printf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
				_x( 'Tags', 'Used before tag names.', 'generate' ),
				$tags_list
			);
		}
	}
	
	// Show the comments link
	if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) && $comments ) {
		echo '<span class="comments-link">';
		comments_popup_link( __( 'Leave a comment', 'generate' ), __( '1 Comment', 'generate' ), __( '% Comments', 'generate' ) );
		echo '</span>';
	}
	
}
endif;

if ( ! function_exists( 'generate_entry_meta' ) ) :
/**
 * Prints HTML with meta information for the categories, tags.
 *
 * @since 1.2.5
 */
function generate_entry_meta() 
{
}
endif;

[Leo]

Hi there,

Give this CSS a shot:

.posted-on {
    display: block;
}
.cat-links, .tags-links {
    display: inline-block;
}

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

[Sean]

Yes, that definitely does the trick. Any way to add some spacing between the two?

[Leo]

This should work:

.tags-links {
    padding-left: 10px;
}

[Sean]

Resolved 😛

Thanks Leo!

[Leo]

No problem 🙂

[Aga]

Hi! @Sean, I hope it’s okay that I used this snipped you shared here. It’s very useful! Thank you for it 🙂 and if you’re not okay with that I will search for different solution of course. (The site I used it on is still in developing process and not shared with public). I’ve tried to style it as Leo has written and it didn’t work, even with !important added. I had to use

 .cat-links, .comments-link, .tags-links, footer.entry-meta .byline, footer.entry-meta .posted-on {display:inline-block; padding-right:10px;}
.posted-on{display:block; margin-bottom:2px;} 

for it to work for me! Not sure why…?

[Leo]

Can you link us to the page in question? Feel free to start a new topic as well if you want to use the private URL field 🙂

[Aga]

I have another topic I’ve created here https://generatepress.com/forums/topic/wp-show-posts-problem-changing-sidebars-width-mediaqueries-and-more/#post-476190 🙂 in the first post is address to the site I’m working on.

[Leo]

Sorry what isn’t working? I’m seeing those tags inline?

[Aga]

Please read carefully my message: it is working, because instead of using

  .posted-on {
    display: block;
}
.cat-links, .tags-links {
    display: inline-block;
}  

(which wasn’t working for me, even with added !important)

I had to use

 
 .cat-links, .comments-link, .tags-links, footer.entry-meta .byline, footer.entry-meta 
   {display:inline-block; padding-right:10px;}
.posted-on
   {display:block; margin-bottom:2px;} 

I was just wondering if you know why is that (and also wanted to post it here for anyone, who would try your code like me, and found it not working, as a possible solution). There has to be both footer.entry-meta .byline, footer.entry-meta included, or it doesn’t work.

[Tom]

Likely because you’re displaying comments on the same line, so the comments-link element needs to display inline-block as well. Your code looks good 🙂

[Aga]

Thank you! 🙂 hope it will be of help for someone else too if they encounter same problem 🙂

[Author]

Posts