Block element custom author box
GeneratePress premium 1.13 will be bringing us the ability to included template tags into block elements thus allowing us to create dynamic content more easily. Until then we can still make use of shortcodes to emulate that functionality. We just need a bit of PHP code to create those shortcodes. I will show you how to do it in this article by creating an author box in GenerateBlocks!
To begin with, make sure you have a Biographical Info text for your authors since we are going to use that for our author box. Also, make sure your authors have a first and last name and the Display name publicly as option is set appropriately.
Now create a block element and use GenerateBlocks to create your author box elements. In my case, I used an image block for gravatar image and two headlines for the author’s name and description. I used a container with a two-column grid that contains an image of the first container grid and a title and description for the second grid container. Make sure you use headlines for your content and user description as headlines can render shortcodes that we are going to use for our placeholders. You can go crazy with your design, just use image blocks and headlines for the time being.
Now drop the following code into your functions.php or use a functionality plugin. I always suggest that you work with a child theme.
// Post author
function author_name_shortcode(){
global $post;
$author_id = $post->post_author;
$author = get_the_author_meta('first_name', $author_id);
$author_url = get_author_posts_url( $author_id);
$author_name = 'About ' . '<a href="' . $author_url . '">' . $author . '</a>';
return $author_name;
}
add_shortcode('post_author','author_name_shortcode');
// Post author description
function author_desc_shortcode() {
global $post;
$author_id = $post->post_author;
$author_desc = get_the_author_meta('description', $author_id);
return $author_desc;
}
add_shortcode('post_author_desc','author_desc_shortcode');
// Post author gravatar
function author_gravatar_shortcode() {
global $post;
$author_id = $post->post_author;
$author = get_the_author_meta('display_name', $author_id);
$author_url = get_author_posts_url( $author_id);
$author_gravatar = get_avatar( get_the_author_meta( 'ID' ), 150); //150 is the gravatar width and height in px, adjust accordingly.
$author_gravatar_linked = '<a href="' . $author_url . '">' . $author_gravatar. '</a>';
return $author_gravatar_linked;
}
add_shortcode('post_author_gravatar','author_gravatar_shortcode');
// Post author image alt and title tag
function replace_content($text) {
$alt = get_the_author_meta( 'display_name' );
$text = str_replace('alt=\'\'', 'alt=\'Avatar for '.$alt.'\' title=\'Gravatar for '.$alt.'\'',$text);
return $text;
}
add_filter('get_avatar','replace_content');
// Post author - Add "avatar-img" custom class
function add_gravatar_class($class) {
$class = str_replace("class='avatar", "class='avatar-img", $class);
return $class;
}
add_filter('get_avatar','add_gravatar_class');The above code creates various shortcodes that we are going to include as placeholders in our block element. I have commented on the various sections for your convenience.
Since I created a custom class for the avatar image, I can now style it using the following CSS:
/* Author Gravatar image */
.avatar-img {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.3);
}It’s time to replace our elements with our shortcodes now. Replace the author title with the [post_author] shortcode and the author description with the [post_author_desc] shortcode. As for the image gravatar, delete the image and replace it with a shortcode block. Enter [post_author_gravatar] as a shortcode.
Now. we need to set the location of our custom author box. I used the generate_after_do_template_part hook because I wanted to display the author box after the main post content and before the post comments. I could have used the generate_before_comments_container hook BUT the author box would not be visible if at any point I wanted to disable post comments!
Finally, I set the box to appear ONLY on single posts.
Now save your block and check a single post on your page. Voila!
You can also convert the block as a reusable Gutenberg block and drop it wherever you want!
Here is a list of valuable WordPress functions related with this tutorial:
Need help on customizing GeneratePress or GenerateBlocks?
Helpful info
Keep up to date with newly released articles
Sign up to the Knowledge Base newsletter