Discover with this tutorial how to create an author box using WordPress native blocks.
Displaying the author box at the end of posts can be an interesting strategy if you want sporadic visitors to “remember your face”.
Many themes, including Genesis Framework child themes, offer to add this author boxes at the end of posts. But you know I’m a big believer in taking advantage of the new features WordPress includes.
And right now (in WordPress 6.2) we already have 3 blocks that allow you to create an author box easily:
- Avatar
- Post author name
- Post author biography
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:
Are you interested in doing the same? Here’s how:
Steps to create an author box with WordPress blocks
First add a column block with 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:
Next, customize to your liking the blocks, I leave you the settings I used for this example:
I leave you the HTML, in case you want to copy/paste:
<!-- wp:columns {"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 {"width":"33.33%"} -->
<div class="wp-block-column" 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 /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->The good thing is that the data is dynamically taken from the author’s information (which can be filled in from the profile).
In the next tutorial I will explain how you can display it conditionally.
Conclusions
Now you know how to create an author box with native WordPress blocks.
Any questions? Let me know in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
