How to Create a WordPress Author’s Page Template

An Introduction to the Author Template

The author.php template used to be an afterthought with most theme developers however they are now realizing the importance of including a good author.php template with their designs and displaying more than just previous posts from the author.

If you click on the author link on a WordPress website and it only shows excerpts of their previous posts, the theme probably does not have an author.php template. Excerpts are shown because of the template hierarchy for authors:

1. author-{nicename}.php
2. author-{id}.php
3. author.php
4. archive.php
5. index.php

In plain English, WordPress first looks for templates specifically created for individual authors such as author-kevin.php or author-24.php (note: nicename is set to match the corresponding username). If no template has been specifically created for that author, WordPress will display the authors information using the author.php template (which is what we are looking at today). If no author template of any description can be found WordPress defaults to the archive.php template and then the index.php template (if no archive template exists).

Linking to the Author Page

let’s briefly look at how you can link to the author page. To add a link to an authors page, simply use the the_author_posts_link tag anywhere inside the loop.

1

<?php the_author_posts_link(); ?>

The wp_list_authors() function is also pretty useful. As the name suggests, it generates a list of all authors on your site. It doesn’t need to be placed within the loop therefore it can be placed anywhere on your site e.g. sidebar, footer etc.

1

<?php wp_list_authors(); ?>

By default the tag excludes the admin account from the list and users who haven’t any posts. Here are some examples of how wp_list_authors() can be used.

You can display all users including those with no posts with the following call.

1

<?php

2

3

wp_list_authors( array(

4

    'hide_empty' => 0

5

));

6

You can display the post count and full name of each user with the following call.

1

<?php

2

3

wp_list_authors( array(

4

    'show_fullname' => 1,

5

    'optioncount' => 1

6

));

Use the following code display the top ten authors with most posts in descending order.

1

<?php

2

3

wp_list_authors( array(

4

    'orderby' => 'post_count',

5

    'order' => 'DESC',

6

    'number' => 10

7

));

Starting the Loop

In order to display information about the author (such as their name, URL and bio) and list the authors posts, you have to start the WordPress loop. Everything which is placed within the loop will be displayed on every author archive page (i.e. page 1, 2, 3 etc).

1

<?php if ( have_posts() ) : ?>

2

3

	<?php

4

		/*

5

		 * Queue the first post, that way we know what author

6

		 * we’re dealing with (if that is the case).

7

		 *

8

		 * We reset this later so we can run the loop properly

9

		 * with a call to rewind_posts().

10

		 */

11

		the_post();

12

	?>

Displaying the Page Title

