[Resolved] Adjusting output for Date,Title,Cat,Terms

Hi there,

That’s a lot, let’s break things down bit by bit:

For the social media links:

If you have a plugin you’d like to use to achieve the same look, you can hook it into the WPSP list.

Here’s a list of hooks you can use.
https://wpshowposts.com/support/topic/bbpress-metadata-and-dates-in-wpshowposts/#post-28854

For this particular purpose, wpsp_after_content seems appropriate.

Example:

add_action('wpsp_after_content', function($settings){
if( 1234 == (int)$settings['list_id']){ //apply to specified WPSP ID
do_shortcode('[your socmed shortcode here]');
}
},20,1);

Now, for the post meta items.

Make sure all of the meta items are UNCHECKED on the WPSP list settings. We’ll insert our own using hooks.

For the post terms:

we’ll have to do 2 hooks. 1 for tags, 1 for category.

for the category links, do this:

add_action('wpsp_after_title', function($settings){
if( 18984 == (int)$settings['list_id']){ //apply to specified WPSP ID
	printf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>',
				get_the_term_list( get_the_ID(), 'category', '', apply_filters( 'wpsp_term_separator', ', ' ) )
			);
}
},10,1);

for the post_tag, do this:

add_action('wpsp_after_content', function($settings){
if( 18984 == (int)$settings['list_id']){ //apply to specified WPSP ID
	printf( '<span class="wp-show-posts-terms wp-show-posts-meta">%1$s</span>',
				get_the_term_list( get_the_ID(), 'post_tag', '', apply_filters( 'wpsp_term_separator', ', ' ) )
			);
}
},15,1);

For the Time:

Here’s how to move it before the title.

add_action('wpsp_before_title', function($settings){
if( 18984 == (int)$settings['list_id']){ //apply to specified WPSP ID
	$time_string = '<time class="wp-show-posts-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="wp-show-posts-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() )
			);
	
	printf(
				'<span class="wp-show-posts-posted-on wp-show-posts-meta">
					<a href="%1$s" title="%2$s" rel="bookmark">%3$s</a>
				</span>',
				esc_url( get_permalink() ),
				esc_attr( get_the_time() ),
				$time_string
			);
}
},10,1);

Once you’ve added all of this PHP snippets.

Add this CSS to center them all:

.wp-show-posts-inner {
    text-align: center;
}

Regarding those social links, the site we’re updating has them hard coded. Would you know if it’s possible to output that html vs the short code using the method you’ve described.

Not sure what you mean by that.

But if your social media links are custom HTML, then just copy it and place it on the wpsp_after_content hook. Replace the do_shortcode with your custom HTML.

Example:

add_action('wpsp_after_content', function($settings){
if( 1234 == (int)$settings['list_id']){ //apply to specified WPSP ID
echo '<a href="www.facebook.com/socmedlink">Facebook Icon here</a>
<a href="www.twitter.com/socmedlink">Twitter Icon here</a>
';
}
},20,1);

It’s up to you how many links to add. 🙂

Perfect thanks so much and again for so much detail…learning a lot here!
So as far as styling, can we apply other classes to the output with these hooks?
For example different styles for category links vs date, tag,etc? Outside of what’s available in the plugin admin.

Not exactly sure what you mean. If you want to use a class from a pre-made stylesheet loaded to the site, like from a theme or a child theme, you can add them in by modifying the HTML.

Say for example, you have a pre-made stylesheet that has a.button { padding: 10px; border-radius: 20px; background-color: blue; color: white; }.

If you want this applied for, let’s say, the social media links, you can simply do this:

add_action('wpsp_after_content', function($settings){
if( 1234 == (int)$settings['list_id']){ //apply to specified WPSP ID
echo '<a class="button" href="www.facebook.com/socmedlink">Facebook Icon here</a>
<a class="button" href="www.twitter.com/socmedlink">Twitter Icon here</a>
';
}
},20,1);

The point is simply, to add class selectors for the ones you’ve completely modified the HTML.

And for the others, inspect the page and check their class selectors and do your CSS from these class selectors you’ve gotten. 🙂

Can you link us to the page in question? so I can inspect and point you to the CSS selectors you can use for the styling writeup.

You can send it through our contact page if you wish to keep it private. https://wpshowposts.com/contact/

Hi there,

For the Time:

span.wp-show-posts-posted-on.wp-show-posts-meta a .wp-show-posts-entry-date.published { //post date link color
    color: red;
}

span.wp-show-posts-posted-on.wp-show-posts-meta a:hover .wp-show-posts-entry-date.published { //post date link color on hover
    color: blue;
}

Change red and blue to your preference.

For the category and the tag links:

I think we need to modify the filter a bit to differentiate between tags and categories.

For category, let’s change the filter to this:

add_action('wpsp_after_title', function($settings){
if( 18984 == (int)$settings['list_id']){ //apply to specified WPSP ID
	printf( '<span class="wp-show-posts-terms wp-show-posts-meta category-terms">%1$s</span>',
				get_the_term_list( get_the_ID(), 'category', '', apply_filters( 'wpsp_term_separator', ', ' ) )
			);
}
},10,1);

And then add this CSS:

span.wp-show-posts-terms.wp-show-posts-meta.category-terms { // to italize the label "Tags"
    font-style: italic;
}

span.wp-show-posts-terms.wp-show-posts-meta.category-terms a { // change the link color
    color: red;
}

span.wp-show-posts-terms.wp-show-posts-meta.category-terms a:hover { // change the link color on hover
    color: blue;
}

Change red and blue to your preference.

For the tag, let’s change it to this:

add_action('wpsp_after_content', function($settings){
if( 18984 == (int)$settings['list_id']){ //apply to specified WPSP ID
	printf( '<span class="wp-show-posts-terms wp-show-posts-meta tag-terms">%1$s</span>',
				get_the_term_list( get_the_ID(), 'post_tag', '', apply_filters( 'wpsp_term_separator', ', ' ) )
			);
}
},15,1);

And then add this CSS:

span.wp-show-posts-terms.wp-show-posts-meta.tag-terms { // to italize the label "Tags"
    font-style: italic;
}

span.wp-show-posts-terms.wp-show-posts-meta.tag-terms a { // change the link color
    color: red;
}

span.wp-show-posts-terms.wp-show-posts-meta.tag-terms a:hover { // change the link color on hover
    color: blue;
}

Change red and blue to your preference.

No problem. Glad to be of any help. 🙂