We're merging with GenerateBlocks! Learn more here.

[Support request] Change author link to a newly created profile made by a plugin

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Change author link to a newly created profile made by a plugin

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #24686
    Maria Rowena
    Participant

    Hello Amazing Support Team,

    I was wondering if you could help me in changing the author link to a newly created profile made by a plugin?

    I installed Directorist plugin in my website. Then I use the WP show post to show custom posts made by that plugin.
    Also, I enabled the avatar to wpsp and use the function below.

    add_filter( ‘wpsp_author_output’, function() {
    return sprintf(
    ‘<span class=”wp-show-posts-byline wp-show-posts-meta”>
    <span class=”wp-show-posts-author vcard” itemtype=”http://schema.org/Person&#8221; itemscope=”itemscope” itemprop=”author”>

    %4$s <span class=”author-name” itemprop=”name”>%3$s</span>

    </span>
    </span>’,
    esc_url( get_author_posts_url( get_the_author_meta( ‘ID’ ) ) ),
    esc_attr( sprintf( __( ‘View all posts by %s’, ‘wp-show-posts’ ), get_the_author() ) ),
    esc_html( get_the_author() ),
    get_avatar( get_the_author_meta( ‘ID’ ) )
    );
    } );

    Now, my only problem is how can we change the author URL to point to the profile made by that plugin (directorist).

    Currently, when you click the avatar and author link made by the wpsp it goes to the default wordpress author url–> https://clopirent.ph/author/alexczaragozajrclopirent2020/

    I want it to go here–>https://clopirent.ph/merchant-profile/?author_id=1/

    I saw this file that might help us in changing the links but I am not good in PHP. Hope you can guide me. Please see this-> https://snipboard.io/Cp2UPX.jpg, also this link.

    Hope you can guide me. I am willing to follow.

    Thank you so much in advance

    #24716
    elvin
    Moderator

    Hi,

    On your filter, try changing this line:

    esc_url( get_author_posts_url( get_the_author_meta( ‘ID’ ) ) ),

    To this line:

    esc_url( get_site_url(null, 'merchant-profile/?author_id='.get_the_author_meta( 'ID' ), null ) ),

    But I’ve checked your snippet and it seems incomplete. You’ve removed the anchor tag so no links would appear if you apply that filter.

    That said, how do you want the link to appear? If you want the name of the author right beside the image and both as wrapped as a link, try this snippet:

    add_filter( 'wpsp_author_output', function() {
    	return sprintf(
    		'<span class="wp-show-posts-byline wp-show-posts-meta">
    					<span class="wp-show-posts-author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">
    						<a class="url fn n" href="%1$s" title="%2$s" rel="author" itemprop="url">
    							%4$s<span class="author-name" itemprop="name">%3$s</span>
    						</a>
    					</span>
    				</span>',
    		esc_url( get_site_url(null, 'merchant-profile/?author_id='.get_the_author_meta( 'ID' ), null ) ),
    		esc_attr( sprintf( __( 'View all posts by %s', 'wp-show-posts' ), get_the_author() ) ),
    		esc_html( get_the_author() ),
    		get_avatar( get_the_author_meta( 'ID' ) )
    	);
    });

    If you want the actual avatar to be the link without the text, try this snippet:

    add_filter( 'wpsp_author_output', function() {
    	return sprintf(
    		'<span class="wp-show-posts-byline wp-show-posts-meta">
    			<span class="wp-show-posts-author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">
    				<a class="url fn n" href="%1$s" title="%2$s" rel="author" itemprop="url">
    					%4$s
    				</a>
    			</span>
    		</span>',
    		esc_url( get_site_url(null, 'merchant-profile/?author_id='.get_the_author_meta( 'ID' ), null ) ),
    		esc_attr( sprintf( __( 'View all posts by %s', 'wp-show-posts' ), get_the_author() ) ),
    		esc_html( get_the_author() ),
    		get_avatar( get_the_author_meta( 'ID' ) )
    	);
    });

    If you wanted something else, Let us know. 🙂

    #24736
    Maria Rowena
    Participant

    Hello Elvin,

    Thank you so much for the Code! It works! It is exactly what I want.

    I use this

    add_filter( 'wpsp_author_output', function() {
    	return sprintf(
    		'<span class="wp-show-posts-byline wp-show-posts-meta">
    			<span class="wp-show-posts-author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">
    				<a class="url fn n" href="%1$s" title="%2$s" rel="author" itemprop="url">
    					%4$s
    				</a>
    			</span>
    		</span>',
    		esc_url( get_site_url(null, 'merchant-profile/?author_id='.get_the_author_meta( 'ID' ), null ) ),
    		esc_attr( sprintf( __( 'View all posts by %s', 'wp-show-posts' ), get_the_author() ) ),
    		esc_html( get_the_author() ),
    		get_avatar( get_the_author_meta( 'ID' ) )
    	);
    });
    

    One last thing Elvin, can you help show the full name of the author whenever they hover on the profile picture. It think, we need to modify this part of the code–> ‘View all posts by %s’

    I want to show the full name of the author. Thank you so much in advance.

    You are really the best!

    #24740
    Maria Rowena
    Participant

    Also, Elvin, I failed to tell you that the snippet I use above is not actually pulling the profile picture created by the plugin.

    Originally, I plan to upload the profile pictures manually. I thought of transferring it from the plugin user profile pictures to the admin backend user profile picture. Now, I think that is a tedious task.

    Do you think there is a way that the code above can pull the profile picture set by that plugin? If none, it’s fine but I do hope that there is a way so that it will save me time. 🙂

    Take a look at the screen shot of wpsp carousel–> https://snipboard.io/Py6aQ1.jpg

    This is the screen shot of the grid created by the plugin–> https://snipboard.io/PfVwXm.jpg

    And I saw this one from this link. Take a look at this screen shot–>https://snipboard.io/UThgid.jpg

    Here is our website under development–> https://clopirent.ph/

    If this is impossible, it’s fine. I am so much satisfied with all your help. 🙂 Thank you so much Elvin!

    #24756
    elvin
    Moderator

    One last thing Elvin, can you help show the full name of the author whenever they hover on the profile picture.

    How do you want the name to appear? Can you provide any mock up image or reference sites you want to replicate?

    It think, we need to modify this part of the code–> ‘View all posts by %s’

    Can you specify what modification you require?

    Also, Elvin, I failed to tell you that the snippet I use above is not actually pulling the profile picture created by the plugin.

    Ah right of course. The snippet pulls the avatar of the user from its author meta. The plugin you mentioned most likely stores its own rather than taking what’s already added.

    While it’s definitely not impossible, we can’t really tell how they do it w/o looking through its coding.

    Also, as this is a third party plugin. It’s out of our scope.

    #24766
    Maria Rowena
    Participant

    Hello Elvin,

    I just want to have a sort of tooltip? Like this one in this screen shot–> https://snipboard.io/eXJIcR.jpg

    Whenever you hover your mouse in the avatar there is a tooltip that has the full name of the that user in avatar. Can you help me with that one?

    Regarding the avatar image, it’s alright. I am already satisfied to what you are doing now.

    Hope to hear from you. Thanks.

    #24885
    elvin
    Moderator

    You’ll have to add in the tooltip container. We’ll use <span class="author-name" itemprop="name">%3$s</span>

    Example:

    add_filter( 'wpsp_author_output', function() {
    	return sprintf(
    		'<span class="wp-show-posts-byline wp-show-posts-meta">
    			<span class="wp-show-posts-author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">
    				<a class="url fn n" href="%1$s" title="%2$s" rel="author" itemprop="url">
    					%4$s
    					<span class="author-name" itemprop="name">%3$s</span>
    				</a>
    			</span>
    		</span>',
    		esc_url( get_site_url(null, 'merchant-profile/?author_id='.get_the_author_meta( 'ID' ), null ) ),
    		esc_attr( sprintf( __( 'View all posts by %s', 'wp-show-posts' ), get_the_author() ) ),
    		esc_html( get_the_author() ),
    		get_avatar( get_the_author_meta( 'ID' ) )
    	);
    });

    And then add this CSS:

    .wpsp-author-tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .wpsp-author-tooltip .author-name {
      visibility: hidden;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      bottom: 100%;
      left: 50%;
      width: 100%;
      margin-left: -50%; /* Use half of the width (120/2 = 60), to center the tooltip */
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
    }
    
    .wpsp-author-tooltip .author-name::after {
      content: '';
      position: absolute;
      display: block;    
      width: 0px;        
      left: 50%;
      bottom: 1px;
      border: 8px solid transparent;
      border-bottom: 0;
      border-top: 8px solid black;
      transform: translate(-50%, 100%);
    }
    
    .wpsp-author-tooltip:hover .author-name {
      visibility: visible;
    }

    Apologies for the delay in response. Holidays are pretty long for some of the team.(Asia,Manila)

    #24911
    Maria Rowena
    Participant

    It’s alright Elvin, I understand. Asian, specifically, Filipinos are really great in their work! They deserve that long holiday!

    By the way, I tried your code and the CSS style you provided. I’m afraid to say that it’s not working. Whenever I hover to the avatar I can only see this “View all post by..”

    Please see this screen shot–> https://snipboard.io/OImyD4.jpg

    What could be the reason behind this?

    Thank you so much for your help.

    #24946
    elvin
    Moderator

    Ah right. I missed the selectors.

    .wp-show-posts-author should be used instead of .wpsp-author-tooltip. My bad.

    Try this instead:

    .wp-show-posts-author {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }
    
    .wp-show-posts-author .author-name {
      visibility: hidden;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      bottom: 100%;
      left: 50%;
      width: 100%;
      margin-left: -50%; /* Use half of the width (120/2 = 60), to center the tooltip */
      /* Position the tooltip */
      position: absolute;
      z-index: 1;
    }
    
    .wp-show-posts-author .author-name::after {
      content: '';
      position: absolute;
      display: block;    
      width: 0px;        
      left: 50%;
      bottom: 1px;
      border: 8px solid transparent;
      border-bottom: 0;
      border-top: 8px solid black;
      transform: translate(-50%, 100%);
    }
    
    .wp-show-posts-author:hover .author-name {
      visibility: visible;
    }

    Can you link us directly to the page with the WPSP list you’re working on? So I could check how it’s behaving.

    #25208
    Maria Rowena
    Participant

    Hello, I tried the CSS but it’s still not working. It destroys our design. What I did now as a workaround is I edited the ‘View all posts by %s’ in the code and leave only ‘%s’ so that It will show the author name whenever you hover in the avatar. Here is our website –> https://clopirent.ph/

    #25210
    Maria Rowena
    Participant

    And one last thing Elvin, please I do hope that you can share me some idea here.

    Last time, I asked you regarding on how I can display author avatar set by another plugin, I got a response from the directory plugin that we are using in our website. They told us to insert this in our code.

    $image_id	= get_user_meta( get_the_author_meta( 'ID' ), 'pro_pic', true );
    		$image    	= $image_id ? wp_get_attachment_image_src( $image_id, 'thumbnail' ) : '';
    		$image_url 	= is_array( $image ) ? $image[0] : $image;
    		echo "<img src='$image_url' alt='Author'>";
    
    Can you give me an idea of where to place this code? so that it will call the profile picture set by that plugin.
    
    This is what we are using now.
    
    

    add_filter( ‘wpsp_author_output’, function() {
    return sprintf(
    ‘<span class=”wp-show-posts-byline wp-show-posts-meta”>
    <span class=”wp-show-posts-author vcard” itemtype=”http://schema.org/Person&#8221; itemscope=”itemscope” itemprop=”author”>

    %4$s
    <span class=”author-name” itemprop=”name”>%3$s</span>

    </span>
    </span>’,
    esc_url( get_site_url(null, ‘merchant-profile/?author_id=’.get_the_author_meta( ‘ID’ ), null ) ),
    esc_attr( sprintf( __( ‘%s’, ‘wp-show-posts’ ), get_the_author() ) ),
    esc_html( get_the_author() ),
    get_avatar( get_the_author_meta( ‘ID’ ) )
    );
    });

    I will really be thankful if you can guide me somehow. Thank you so much.

    #25236
    elvin
    Moderator

    Last time, I asked you regarding on how I can display author avatar set by another plugin, I got a response from the directory plugin that we are using in our website. They told us to insert this in our code.

    Nice one. Thank you.

    I’ve converted the code into this to add in the image from the plugin:

    add_filter( 'wpsp_author_output', function() {
        $image_id	= get_user_meta( get_the_author_meta( 'ID' ), 'pro_pic', true );
    	$image    	= $image_id ? wp_get_attachment_image_src( $image_id, 'thumbnail' ) : '';
    	$image_url 	= is_array( $image ) ? $image[0] : $image;
    	return sprintf(
    		'<span class="wp-show-posts-byline wp-show-posts-meta">
    			<span class="wp-show-posts-author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">
    				<a class="url fn n" href="%1$s" title="%2$s" rel="author" itemprop="url">
    					<img src='%4$s' alt='%3$s'>
    					<span class="author-name" itemprop="name">%3$s</span>
    				</a>
    			</span>
    		</span>',
    		esc_url( get_site_url(null, 'merchant-profile/?author_id='.get_the_author_meta( 'ID' ), null ) ),
    		esc_attr( sprintf( __( 'View all posts by %s', 'wp-show-posts' ), get_the_author() ) ),
    		esc_html( get_the_author() ),
    		$image_url
    	);
    });

    As for the tooltip, can you try removing display: inline-block; on the .wp-show-posts-author and see if it works? let us know.

    #25243
    Maria Rowena
    Participant

    Hello Elvin,

    Thank you so much! I tried your code but it brought fatal error in our website. Please see screenshot.

    https://snipboard.io/rNJj4i.jpg

    Also this one.

    https://snipboard.io/T34L8l.jpg

    Is there something wrong we did?

    #25252
    elvin
    Moderator

    Is there something wrong we did?

    It’s quite difficult to tell.

    Can you try changing this line from the code on the previous reply.
    <img src='%4$s' alt='%3$s'>

    To this:
    <img src="%4$s" alt="%3$s">

    We’re simply changing the ' to " with this line.

    To be honest, this is going out of scope as WP Show Posts isn’t exactly written to work with another plugin out of the box.

    We can’t guarantee it’ll work smoothly.

    #25802
    Maria Rowena
    Participant

    Thank you so much for this. We are able to manage what we want to achieve.

    Best Support Elvin! More power to you.

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