Home › Forums › Pro Support › Change author link to a newly created profile made by a plugin
Tagged: new author link
- This topic has 15 replies, 2 voices, and was last updated 2 years, 8 months ago by
elvin.
-
AuthorPosts
-
December 28, 2020 at 9:12 am #24686
Maria Rowena
ParticipantHello 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” 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
December 28, 2020 at 8:53 pm #24716elvin
ModeratorHi,
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. 🙂
December 29, 2020 at 7:52 am #24736Maria Rowena
ParticipantHello 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!
December 29, 2020 at 8:46 am #24740Maria Rowena
ParticipantAlso, 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!
December 29, 2020 at 4:43 pm #24756elvin
ModeratorOne 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.
December 30, 2020 at 6:57 am #24766Maria Rowena
ParticipantHello 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.
January 3, 2021 at 6:57 pm #24885elvin
ModeratorYou’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)
January 4, 2021 at 5:48 am #24911Maria Rowena
ParticipantIt’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.
January 4, 2021 at 4:18 pm #24946elvin
ModeratorAh 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.
January 10, 2021 at 7:48 am #25208Maria Rowena
ParticipantHello, 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/
January 10, 2021 at 7:59 am #25210Maria Rowena
ParticipantAnd 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” 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.
January 10, 2021 at 7:39 pm #25236elvin
ModeratorLast 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.January 10, 2021 at 10:31 pm #25243Maria Rowena
ParticipantHello 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?
January 11, 2021 at 2:01 am #25252elvin
ModeratorIs 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.
January 21, 2021 at 7:23 pm #25802Maria Rowena
ParticipantThank you so much for this. We are able to manage what we want to achieve.
Best Support Elvin! More power to you.
-
AuthorPosts
- You must be logged in to reply to this topic.