Create an author box displaying social icons using blocks in WordPress

Discover with this tutorial how to create an author box that also displays social media icons using WordPress native blocks.

Displaying the author box at the end of the posts can be an interesting strategy if you want sporadic visitors to “remember your face” in case you are the author.

But it can also be convenient when there are several authors and you want to display their data and social networks at the end of the posts.

In this tutorial we are going to combine two previous tutorials so that the author data is filled in automatically:

• Creating an author box using blocks in WordPress
• Adding links to the WordPress social icons block automatically

The nice thing is that you can customize the layout directly from the block editor. For example, using a column block you can get something like this:

Interested in doing the same? Here’s how:

Steps to create an author box with WordPress blocks

1. Add the social networks fields in the user profile

The good thing is that the data is dynamically taken from the author information (which you can fill in from the profile).

The first thing you need to do is to add the fields in the user profile in order to add the necessary data.

Add the following code at the end of functions.php or in your functionality plugin:

In the code above you use the user_contactmethods filter to add 4 social networks and/or platforms:

• WordPress.
• Github.
• Twitter
• Mastodon

This is just an example that you can adjust to your or your client’s needs.

2. Fill in the social networks and biography fields

If you want the full author box to be displayed you will have to ask the authors to fill in the fields from their WordPress user profile page (or you can do it if you are an administrator and have them):

3. Create the author box with blocks

First add a column block with a 30-70% layout to make the right column wider.

Then add the avatar block in the left column and the name and bio on the right.

The structure would look like this:

In the social icons block you don’t need to fill in the URL field as you are going to get that done automatically. 😉

Next, customize the blocks to your liking, I leave you the settings I used for this example:

I leave you the HTML, in case you want to copy/paste:

<!-- wp:columns {"verticalAlignment":null,"style":{"spacing":{"blockGap":{"top":"0","left":"0"},"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}},"border":{"radius":"3px","style":"solid","width":"2px"}},"borderColor":"secondary","backgroundColor":"tertiary","className":"author-box"} -->
<div class="wp-block-columns author-box has-border-color has-secondary-border-color has-tertiary-background-color has-background" style="border-style:solid;border-width:2px;border-radius:3px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:avatar {"size":150,"isLink":true} /--></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-author-name {"isLink":true,"fontSize":"large"} /-->

<!-- wp:post-author-biography /-->

<!-- wp:social-links {"iconColor":"contrast","iconColorValue":"#000000","className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"service":"wordpress"} /-->

<!-- wp:social-link {"service":"github"} /-->

<!-- wp:social-link {"service":"twitter"} /-->

<!-- wp:social-link {"service":"mastodon"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

4. Add links to the block programmatically

Once you have reached this point, all that is missing is the “logic” that will make the social icons blocks take on the values of the user profile.

Add the following code snippet to your functionality plugin:

In this code you use the render_block_data filter to detect the social network blocks which you have added to the user profile and, when rendered, add the link.

There you have it, thanks to 4 dynamic blocks offered by WordPress:

• Avatar
• Name of the author of the post
• Post author biography
• Social icons

Adding a bit of code to them you have managed to create an author box that will automatically display the data of the author who wrote the post.

Conclusions

Now you know how to create an author box with social icons using native WordPress blocks.

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