How to Customize the Default Authors Byline in WordPress Themes

WordPress is limited to only one author per post, and this limitation carries over to themes.

PublishPress Multiple Authors extends WordPress to support multiple authors on each post, and tries to work out-of-the-box. However, there are places where Multiple Authors is restricted because of theme limitations.

This tutorial will show you how to customize the author bylines that are controlled by your site’s theme.


Technical Background

WordPress themes usually rely on functions such as “the_author()”, “get_the_author()”, “get_the_author_meta()”, etc, which are prepared to return data from only one author.

Using filters, Multiple Authors is able to add the name of all authors in the string, separated by commas. Unfortunately, this doesn’t work for links because HTML won’t allow 2 links inside the same “<a>” tag.

So, if the theme is not prepared correctly, there is no way to automatically create multiple “<a>” tags, one for each author. As a result, themes will sometime display multiple authors in the author byline, but inside only one link.

A good example is the default theme “Twenty Nineteen”, which we will use in this tutorial.

Customizing your theme for Multiple Authors

We don’t advise you customize the main theme, since the changes would be overwritten on every update. The best way to add Multiple Authors support to your theme is using a child theme.

If you don’t have one, you can easily start it creating a new folder in the path “/wp-content/themes/twentynineteenchild” and adding a stylesheet file named “style.css”. In the stylesheet, add this header comment:

/*
 Theme Name:   Twenty Nineteen Child
 Theme URI:    https://example.com/twenty-nineteen-child/
 Description:  Twenty Nineteen Child Theme
 Author:       John Doe
 Author URI:   https://example.com
 Template:     twentynineteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentynineteenchild
*/

Now, create a new file named “functions.php” and enqueue that stylesheet:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Now you can activate the child theme and check if everything is working on the frontend.

The next step is creating a new template file to override it in the theme. In this case we need to find out what template file we need to override. You can use the browser to inspect the page, specifically the author byline element and discover the markup we need to identify in the files. Some themes require to change it on multiple files.

If you are using Chrome, you can right click on the author byline and check the markup. For the Twenty Nineteen this is the markup:

Note that there are some HTML elements with classes that could be useful to look for in the files. Open your code editor or IDE and use the search feature to find text inside the files on the parent theme folder. Search for “author” or “byline”. I’m using PHPStorm:

We found out that the template file we need to override is “wp-content/themes/twentynineteen/inc/template-tags.php”.

On this theme we have another option. Note that there is a conditional code checking if the function “twentynineteen_posted_by” exists. If not, it defines it. That means we can define it on our “functions.php” file. That way the theme will use our function instead of the one defined in the theme. If your theme doesn’t have a conditional like that, you can override the entire template file and modifying the required functions. More information here.

Here is your custom function:

function twentynineteen_posted_by()
{
    /**
     * This block is specific to each theme.
     */
    echo '<span class="byline">';
    echo twentynineteen_get_icon_svg('person', 16);
    echo '<span class="screen-reader-text">' . __('Posted by', 'twentynineteen') . '</span><span class="author vcard">';

    /**
     * This is the action that echoes the author box in the screen.
     * The action pp_multiple_authors_show_author_box accepts 4 params, but for this example we will be using only 2:
     *
     * $showTitle = false
     * $layout = 'inline'
     *
     * The $layout param can contain the slug of any custom layout you have created on Multiple Authors 3.0.0 and above.
     */
    do_action('pp_multiple_authors_show_author_box', false, 'inline');

    /**
     * This block is specific to each theme.
     */
    echo '</span></span>';
}

Now you can try refreshing the page and checking the result.

If you have 2 or more links for the authors, it worked. Inspect the element to double check:

Professional publishing plugins for WordPress! Get PublishPress