Home › Forums › Pro Support › Adjusting output for Date,Title,Cat,Terms
Tagged: customizing, hooks, meta placement
- This topic has 11 replies, 2 voices, and was last updated 2 years, 5 months ago by
elvin.
-
AuthorPosts
-
April 15, 2021 at 10:49 am #29289
Tim
ParticipantHello,
I have a layout that I’m attempting to achieve, basically reworking a news archive section for a custom theme, hoping for some advice and guidance.I’ve found some snippets which have helped.
We’d like the layout to output
Post date
Post title
Post category
(image/excerpt does it’s thing)
Then post tags
Then socialSample attached
April 16, 2021 at 12:23 am #29322elvin
ModeratorHi 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-28854For 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; }
April 16, 2021 at 8:19 am #29338Tim
ParticipantThank you very much! and for being so detailed!
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.
April 18, 2021 at 6:09 pm #29388elvin
ModeratorRegarding 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 thedo_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. 🙂
April 19, 2021 at 5:55 pm #29429Tim
ParticipantPerfect 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.April 19, 2021 at 6:02 pm #29431elvin
ModeratorPerfect 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. 🙂
April 19, 2021 at 6:12 pm #29433Tim
ParticipantThank you…sorry if this is a newbie question but hopefully more clear.
Mock up I’m trying to achieve will need additional class selectors (I think?)
Best
-tApril 19, 2021 at 9:35 pm #29438elvin
ModeratorCan 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/
April 20, 2021 at 6:32 am #29452Tim
ParticipantThank you and sent via contact page
April 20, 2021 at 8:06 pm #29469elvin
ModeratorHi 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.
April 21, 2021 at 9:21 am #29483Tim
ParticipantThis has all been incredibly helpful. Thanks so much!
April 21, 2021 at 4:24 pm #29494elvin
ModeratorNo problem. Glad to be of any help. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.