At the top of author pages, the Twenty Eleven page displays Author Archives: followed by a link to the authors profile. On the main author page this link is pretty useless as it links to the current page however on author archive pages (e.g. http://www.yoursite.com/author/monty/page/2/) this link helps visitors return to the first author page.

Twenty Eleven uses the get_author_posts_url() function to link to the author page (it passes the author ID to this function by calling get_the_author_meta). It also uses get_the_author() function to display the author’s name. The get_the_author() function automatically displays the author of the current post within the loop. We started the loop in the previous section so a call to get_the_author() displays the author name.

1

<header class="page-header">

2

	<h1 class="page-title author">

3

	<?php

4

	/* translators: %s: Author display name. */

5

	printf( __( 'Author Archives: %s', 'twentyeleven' ), '<span class="vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '" rel="me">' . get_the_author() . '</a></span>' );

6

	?>

7

	</h1>

8

</header>

Rewind the Loop Back to the Beginning

A we used the WordPress loop to display a link to the author profile at the top of the page, we need to reset the posts using the the rewind_posts() function.

1

<?php

2

    /*

3

     * Since we called the_post() above, we need

4

     * to rewind the loop back to the beginning.

5

     * That way we can run the loop properly, in full.

6

     */

7

    rewind_posts();

8

?>

Page Navigation

At the top and bottom of the author page you will see links to older and newer posts. Twenty Eleven displays these links using the twentyeleven_content_nav() function.

1

<?php twentyeleven_content_nav( 'nav-above' ); ?>

Passing the parameter nav-above through the function displays the top navigation whilst nav-below shows the navigation links for the bottom of the page.

1

<?php twentyeleven_content_nav( 'nav-below' ); ?>

Details of the twentyeleven_content_nav() function can be found in the Twenty Eleven theme functions template (functions.php).

1

function twentyeleven_content_nav( $html_id ) {

2

	global $wp_query;

3

4

	if ( $wp_query->max_num_pages > 1 ) :

5

		?>

6

		<nav id="<?php echo esc_attr( $html_id ); ?>">

7

			<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>

8

			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyeleven' ) ); ?></div>

9

			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></div>

10

		</nav><!-- #nav-above -->

11

		<?php

12

    endif;

13

}

The function uses previous_posts_link() and next_posts_link() to display navigation links and ensures that no navigation is shown at the top of the 1st page. It also styles the links after aligning older posts link to the left and newer posts to the right.

There are two more things that I would like to add.

First, the queried blog posts are usually sorted in reverse chronological order. This means that the newest post will display first and older posts will display later. Therefore, the next_posts_link() takes you to older entries while the previous_posts_link() takes you to newer entries.

Second, these two functions echo the output from the functions get_next_posts_link() and get_previous_posts_link(). You should consider using these two method if you want to use the link values in PHP.

If you want to add navigation to your author template, you can wrap a CSS division around the previous_posts_link() and next_posts_link() functions and style them.

Displaying the Author Bio

To display author information, we use the get_the_author_meta() function (you may recall we also used this function previously with the get_author_posts_url() function in order to link to the author page). The bio is shows up at the top of ever author page and the if statement ensures that if no bio has been entered by the user, the bio does not show up.

The get_the_author() function is used again to display the authors name in the bio title and get_avatar() is used to display the user’s Gravatar. This function returns an img tag that contains the URL for the user’s avatar. You need to pass the user id, user email, or the gravatar md5 hash in order to get back the image. In this particular case, we are passing the user email address which we retrieve by using the get_the_author_meta() function and passing user_email as a parameter.

The second parameter in get_avatar() determines the size of the avatar image. This is set to 96pix by default in WordPress. However, the Twenty Eleven theme sets it to  60px. You can override that value and set it to something else.

1

<?php

2

// If a user has filled out their description, show a bio on their entries.

3

if ( get_the_author_meta( 'description' ) ) :

4

	?>

5

<div id="author-info">

6

	<div id="author-avatar">

7

		<?php

8

		/**

9

		 * Filters the Twenty Eleven author bio avatar size.

10

		 *

11

		 * @since Twenty Eleven 1.0

12

		 *

13

		 * @param int The height and width avatar dimension in pixels. Default 60.

14

		 */

15

		$author_bio_avatar_size = apply_filters( 'twentyeleven_author_bio_avatar_size', 60 );

16

		echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );

17

		?>

18

	</div><!-- #author-avatar -->

19

	<div id="author-description">

20

		<h2>

21

		<?php

22

			/* translators: Author display name. */

23

			printf( __( 'About %s', 'twentyeleven' ), get_the_author() );

24

		?>

25

		</h2>

26

		<?php the_author_meta( 'description' ); ?>

27

	</div><!-- #author-description	-->

28

</div><!-- #author-info -->

29

<?php endif; ?>

Displaying the Author’s Posts

Twenty Eleven displays the posts of an author by using the get_template_part() function. This allows a template that was created specifically for displaying posts to be loaded directly into the author template.

By finding out the post format using the get_post_format() function, the theme allows different types of posts to be displayed as they were attended. For example, if the post was set as an image, the content-image.php template would be used. Likewise, the content-link.php template could be used if the format was set as a link.

1

<?php

2

// Start the Loop.

3

while ( have_posts() ) :

4

	the_post();

5

	?>

6

7

	<?php

8

		/*

9

		 * Include the Post-Format-specific template for the content.

10

		 * If you want to overload this in a child theme then include a file

11

		 * called content-___.php (where ___ is the Post Format name) and that

12

		 * will be used instead.

13

		 */

14

		get_template_part( 'content', get_post_format() );

15

	?>

16

17

<?php endwhile; ?>

If No Posts Can Be Found

If no results can be found for an author, a message is displayed encouraging the user to use the search form below to search again.

1

<?php else : ?>

2

3

	<article id="post-0" class="post no-results not-found">

4

		<header class="entry-header">

5

			<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>

6

		</header><!-- .entry-header -->

7

8

		<div class="entry-content">

9

			<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>

10

			<?php get_search_form(); ?>

11

		</div><!-- .entry-content -->

12

	</article><!-- #post-0 -->

13

14

<?php endif; ?>

We use the get_search_form() function to display the form. At first, this function will try to load the form using the searchform.php file in either the child theme or the parent theme.

If no such file exists, the function will display the default search form.

Customizing the Author Template

Like any WordPress template, author.php can be customized as much or as little as you feel necessary. You can create something similar to the Twenty Eleven author template and list a basic bio at the top of every page and list posts the same way you do in category archives. Alternatively, you can expand the bio area and list their email address, messenger information (e.g. Google Talk) and the date you registered and create a unique template for displaying author posts.

Customizing the Author Bio

The bio area is very easy to modify. All of the information the author entered into their profile can be called using the get_the_author_meta function. You can pass two parameters into this function: $field and $user_id.

1

<?php get_the_author_meta( $field, $user_id ); ?>

The first parameter $field is the name of the data you want to access whilst $user_id allows you to return data from a specific author. The $user_id parameter is only used outside of the loop. We don’t need to use it anyway as we are calling this function from within the loop, therefore WordPress knows the user we want to call information for.

The following table lists some of the parameters you can pass to the get_the_author_meta() function:

There is other information such as the color scheme in admin area, syntax highlighting etc. that you can get from this function. However, we don’t need that here.

As we saw before, most basic author templates simply display the authors gravatar on one side and the authors bio on the other. You could easily spice this up with some CSS. For example, you could place an information box down one side showing the users contact information (email, Google talk etc), another showing the users full name and website address.

I have gone ahead with the following code for displaying author information:

1

<?php

2

// If a user has filled out their description, show a bio on their entries.

3

if ( get_the_author_meta( 'description' ) ) :

4

	?>

5

<div id="author-info">

6

	<div id="author-avatar">

7

		<?php

8

		/**

9

		 * Filters the Twenty Eleven author bio avatar size.

10

		 *

11

		 * @since Twenty Eleven 1.0

12

		 *

13

		 * @param int The height and width avatar dimension in pixels. Default 70.

14

		 */

15

		$author_bio_avatar_size = apply_filters( 'twentyeleven_author_bio_avatar_size', 70 );

16

		echo get_avatar( get_the_author_meta( 'user_email' ), $author_bio_avatar_size );

17

		?>

18

	</div><!-- #author-avatar -->

19

	<div id="author-description">

20

		<h2>

21

		<?php

22

			/* translators: Author display name. */

23

			printf( __( 'About %s', 'twentyeleven' ), get_the_author() );

24

		?>

25

		</h2>

26

		<p><strong>Bio</strong> &mdash; <?php the_author_meta( 'description' ); ?></p>

27

	</div><!-- #author-description	-->

28

	<div class="author-links">

29

		<p><strong>Website</strong> &mdash; <a href="<?php the_author_meta('user_url'); ?>"><?php the_author_meta('user_url'); ?></a></p>

30

	</div>

31

</div><!-- #author-info -->

32

<?php endif; ?>

Besides the author’s bio we are also giving users the website of the author in case they want to connect with them.

Customizing the Post List

If you want to create a consistent look with the rest of your site, styling the navigation and post area will be relatively straight forward as you can simply copy code from your archive.php template. A few changes to this code can give the author page a completely different look from the category archives. For example, perhaps you want to remove featured images or remove meta information.

On my own blog, I decided to simply list post titles, their excerpts, the date they were published and the category under which the posts were filed. It’s a lot simpler and makes searching through author posts easier. Here is the code I used to display a list of posts rather than full excerpts:

1

<h2 class="all-posts-title">All Posts by <?php echo get_the_author(); ?></h2>

2

3

<ol>

4

	<!-- The Loop -->

5

	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

6

	<li>

7

	<h2 class="post-heading"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h2> 

8

	<p class="post-meta">Published On <?php the_time('d M Y'); ?></p>

9

	<p><?php the_excerpt(); ?></p>

10

	<p class="post-meta">Filed Under <?php the_category(', '); ?></p>

11

	</li>

12

	<?php endwhile; else: ?>

13

		<p><?php _e('No posts by this author.'); ?></p>

14

		<?php endif; ?>

15

	<!-- End Loop -->

16

</ol>

This produces the following:

You might have noticed that the author page no longer has a sidebar. I got rid of it by removing the following line.

1

<?php get_sidebar(); ?>

This goes on to show that you have full control over the content that makes up the author archive page. With the removal of the right sidebar, the page appears somewhat empty. We can remedy that with some CSS that resizes the main content to take up the whole width.

Spice Up the Author Archive Page with CSS

The presentation of the author archive page has a lot of room to improve. We could make better use of empty space, change the size of article headings and other important text, make changes to the spacing around different elements among other things.

I used the following CSS to make all the stylistic changes:

1

h2 {

2

  font-size: 1.7rem;

3

  font-weight: 600;

4

}

5

6

ol {

7

  font-size: 1.25rem;

8

  margin-left: 1rem;

9

}

10

11

ol li {

12

  margin: 2rem 0;

13

}

14

15

ol li p {

16

  margin: 0;

17

}

18

19

#author-info {

20

  font-size: 1rem;

21

}

