Add an Author Box in WordPress

An Author Box on a website is the info box, usually found at the bottom of a post, which includes the author bio and picture.

To create an Author Box in WordPress, you have 4 choices.

1. You can follow my step-by-step guide below and create an author box just like mine.
2. You can choose one of the pre-made Author Box templates offered by GeneratePress
3. You can try and create your own style of author box by tailoring the steps I explain below. I also added a demo video from GeneratePress at the end of this article for some inspiration.
4. You can use an Author Box plugin offered in the WordPress library; however I don’t recommend this because you’d be installing an unnecessary third party plugin. Remember that the more plugins you have the higher the security risk for your site and the slower it gets because it’s using more resources.

If you want to follow my step-by-step guide and create an Author Box similar to the below, then read on.

Creating an Author Box with GeneratePress and GenerateBlocks

Since we’re using GeneratePress and GenerateBlocks, the Author box will be created through an Element template. We will be creating a new Element (Author Box Element) that will automatically feature in all our Posts.

From your WordPress dashboard, go to the APPREARANCE option in the left-hand menu and click on ELEMENTS and Add a New Element.

Appearance > Elements > Add New Element 

The element we need to choose is a Block. Press CREATE.

In the element screen go to the right-hand Options Sidebar Menu. If the Options Menu is not showing, click on the Settings COG wheel in top-right corner.

Under Element Type we need to choose HOOK.

In the Hook name we need to choose ‘after_content’ since this block will be hooked onto the post after the content part.

Let’s start by putting in the name of the Element in the Title section. I’ll call it ‘Author Box’.

This title will not show on your website, but it’s used for referencing purposes when searching within the list of all your Elements.

To start creating our Author Box, click on the + sign in the input field of the Element page and choose the first block which will be a Container.

I always recommend starting with a Container Block. All the other blocks for our Author Box will be included within this container block. This way they are grouped together, and you have complete control over the width of the Element you are creating.

In the right-hand settings menu, under Layout, your Container settings should always be full width.

The Inner Container setting should be set to contained width.

The Container Width will depend on the width you set for the rest of your site. For the purposes of my Author Box I will set the Container width to 800.

As you can see from my Author Box example (picture above), the container will include 4 different features to make up our Author Box. These are

1. Box Title
2. Author Name
3. Author Picture
4. Author Bio

Let’s set these up one by one.

The first block within our container will be a Grid. This will help us easily place the image on the left of the box, and the written content on the right of the Author box.

Inserting a Grid Block

Click on the + sign within the container block and choose the Grid option. (Remember if you don’t find the block immediately, just type ‘Grid‘ in the search bar under the + sign).

Choose a grid that has 2 boxes with a 25%:75% ratio. See below picture.

When you click on the left and right-side boxes within the Grid you can then always add columns, delete columns, or even change the proportions of the column sizes to different ratios.

To change the size of the columns, just click on the Grid Container width % in the Block settings Menu. Here you can either choose between pre-set % or drag the width meter to your desired %.

Let’s set the left-hand box of the grid at 33%.

Now you will need to click on the right side grid-box and adjust this to 66 width, so the whole Grid adds up to 100%.

Inserting the Author Image

On the left-hand side of the Grid Block we will include our Author image and on the right-hand side we will include the Author bio info.

Remember both fields will be dynamic as the picture and information will be picked automatically from our WP User Profile section that we had set up previously (see tutorial here).

Click on the left box in the grid and click on the + sign in the block.

Select DYNAMIC IMAGE.

From the drop-down list choose the AUTHOR AVATAR option.

Don’t worry about styling the box for now. We will be setting the styles, colors and padding after we finish adding all the blocks so we can better appreciate how they work together.

Inserting the Author Bio

Next, we will set up the Author information on the right-hand side of the Grid. Click on the right box in the grid and click on the + sign in the block.

Select HEADLINE.

Now from the block pop-up bar make sure it’s a Paragraph instead of an H2. The pop-up banner should show a P now instead of the H2 there was previously.

Type ‘AUTHOR’ (all caps) in the Headline block (i.e., instead of the current greyed out Headline written in the box).

Now I will style the text, so the letters are more spaced out then normal, just to have a different effect from the rest of the bio content.

To do this click on the Headline block where we just typed in the AUTHOR and head to the right-hand Block Options Menu. Make sure the tab is set on Block and not on Element.

Now click on the TYPOGRAPHY settings and amend the Letter Spacing to 0.15.

NOTE: the settings come with pre-defined options to choose from. To insert a specific number just click on the Custom icon on the extreme right of the box.

Since we’re here, might as well click on the Font Size and make it slightly smaller. I’ll set it at 15.

Next up we will include the name of the author in a new Block below the previous paragraph we just inserted for AUTHOR.

Click on the three dots in the block pop-up and select INSERT AFTER.

Click on the + button and choose HEADLINE option. Change it to a Div instead of H2.

This time we’re going to make it a dynamic Headline so click on the dynamic option from the block pop-up bar.

Now choose POST AUTHOR NAME. This way the author’s name is automatically inserted from the Author Bio Archive we have in WordPress.

