Creating a custom author box on WordPress

Customizing the author box on WordPress was more challenging than I expected it to be. I checked out several plugins and instead chose to create a PHP function in the theme. Here I’ll look at what I did.

All the plugins

I got my first guest author on Interview.Codes and wanted to ensure proper accreditation.  Until now I’ve not had guest authors on my primary blogs, thus haven’t worried about the author box. Usually I’d put footer information directly into the content of the page. This time I wanted to use a proper author box, to be consistent and avoid redundancy in my source files.

Author boxes are something that appear on a lot of sites. Doing a plugin search yielded all sorts of results for customizable boxes. They mostly weren’t what I wanted, or were overly complex for my purposes.

All I really wanted was the ability to make a template for my author box and insert dynamic fields. I’m using Elementor, so I can already create the templates. However, there are no standard short-codes to get at the author data.

Author Data Short-Codes

I double-checked the plugins, to see if any offered author short-codes.  A few did, but I didn’t want the bulky plugin for only those short-codes. Plus, they lacked documentation so I couldn’t determine if the codes were sufficient.

I decided to create my own short-codes. I try to stay away from low-level bits in WordPress, but this time it looked like some PHP was the correct approach.

I hopped into the theme editor to make a change. I use the Child Theme Configurator, which lets me isolate my changes to in a child theme. The parent theme remains intact.

I added the following to the functions.php file.

function shortcode_author_data( $atts ){
    $atts = shortcode_atts(
        array(
            'field' => 'user_name',
        ), $atts, 'author_data' );
    $field = $atts['field'];
    if( $field == 'posts_url') {
        return get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) );
    }
    return get_the_author_meta( $field );
}
add_shortcode( 'author_data', 'shortcode_author_data' );

In my template I create an Elementor "Text Editor" component with the following HTML fragment.

<h4><a href="[author_data field='posts_url']">[author_data field='display_name']</a></h4>

[author_data field='description']
<a href="[author_data field='user_url']">[author_data field='user_url']</a>

I suppose the same could be done with templates not using a block-based editor, but I don't know much about them. I've only ever used templates in conjunction with Elementor.

I combined the HTML with the author's profile image, something Elementor provides it. For the new article this creates an author box like below.

Fields and get_the_author_meta

The shortcode_author_data function is simple. It follows the common pattern found for shortcodes in the WordPress documentation.

The shortcode takes a field argument. The field is passed to the get_the_author_meta function, which retrieves information about the current author. Those names are standard and can be found in the documentation.

What’s missing however is a link the the user’s posts. That’s available with the function get_author_posts_url. I didn’t want to create a unique short-code, so I overloaded the same one. If the field name is posts_url I’ll use a different function.

I’ll be adding more of these special cases as I my site evolves. Anything related to the user will be added to the author_data short-code.

Next Steps

As I need this on multiple sites I might look into creating a plugin. A plugin will let me use the same code in multiple places, keep the theme even cleaner, let me use a proper programming environment, and manage updates better. It’s not high on my priority list though, so it might take a while.

For now this simple function inside the theme works wonderfully.