22

23

#content {

24

  width: 80%;

25

}

26

27

#author-description h2 {

28

  font-size: 1.5rem;

29

  font-family: "Bebas Neue";

30

}

31

32

strong {

33

  font-family: "Bebas Neue";

34

  font-size: 120%;

35

}

36

37

.archive #author-info {

38

  font-family: "Lato";

39

  font-weight: 500;

40

}

41

42

#author-description {

43

  margin-bottom: 2rem;

44

}

45

46

div#author-info p {

47

  margin: 0;

48

}

49

50

.author-links {

51

  margin-top: 2rem;

52

}

53

54

div.author-links p {

55

  margin-bottom: 0;

56

}

57

58

h2.all-posts-title {

59

  font-family: "Bebas Neue";

60

  font-weight: 900;

61

  font-size: 3rem;

62

}

63

64

h2.post-heading {

65

  font-family: "Bakbak One";

66

}

67

68

p.post-meta {

69

  color: orangered;

70

  font-family: "Dosis";

71

}

The final result looks like this:

Conclusion

By improving your author.php template and displaying more information about authors you will give them more exposure and make it easier for readers to find out more about them. The template itself is fairly easy to modify once you get used to it.

If your theme doesn’t have an author.php template, the best thing to do is to copy another template such as archive.php and remove all the code from the content area i.e. keep the code at the top and bottom that shapes your design but remove all the code that isn’t needed for the author page. Once you have done so, you should be able to easily create your own author.php template using this article and the author.php templates from the WordPress community themes as references.