You don’t need to include anything in the ‘Before text’ section. In the ‘Dynamic Link Type’ section, select the AUTHOR ARCHIVES option so that the Name of the Author can be clickable.  

When clicked this will take the visitor to the Author’s list of Posts that he/she published.

To style the text in this block, go to the right-hand side Block settings once again and choose TYPOGRAPHY. Now make it Bold (from the Weight drop down).

I will also capitalize the first letters of the Name and the Surname by going in the Transform section and clicking on the CAPITALIZE option.

Finally, I’m going to change the font size to 23 and change the font family to Roboto Slab.

Click on SAVE DRAFT

For the next block section, we will include a brief description of the Author.

Click on the Post Author Name block we just created and then click on the 3 vertical dots (to the right of the pop-up banner). Choose INSERT AFTER.

We create the next block in this way instead of just pressing the + sign below the block, because we want the next block to be created within the same Right Grid Container block.

Click on the + within the new Block and select BROWSE ALL, because this time we will add DYNAMIC CONTENT.

You will find this within the first few Block icons in the left-hand Blocks menu.

This is a default WordPress Block and therefore the icon will be colored black (unlike the GenerateBlocks Blocks which are colored blue).

From the drop-down list of the Dynamic Content Type, choose AUTHOR DESCRIPTION. This way the information I included in my Author Profile within the WordPress User section will be automatically picked up within this Block.

Finally, we must set the Display Rules for the Author Box element we just created. Scroll down to the Display Rules section and in the Location section select POST.

That’s it. All the features for our Author box are created and this will show in every Post we publish within our website. All we need to do now is make it look good.

Styling the Author Box

Now that we have included all the blocks that go into making our Author Box, we can Publish so that we see how it looks on the website. Click on PUBLISH button and then hit PUBLISH again.

As we did when styling the Hero Header Element, I suggest opening the website in a separate tab on the internet browser and go to a published Post (if you’ve been following my WordPress tutorials I always suggest you create and publish a ‘Test Post’ so that you can test these changes on your website).

In the Test Post, you should find the Author Box we just created at the bottom of the post page.

Most probably the styling is still off. This is how mine looked the first time I hit publish:

Let’s play around with the styling options now.

Head back to the ‘Author Box’ element we just created in our WordPress and click on the List View (top-left) so that the left side bar is showing.

This way you can easily click on all the different blocks and adjust their specific settings.

Your list view should look something like the picture above if you followed exactly the blocks I included in this tutorial.

Here are the style settings I placed for my Author Box. (Remember to routinely click the UPDATE button after adjusting settings so that you can check how they look on the Test Post you opened in a separate tab. Also you will need to refresh the blog page to see the changes.)

For the main outer container, that is, the first item in the list view above I will adjust the following settings (from the Element screen right-hand options):

• Spacing > Padding: 20 for Top, Right, Bottom and Left. Remember that by clicking on the right circle icon all 4 numbers move in the same direction.
• Spacing > Margin: 20 for Top, 50 for right and left margins.
• Colors > Background Color: go to Colors and choose the Background color you want.
• Border around container: go to Spacing > Border size. Set all four numbers to 3. This is the border width around the container. The higher the number the larger the width of your border. (You can also make the corners of the border slightly curved by adjusting the Border radius numbers. Once again, click the right circle icon to lock all 4 figures together and set the Border radius to around 8. (You can also change the Border color from the Colors settings).
• Click UPDATE.

For the left container block within the grid (i.e. the container holding the picture, or third item in the list view above), I will adjust;

• Vertical Alignment; and Center it.
• Spacing > Padding: 20 for Top, Right and Bottom. Leave left padding at 0.

For the dynamic image block (i.e. the actual picture, or 4^th item in the list view above) I am going to adjust the following Block settings:

• Image Size: increase it to 150.
• Turn on ‘Make image rounded’ option.

For the right container block (i.e., the container holding the 3 blocks for the author title, name, and description), the settings are:

• First Headline Block (Author title): Spacing > Set Bottom Margin to 10
• I made no changes to the settings of the other 2 blocks (i.e. name and description)

Go ahead and hit the UPDATE button. Check how it looks now. Keep playing around with the settings until you’re happy with the outcome.

Other Styles of Author Box

There are several styles of author boxes you can create on WordPress with GenerateBlocks. Here is a video demo from GeneratePress official channel to help you understand and get you inspired.

Author Box Done. What Next

Now that we have created the Author Box Element, every time you create and publish a Post on your website, it will always include the Author Box.

While creating Elements like this Author Box, and the Hero Header I showed you in the last Tutorial, may seem like a lot of work, keep in mind that you only need to do this once.

We will be creating just a few Elements in the beginning, while setting up our site, but these will be set-up once and then you can forget about them. Once all the initial work is set up, the day-to-day maintenance of the website and update will only involve writing articles to publish.

Next up let’s add Tags to our WordPress Pages. This will enable us to set conditional logic. Basically we will be setting rules for WordPress to understand when and where to include the Author Box and the Hero Header Elements we created.