[Resolved] Category list at top of post

[Randy]

I’m trying to replicate one thing I like in Canvas, now that I’m switching all of my sites to GP. Specifically, the category list that was easy to stick in as a “filter” like this:

Posted</span> [post_date] <span class=”small”>in</span> [post_categories before=””] [post_comments]

…which line appears under the entry title, and only on posts.

Trying that in a GP hook (After Entry Title) didn’t work: it displays it literally (rather than replacing the [post_date] with the post date, for instance). I also DON’T want the little file folder category icon.

If I’m not mistaken, the [post_comments] part shows a comment count, and is a link down to the comments section of the same page, which would be a nice touch too.

How to? And how would I style that line? Thanks!

[Tom]

You would need to build those shortcodes in order for them to work.

I built this function for another user, which filters the built in post meta to do what you’re looking for: https://gist.github.com/generatepress/92ebb34e67ce6f538fdb457137f7a9b4

Let me know if that helps or not 🙂

[Randy]

I guess I need a little more hand-holding.

After creating a child theme and activating it, I grabbed that from github and put it into the child’s functions.php, then turned on post date and categories at Customize -> Layout -> Blog -> Single

…and all it’s showing me is the date. I’m not too whizzy with this stuff, but am learning. Not sure where to go next.

(And I’m doing this on a development site, so can’t give you a URL unless you’re willing to spoof a local DNS entry and such.)

[Tom]

What happens if you only turn on the date?

[Randy]

I did try various combinations. The best I can do is get the bare date. No categories or other info.

[Tom]

Any chance you can link me to your site?

[Randy]

Sure. How do I send you a private message? (Or, just email me: my address is in your files.)

[Randy]

Hmm… VERY strange: it didn’t work on the development server, and DOES work on the production server:
https://randysrandom.com/follow-the-directions/

I was able to get the empty tag list out of there, but now I’d like to get my (author) name out of there, since the entire site has my name on it already. Not sure how to do that. I also don’t want the date to be a link, would like to put “Posted ” in front of the date, and change the file folder icon to “in Categories ” — and have it on the same line as the date.

Help me Mr. Wizard! 🙂

[Tom]

Let’s try this:

1. Turn off the author option, and turn on the date option.

2. Add this code:

add_filter( 'generate_post_date_output', 'tu_categories_to_date' );
add_filter( 'generate_category_list_output', '__return_false' );
add_filter( 'generate_tag_list_output', '__return_false' );
add_filter( 'generate_show_comments', '__return_false' );
function tu_categories_to_date() {
	$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;
	}
	
	$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.
	$time_string = sprintf( '<span class="posted-on">%s</span>', // WPCS: XSS ok, sanitization ok.
		$time_string
	);
		
    $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
    $categories_list = sprintf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
        _x( 'Categories', 'Used before category names.', 'generatepress' ),
        $categories_list
    );
	
	$tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
	$tags_list = sprintf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
		_x( 'Tags', 'Used before tag names.', 'generatepress' ),
		$tags_list
	);

	echo $time_string . $categories_list . $tags_list;
  
	if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
		echo '<span class="comments-link">';
			comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
		echo '</span>';
	}
}

[Randy]

“Author” was already unchecked. I removed ” . $tags_list” from your echo to get rid of that.

But this didn’t help much. Now it’s:

[title]
28 January 2017
[folder icon] Categories Funny, Random, Weird
by Randy

example: https://randysrandom.com/when-i-die/

What I’d really like is:

[title]
Posted 28 January 2017 in Funny, Random, Weird

[Tom]

Try adding this CSS now:

.posted-on:before {
    content: "Posted on ";
}

.entry-meta .cat-links {
    display: inline-block;
}

.entry-meta .cat-links:before {
    content: "In";
    font-family: inherit;
    width: auto;
    font-size: inherit;
    margin: 0 5px;
}

.entry-meta .byline {
    display: none;
}

[Randy]

Yessssssssssss! Thanks much. And since I had no idea I could add “content” in CSS, I learned something too — and I appreciate that as well. That will be useful here and there. I’ll mark this Resolved.

Cheers!

[Tom]

Glad I could help! 🙂

[Randy]

To circle back on this… 🙂

In, for instance, Category archives, the post meta shows like this

or…

• Post Title
• the “Posted” line with date and categories
• and “28 Comments”

BUT on actual post pages, it doesn’t show the “28 Comments” line. I’d like it to.

I tried adding this to CSS:

.entry-meta .comments-link {display: block;}

but it didn’t work. What do I need to do?

Also, would love to get rid of the comments icon — just “No Comments” or “1 Comment” or “n Comments” which is a link to #comments

Thanks much.

[Tom]

To show them on single posts, your PHP would look like this:

add_filter( 'generate_post_date_output', 'tu_categories_to_date' );
add_filter( 'generate_category_list_output', '__return_false' );
add_filter( 'generate_tag_list_output', '__return_false' );
add_filter( 'generate_show_comments', '__return_false' );
function tu_categories_to_date() {
	$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;
	}
	
	$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.
	$time_string = sprintf( '<span class="posted-on">%s</span>', // WPCS: XSS ok, sanitization ok.
		$time_string
	);
		
    $categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
    $categories_list = sprintf( '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
        _x( 'Categories', 'Used before category names.', 'generatepress' ),
        $categories_list
    );
	
	$tags_list = get_the_tag_list( '', _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
	$tags_list = sprintf( '<span class="tags-links"><span class="screen-reader-text">%1$s </span>%2$s</span>',
		_x( 'Tags', 'Used before tag names.', 'generatepress' ),
		$tags_list
	);

	echo $time_string . $categories_list . $tags_list;
  
	if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
		echo '<span class="comments-link">';
			comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
		echo '</span>';
	}
}

To remove the comments icon, add this CSS:

.comments-link:before {
    display: none;
}

[Author]

Posts