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

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Adjusting output for Date,Title,Cat,Terms

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #29289
    Tim
    Participant

    Hello,
    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 social

    Sample attached layout goal

    • This topic was modified 3 months, 1 week ago by Tim.
    #29322
    elvin
    Moderator

    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;
    }
    • This reply was modified 3 months, 1 week ago by elvin.
    #29338
    Tim
    Participant

    Thank 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.

    #29388
    elvin
    Moderator

    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. 🙂

    #29429
    Tim
    Participant

    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.

    #29431
    elvin
    Moderator

    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. 🙂

    #29433
    Tim
    Participant

    Thank 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
    -t

    different meta styles

    #29438
    elvin
    Moderator

    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/

    #29452
    Tim
    Participant

    Thank you and sent via contact page

    #29469
    elvin
    Moderator

    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.

    #29483
    Tim
    Participant

    This has all been incredibly helpful. Thanks so much!

    #29494
    elvin
    Moderator

    No problem. Glad to be of any help. 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.