Create a Space theme for WordPress – 2021 – Part 8, Author page

Table Of Contents

Series links

#Label

Introduction – author page

Themes often do not include an author page. This page is very useful for sites with many authors. The author link, usually at the top of each post, will open this page if the theme supports author pages. You can show a short biography and any other data from the author’s (user’s) profile. You can also show the profile image (gravatar).

In the absence of an author.php file WordPress will use the archive.php file.

Author page – space theme

Set the Author link in section-blogcontent.php

In the section-blogcontent.php file add the link below, after the date. This file is used by all posts. the_author_posts_link() ensures that the link carries the author’s id that is used by the author page to retrieve the author data.

.....
 <p><span class="fas fa-user"></span> Created by <?php echo the_author_posts_link();?></p>
.....

The entire author page code

Firstly, Create a file in the theme named author.php. The code for the entire file is below.

<?php get_header();?>
    <section class="page-wrap">
        <div class="container">
            <div class="alert alert-success">
              <div class="row">
                <div class="col">
                <?php
 // Get author ID for profile image from outside the loop.......
                    global $post;
                    $author_id = $post->post_author;
                    if ( $author_id ) :
                    ?>
                    <img src="<?php echo esc_url( get_avatar_url( $author_id ) ); ?>" />
                    <?php endif; ?>
                </div>
                <div class="col">
                    <?php 
                    $curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
                    ?>
                <h1> <span class="fas fa-user"></span> Posts by: <?php echo $curauth->display_name?></h1>
                <p><?php echo $curauth->description?></p>
                </div>
              </div>
            </div>
                <div>
                    <?php get_template_part('includes/section', 'archive')?>
                    <?php the_posts_pagination();?>
                </div>
             </div>
       </div> 
    </section>
<?php get_footer();?>

Get the author’s profile image

Below is a breakdown of how the page works.

As we are outside the WordPress loop, to get the author’s profile picture you need to access the $post object. Remember the author link is inside the relevant post. The $post object contains all the post data. Consequently the global keyword is used to assign the variable $post to the post data. Once the variable is set you can get the author id and use this to get the correct image url.

 .......
<div class="row">
                <div class="col-lg-2">
                <?php
                // Get author ID for profile image from outside the loop.......
                    global $post;
                    $author_id = $post->post_author;
                    if ( $author_id ) :
                    ?>
                    <img src="<?php echo esc_url( get_avatar_url( $author_id ) ); ?>" />
                    <?php endif; ?>
                </div>
........

Get the author’s name and biography

Next, get the author’s name and biography. The $curathor variable is set by accessing the author’s data using the get_user_by() function. This function uses the data from the author’s link such as the slug or author name.

 ......
<div class="col-lg-10">
                    <?php 
                    $curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
                    ?>
                <h1> <span class="fas fa-user"></span> Posts by: <?php echo $curauth->display_name?></h1>
                <p><?php echo $curauth->description?></p>
                </div>
.........

Generate a list of the author’s posts

The final section uses the archive template part to display a list of the author’s posts.

.......
 <div>
    <?php get_template_part('includes/section', 'archive')?> 
    <?php the_posts_pagination();?>
 </div>
....

In the next part of this course we look at sidebars.