Search

How to Create a Custom Author Archive Page in Elementor

Elementor comes with a theme builder feature that allows you to create custom parts of your theme, including the author archive page. Two key widgets you can use to create a custom author archive page with Elementor are:

  • Author Box
  • Archive Posts

The Author Box widget will load the profile of the current author. It will load the information based on the filled author meta fields (such as name, profile picture, biography, and so on). While the Archive Posts widget will display the posts written by the associated author. You can see a live example of a custom author archive page on our website here.

Of course, in addition to the two widgets above you can also add other widgets to your liking to make your custom author archive page looks standout.

How to Create a Custom Author Archive Page in WordPress Using Elementor

Before we get started, make sure you have upgraded your Elementor to the pro version in case you haven’t done so since the theme builder feature is only available on Elementor Pro.

By the way, if you are new to Elementor, you can read this guide to learn how to use Elementor.

Once you are ready, login to your WordPress dashboard and go to Templates -> Theme Builder. You will be redirected to the theme builder page of Elementor. Click the Archive tab on the left panel followed by Add New on the upper-right corner to create a new archive template.

The main screen of Theme Builder feature in Elementor.

Elementor offers tens of ready-to-use archive templates you can choose from. Simply select a template you like. If you want to create the archive template from scratch, you can simply close the templates library. In this example, we will create the archive template from scratch so we will close the templates library.

The template library of Elementor.

In this example, we will create a simple author archive page that consists of only two widgets. Again, you can add any element to your liking to make your custom author archive page more appealing.

Start by adding a new section by clicking the plus button on the canvas area.

You can click the button to add a section or container in Elementor.

Author Box Widget

Add the Author Box widget by dragging it from the left panel to the canvas area.

Dragging the Author box widget to the canvas area of Elementor

Go to the left panel to customize the widget. On the Source option under the Author Info block, leave it to default. To disable/enable certain meta info (such as profile picture, display name, and biography), you can simply slide the toggles.

The Author Box widget settings panel in which you can make the settings.

From this block, you can also set the layout as well as the alignment of the author info.

To style up the widget, you can go to to the Style tab. There are 3 settings blocks you can open:

  • Image

You can open this block to set the alignment of the profile image, the size, the gap between profile image and author’s bio, border-radius, and box-shadow.

From the Style tab, you can style up the widget. From setting the color to typography.
  • Text

From this settings block, you can set the typography of the author’s name and bio. You can set things like the font size, font family, font style, and text color. You can also set the gap between the author’s name and author bio.

The Text block settings panel allows you to set things like font family, text size, text color, and so on.
  • Button

If you enable the archive button, you can open this block to customize it. You can set things like the background color, button text color, border-radius, and padding.

From the Button settings block, you can style the button according to your liking.

Archive Posts Widget

Add the Archive Posts widget by dragging it from the left panel to the canvas area. Once added, you can go to the left panel to customize the widget. On the Layout block under the Content tab, you can set the skin, the number of columns, image position, image size, image ratio, excerpt length, and so on.

The widget offers some presets you can choose from.

You can open the Pagination block to set the pagination and the Advanced block to set a custom message if the archive contains no content.

To style up the Archive Posts widget, you can open the Style tab. There are 5 settings block you can open:

  • Layout

You can open this block to set the gap between rows and columns. You can also set the alignment of the content.

From the Layout block, you can set the layout of the posts feed.
  • Image

From here, you to customize the image of the posts. You can set the border radius and the space between the image and content. If you want to, you can also apply a CSS filter for both the normal state and hover state.

The Image block allows you to style the image element on the widget.
  • Content

From this settings block, you can to set the typography of the post title, meta, excerpt, and read more. Furthermore, you can also set the spacing between each item.

From the Content tab, you can style up the text element of the widget.
  • Pagination

The Pagination settings block allows you to set the typography and text color of the pagination. Also, you can use different typography settings and text on three different states: normal, hover, and active. You can also set the space between pagination numbers.

To style up the pagination, you can open the Pagination block.
  • Nothing Found Message

You can open this block to set the typography and the text color of the message when the archive page in empty.

Once you are done editing the template, click the PUBLISH button on the bottom side on the left panel. You will then be prompted to set a display condition. Simply click the ADD CONDITION button.

On the dropdown menu, select Author Archive. If you want the custom author archive template to be applied to all authors on your site, you can set All on the second dropdown menu (the right one). Conversely, if you want the custom author archive template to be applied to a specific user, you can simply select your preferred author from the second dropdown menu.

You can add multiple display conditions in case you want the custom author archive template to be applied to two or more authors. Click the SAVE & CLOSE to apply the changes.

That’s it. You have successfully created the custom author archive page on your WordPress using Elementor.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

7 thoughts on “How to Create a Custom Author Archive Page in Elementor”

  1. Dumb question…
    If the condition is set to “All,” does this mean that there will be a list of ALL authors on this page? OR… does this archive template only display INDIVIDUAL authors when visitors click on their name from somewhere else (and they’re redirected here)?

    Also (another dumb question)…
    Does their profile info come from their WordPress user bio?

    Reply
    • Hi Zak. If the condition is set to “All”, the archive template will display individual authors’ archive. But you can also display all of the authors on your site if you want it.

      Reply
  2. Hi! I have a problem when i use the author box widget in author archive, don’t show the autor name, only show the superadministrator name, but in others authors nothing. When i use the widget in post in other part like single post, works fine.

    Reply
  3. How can author pages work with the new Loop Item templates? I don’t see a way to select the “Current” author in a loop item query nor can I select a Loop item as a skin in the process described here

    Reply
  4. I have followed the above instructions, however, whenever you click on the “more posts” button on any Author box in a blog post for example, it leads to the author archive page, with the correct author up top. But the blog posts displayed in the posts widget below are not from the named author. Not sure what I need to edit to fix this? Any help is much appreciated.

    Reply

Leave a Comment

Haven’t used Elementor Pro yet?