Displaying multiple authors in an article often signifies collaborative efforts, where each contributor brings unique perspectives, knowledge, and skills, resulting in a more comprehensive and well-rounded piece. This approach facilitates the acknowledgment of individual contributions, with each author playing a distinct role in the research, writing, or analysis. Listing multiple authors ensures proper credit for their respective contributions.
If you’re utilizing Advanced Custom Fields (ACF) to generate custom fields on your WordPress website, there’s no need to install an additional plugin for adding and displaying multiple authors. ACF facilitates the addition of an ‘author’ field, and when the Select Multiple option is activated, it enables the inclusion of multiple authors within the same field.
This guide will walk you through the process of adding and displaying multiple authors in a post using ACF to input author information. Additionally, we’ll create a shortcode to efficiently showcase the authors, featuring their avatars on the left and names on the same line. Let’s dive into the steps!
Adding and Displaying Multiple Authors in WordPress with ACF
Step 1: Create an Author Custom Field
After successfully installing and activating the Advanced Custom Fields plugin, initiate the process by creating a custom field group through the ACF menu on your WordPress admin dashboard.
Provide a title for the field group in the Add New Field Group field. In the field section, modify the Field Type to User and assign a Field Label; the Field Name will be automatically populated. Optionally, filter the user by role for the custom field by selecting a role in the Filter By Role options. Activate the Select Multiple option by toggling the switch, then save the field group by clicking the Save Changes button.
Step 2: Add a Custom Code
Moving forward, the next step involves implementing custom code on your WordPress website to effectively display multiple authors within your posts. This can be achieved by creating a custom plugin or by directly adding the code to your theme’s functions.php file, which is the approach we’ll be taking in this tutorial.
If you opt for the latter method, it’s advisable to either use a child theme or regularly back up your website to mitigate the risk of losing modifications during theme updates.
When you’re prepared, navigate to Appearance → Theme File Editor on your WordPress dashboard. Subsequently, paste the following code at the bottom of the functions.php file.
If you’re working with a block theme, you can find the Theme File Editor menu located within the Tools menu. In the case that your chosen theme, like “Twenty Twenty Three,” doesn’t include the functions.php file, you might need to create it via SFTP or your site’s file manager initially.
function getauthors() {
$users = get_field("authors");
$output = '';
if ($users) {
$authorImages = array();
$authorNames = array();
foreach ($users as $user) {
$author_name = esc_html($user['display_name']);
$author_avatar = esc_attr(get_avatar_url($user['ID']));
$authorImages[] = '<img src="' . $author_avatar . '" alt="' . $author_name . '" title="' . $author_name . '" />';
$authorNames[] = $author_name;
}
$output .= '<div class="author-list">';
$output .= implode('', $authorImages);
$output .= '<span>By ' . implode(', ', $authorNames) . '</span>';
$output .= '</div>';
}
return $output;
}
add_shortcode('wppauthors', 'getauthors');
The provided code establishes a [wppauthors]
Step 3: Add a Custom CSS
At this point, your shortcode should be prepared to display the authors on your website. Nevertheless, before implementation, let’s enhance its visual appeal by providing you with custom CSS to stylize it. Here it is.
/* CSS for the author list */
.author-list {
display: flex;
align-items: center;
}
.author-list img {
width: 40px; /* Adjust the width of the author images as needed */
height: 40px; /* Adjust the height of the author images as needed */
border-radius: 50%; /* Make the images circular */
margin-right: 5px; /* Add space between images */
}
.author-list span {
margin-left: 10px; /* Add space between images and text */
}
If you want to center the author list, add the following additional CSS snippet just under the align-items: center; line and before the closing bracket.
justify-content: center;
Now, insert the final CSS snippet into the Theme Customizer’s additional CSS editor, typically found at Appearance → Customize → Additional CSS. If you use a block theme, we have a separate article covering how to enable theme customizer on a block theme.
For users of page builders such as Divi Builder or Elementor, you can incorporate the CSS in the Custom CSS editor within each respective setting. In Divi, access the Custom CSS editor through the Divi menu → General tab → Custom CSS.
For Elementor, the Custom CSS editor is located at Site Settings → Custom CSS editor within your Elementor visual editor.
Step 4: Select the Authors in the Custom Field
Go to the post you want to add multiple authors for or create a new one and add the related authors in the newly created custom field the Authors field. When you click on the Authors field, you will be provided a list of users with author roles (since we set it at the first step), go ahead, and select the authors you want to display in the article.
Navigate to the post where you intend to feature multiple authors or create a new post. In the newly created custom field labeled Authors, input the relevant author information. Clicking on the Authors field will present a list of users with author roles (as configured in the initial steps). Proceed to select the authors you wish to showcase in the article.
As evident in the screenshot above, we have chosen two authors to be displayed in our post. Once you have finalized your author selections, it’s time to incorporate the [wppauthors] shortcode into your content. Depending on your preferences and whether you are utilizing a page builder like Divi Builder or Elementor Pro, you have the flexibility to showcase the authors anywhere within your content.
Step 5: Utilize the Shortcode to Display Multiple Authors
Add Multiple Authors in the Gutenberg Editor
Feel free to incorporate the shortcode anywhere within the editor. Whether it’s before the content, in the middle, or after the content, the choice is yours. In the example below, we’ve positioned the shortcode just above the content and below the title.
The result is as follows: the authors are elegantly showcased side by side, positioned just before the content and below the title and featured image.
Add Multiple Authors in Divi
Divi Theme Builder empowers you to craft a fully customized website effortlessly through its intuitive visual editor, even allowing customization of the single post template for your articles. To showcase multiple authors on all of your posts, initiate the process by creating a new single post template or editing an existing one.
Once you’re in the visual editor, strategically place a Text module at your desired location and input [wppauthors] into the text body. This shortcode seamlessly integrates and displays multiple authors, enhancing the overall design and functionality of your article pages.
Additionally, you have the flexibility to customize the appearance of authors further, including options for text color and size. After perfecting your template, don’t forget to save it. Witness the visual impact on your articles by opening the relevant one and observing the enhancements you’ve made to the authors’ presentation.
Add Multiple Authors in Elementor Pro
As you may already be aware, Elementor Pro offers a powerful theme builder feature, enabling comprehensive customization of your WordPress theme templates, including the single post template. Utilizing this feature, you can effortlessly integrate the shortcode to showcase multiple authors across all your posts.
Begin the process by either creating a new single post template or editing an existing one. Open the Elementor visual editor to seamlessly incorporate the shortcode. Consider placing it within a Shortcode widget, or for added flexibility in styling, opt for a Text widget where you can easily adjust the text style and color using its intuitive settings.
After completing your template, be sure to save your changes and preview the result on the front end to see the multiple authors displayed on your article.
The Bottom Line
By utilizing Advanced Custom Fields (ACF) to incorporate a custom ‘author’ field with the Select Multiple option, you can effortlessly manage and showcase multiple authors in your WordPress articles. The guide not only streamlines the process of inputting author information but also introduces a shortcode for efficient display. This shortcode neatly presents authors with avatars on the left and names on the same line, enhancing the visual appeal and recognition of each contributor in collaborative efforts.
