Creating a Custom Author Box with ACF and Shortcode for WordPress Flexibility

[ ][ ] September 24, 2024

Whats the Problem?

The need for flexibility in WordPress content often involves showcasing multiple contributors with varying levels of detail across different posts. The default author functionality in WordPress can feel limiting, especially when multiple people contribute to a single post or project. In cases where contributors may not be official users of the site, or where the design needs a custom touch (like displaying personalized bios and images), the standard approach simply doesn’t cut it. Clients want to display multiple authors for posts and be able to manage contributor profiles without hassle.

The Solution

To solve this, I built a custom solution using WordPress custom taxonomies, Advanced Custom Fields (ACF), and a custom shortcode. The taxonomy people was created to manage contributors, allowing for multiple authors to be assigned to posts without needing user accounts for each person. With ACF, additional fields like “author title,” “author avatar,” and “shortened bio” were added, enhancing the detail and customization of each author profile.

This shortcode is highly flexible, allowing clients to control the display of contributor information dynamically. Each contributor’s name, bio, and avatar (if available) are displayed in an aesthetically pleasing format. The shortcode can be easily inserted into any post and will automatically pull relevant data based on the post’s associated taxonomy terms.

function custom_author_box() {
    ob_start(); // Start output buffering

    // Get the current post ID
    $post_id = get_the_ID();

    // Retrieve the terms for the 'people' taxonomy associated with the post
    $terms = get_the_terms($post_id, 'people');
    $term_count = count($terms); 

    if ($terms && !is_wp_error($terms)) {
        // Loop through the terms and display them
        echo '<div class="lime-box" author-count="'.esc_html($term_count).'">';
        foreach ($terms as $term) {
   $author_title = get_field('author_title', 'people_' . $term->term_id) ?: '';
   $term_link = get_term_link($term);
            $author_avatar_id = get_field('author_avatar', 'people_' . $term->term_id);
            $shortened_bio = get_field('shortened_bio', 'people_' . $term->term_id);

            echo '<div class="author">';
                echo '<div class="author--image">';
                if ($author_avatar_id) {
                    echo wp_get_attachment_image($author_avatar_id, 'thumbnail');
                } else {
                    echo '<img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="fall back author avatar">';
                }
                echo '</div>';
                echo '<h5 class="author--name">'.esc_html($term->name).'</h5>';
                echo '<p class="author--description">'.esc_html($shortened_bio).'</p>';
                if (!is_wp_error($term_link)) {
                    echo '<a href="' . esc_url($term_link) . '" class="author--link">view bio</a>';
                }
            echo '</div>';
        }
        echo '</div>';
    } else {
        echo "No terms found."; // Fallback if no terms are associated
    }

    return ob_get_clean(); // Return the buffered output and clean the buffer
}
add_shortcode('single_author_box', 'custom_author_box');

Conclusion

Using WordPress’s custom taxonomies and ACF, combined with the power of shortcodes, allows for a completely customizable and flexible author box. This approach is perfect for sites where multiple contributors need to be displayed without the need for user accounts. It provides an efficient, scalable solution that’s simple to manage, making it a go-to method for enhancing content flexibility on any WordPress site.

Please note: This website is currently under development. I appreciate your patience and understanding as I work on perfecting everything. Thank you!