This shortcode allows you to show the avatars of all the authors of a post.
It can be used anywhere within WordPress where shortcodes are supported. For most users, this will primarily be within the content of a WordPress post or page or the sidebar.
The output can be customized making use of the optional attributes this shortcode can take.
Examples
Single Author Post
The trivial shortcode would look like:
Editor input
Frontend output
As you can see, you get the profile image of the only author of a post. If you don’t provide any post ID, current post is taken by default.
Multi-Author Post
Again, using the trivial shortcode:
Editor input
Frontend output
That would show your current post author’s avatars, making them link to each author page
More Examples
Custom Image Size
Let’s say you want to display images with a size of 50×50 pixels. Then you should make use of the size attribute like this:
Editor input
Frontend output
Avatars Without Link
In this examples images are not links. But default shortcode’s output will make author images to link to their author pages. So let’s imagine now that you want to disable those links. In that case, you should input the shortcode with the linkattribute:
Editor input
Custom Styles
You probably may want to customize how avatars are displayed. The HTML markup that shortcode generates by default look like this:
<div class="m-post-avatars">
<div class="m-post-avatar">
<img decoding="async" src="">
</div>
<div class="m-post-avatar">
<img decoding="async" src="">
</div>
...
</div>
Those classes has no CSS rules defined, so you can use them to provide your own.
Or you can even change the DOM element tag to use and the class they must have:
Editor input
Frontend output
<section id="myId" class="m-post-avatars myClass">
<div class="m-post-avatar myClass2">
<img decoding="async" src="">
</div>
<div class="m-post-avatar myClass2">
<img decoding="async" src="">
</div>
...
</section>
Attributes
Check out below all the available attributes this shortcode can take:
