HOW TO CREATE AN AUTHOR PAGE

How to create Authors page: in this guide, I will show you how to make a page where you can show all your authors. You do not need to use a plugin to create an authors page. I will share some code, and you can display all your authors. If you have basic knowledge of WordPress, you can do it by yourself at the end you will receive this kind of page,

Table of Contents

• let’s add PHP code and create a shortcode
  • Short Explanation of the Code (if it’s interesting)
• let’s add CSS code and make it mobile-friendly
• How to display authors on the page
• Summary:
• F.A.Q.

let’s add PHP code and create a shortcode

We need to add this PHP code to the theme, here is the path go to the WordPress dashboard then Appearance > Theme File Editor, click on functions.php, add it at the end, and click “Update File”

// show authors
function list_all_authors_with_details() {
    $excluded_authors = array(); // Add IDs of authors to exclude here

    $authors = get_users(array(
        'role__in' => array('Administrator', 'Editor', 'Author'),
        'orderby' => 'display_name',
        'exclude' => $excluded_authors,
    ));

    if (empty($authors)) {
        return '<p>No authors found.</p>';
    }

    $output = '<div class="authors-list">';

    foreach ($authors as $author) {
        $author_name = esc_html($author->display_name);
        $author_url = get_author_posts_url($author->ID);
        $author_bio = get_the_author_meta('description', $author->ID);
        $author_avatar = get_avatar($author->ID, 96);

        // Social media links
        $twitter = get_user_meta($author->ID, 'twitter', true);
        $linkedin = get_user_meta($author->ID, 'linkedin', true);
        $facebook = get_user_meta($author->ID, 'facebook', true);

        // Post count
        $post_count = count_user_posts($author->ID);

        $output .= '<div class="author-card">';
        $output .= '<div>';
        $output .= '<div class="author-avatar">' . $author_avatar . '</div>';
        $output .= '<h3 class="author-name">' . $author_name . '</h3>';
        $output .= '</div>';
        $output .= '<p class="author-bio">' . esc_html($author_bio) . '</p>';

        // Display post count
        $output .= '<p class="author-post-count">Published Posts: ' . esc_html($post_count) . '</p>';

        // Add social links if they exist
        $output .= '<div class="author-social-links">';
        if (!empty($twitter)) {
            $output .= '<a href="' . esc_url($twitter) . '" target="_blank">Twitter</a>';
        }
        if (!empty($linkedin)) {
            $output .= '<a href="' . esc_url($linkedin) . '" target="_blank">LinkedIn</a>';
        }
        if (!empty($facebook)) {
            $output .= '<a href="' . esc_url($facebook) . '" target="_blank">Facebook</a>';
        }
        $output .= '</div>'; // End social links

        $output .= '</div>'; // End author-card
    }

    $output .= '</div>'; // End authors-list

    return $output;
}
add_shortcode('all_authors', 'list_all_authors_with_details');

// show authors

by this PHP code, we are creating a shortcode and we will use it later, we can exclude some authors by adding their ID to “$excluded_authors = array();” for example, every author has an ID, you can find it by going to WordPress Dashboard > Users > All Users and click on the user which you want to exclude, you can take user ID in the URL, for example, my user ID is “3”, and then add it in “$excluded_authors = array(3);” and you will exclude this user.

Short Explanation of the Code (if it’s interesting)

This code creates a WordPress shortcode (all_authors) that displays a list of authors on a website, complete with their profile details. Here’s what it does step-by-step:

1. Exclude Specific Authors:
   • The $excluded_authors array allows you to specify the IDs of authors who should not appear in the list.
2. Fetch Authors:
   • The get_users() function retrieves users with specific roles (Administrator, Editor, Author).
   • Authors are ordered by their display name.
3. Check for Authors:
   • If no authors are found, it returns the message: “No authors found.”
4. Create the Authors List:
   • For each author:
     • Name: Fetches the author’s display name.
     • Bio: Retrieves the author’s bio/description.
     • Avatar: Displays the author’s profile picture (96px).
     • Post Count: Calculates the number of published posts using count_user_posts().
     • Social Media Links: Fetches custom user meta for Twitter, LinkedIn, and Facebook links (if available).
5. Generate HTML Output:
   • Builds a styled author-card for each author with their avatar, name, bio, post count, and social media links (if any).
6. Return HTML:
   • Returns the complete HTML structure as a list of authors, which is displayed wherever the all_authors a shortcode is used.
7. Add Shortcode:
   • The add_shortcode() function registers the shortcode all_authors to this function so it can be used in WordPress pages/posts.

let’s add CSS code and make it mobile-friendly

Here is the CSS code you need to copy and paste into your CSS file, here is the file path go to the WordPress dashboard then Appearance > Theme File Editor > style.css or click on Customizing > Additional CSS and past it here, this is unique CSS code so it will not conflict with other CSS, it has a very simple design and it is fully mobile friendly

/*authors page design*/ 
.authors-list {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-around;
    gap: 20px;
}

.author-card {
    width: 365px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.author-avatar img {
    border-radius: 50%;
    margin-bottom: 10px;
}

.author-name {
    font-size: 20px;
    margin: 10px 0;
}

.author-bio {
    font-size: 16px;
    margin-top: 10px;
}
.author-social-links a{
	margin: 0 5px;
}
 /*authors page design*/ 

How to display authors on the page

First, create the page and call it author or authors as you wish, then go to that page and insert the shortcode widget then put this shortcode in it [ all_authors ], and it will start to showings all authors.

Summary:

By using these codes you will create a simple author page, you can exclude some authors or exclude some info like Name, Bio, Avatar, Post Count, or Social Media Links. You do not need to use any plugin to create something like this, this is costume code and anyone who has basic knowledge can do this. If you have any questions, feel free to drop a comment I’m here to help! Or, if you’d like more support, you can check out my services.

F.A.Q.