Having a section for their bio is to let people know more about the author who made the fantastic content. This way also helps to improve the credit of the content as well as the author on the post. Let’s dive in to explore how to display them with Meta Box and Bricks.

This is an example for the bio section that we will create in this practice.

This is an example for the bio section

Video Version

Before Getting Started

Each author will be a user on your WordPress website. They also have an account with some basic and default place for information as WordPress provided. As well as, we’re using custom fields for some extra information that you can flexibly input any kind of data.

As a result, they can publish a post on their own. You can dig into the tutorial on having Guest Authors for more details. In this practice, we are going to find out just how to display their information on each post they made.

In this practice, we need the Meta Box core plugin to create custom fields. You can install it directly from wordpress.org.

We also need some advanced features from Meta Box which are from some of its extensions:

  • MB Relationships: to create a bi-direactional relationship between posts and users to know which post from which author.
  • MB User Meta: It allows you to create fields for users.
  • Meta Box Builder: to create custom fields to save author information on an easy-to-use UI.
  • MB Admin Columns: to manage the posts from which authors and show it on the admin screen.

You can install these extensions individually or just use Meta Box AIO.

The last one, we use Bricks to build the page.

Create Custom Fields

WordPress provides just some basic fields for users to save the most common information. So, to save more things such as social links, phone, address,... I’ll create custom fields, then assign them to users.

Go to Meta Box > Custom Fields to create the fields.

Go to Meta Box > Custom Fields to create the fields

After having all the fields, move to the Settings tab, set the Location to apply the fields to User. Notice that, we can do this only when activated the MB User Meta extension.

move to the Settings tab, set the Location to apply the fields to User

Go to the user profile page, you will see the field in each account, and you can input information to them.

These are the field in each account

Create the Relationship

Go to Meta Box > Relationships, and create a bi-directional relationship between the posts and the authors.

Go to Meta Box > Relationships, and create the relationship between the posts and the author

There’ll be two sections: From and To with the same structure of settings.

Enter all the settings for the relationship and each side of it in two sections

Because Meta Box supports bi-directional relationship, so these two sections are just for separate two objects to connect, the order will be not matter. I set the Object Type as Post in the From section and User in the To section.

set the Object Type as Post in the From section and User in the To section

Because I activated the MB Admin Columns extension before, I have the following option in both two sections of the relationship’s settings. You should check the box to manage the posts and who publishes them better.

show as an admin column option in both two sections of the relationship’s settings

It will help to display the related posts from the relationship on the dashboard like this.

This is authors are related to posts

In the Field tab, you can set the label for the relationship section in the post editor.

In the Field tab, set the label for the relationship section in the post editor

After publishing the relationship, you will see a new field on the right sidebar in the post editor of each post type.

The box as a field at the right sidebar to choose which author is related to the current post

Go to the user profile page, you will have a field to choose which posts contributed by this author.

This is a field to choose which posts contributed by the author

As well as, in the post editor, you also can choose an author who is related to the current post. You can select several authors in this section.

This box to choose which author is related to the current post

Display the Author Information on the Page

You might have a template for the singular page where you display the post content.

This is a template for the singular page where display the post content

Go to Bricks, and edit the template.

Go to Bricks, and edit the template

Go to the settings of this template, set a condition to assign to Post in the Post type.

In the setting of template, set a condition to assign to Post in the Post type

And, also set a preview for it in the Populate content section.

set a preview for it in the Populate content section

I’ll add the author bio at the bottom of the page body. So, add the Heading element for this section.

add the Heading element for the author section

Add a Block for the section.

Add a Block element for all information of the author

I also will use this Block element again to set the layout and easier style later. Or, you can use the Div element instead.

Use this Block element again to set the layout and easier style later

Set the Query to Get User

Before displaying the author information, we should set a Query to get only the user who is set as author in the relationship field. So, enable query loop for the block which will cover all the author information.

Enable query loop for the block to cover all the author information

Instead of setting the query type as User, I’ll set the name of the relationship between Post and User that I created in the previous step. This setting helps us to query all the authors related to this post, not only one author if you use the default field for author from WordPress.

Set the name of the relationship between Post and User to query all the authors related to this post

Now, it’s time to display the author's information.

Display the Author Information

I will create a section with some basic information about an author like this.

This is a section with some basic information about an author

Based on the fields you have for the author, and which one you want to show, just add reasonable elements inside the Block element that we added the query to.

Add an Image element for the author avatar.

Add an Image element for the author avatar

Then select dynamic data from the corresponding field.

select dynamic data from the corresponding field

For the name, title, and bio. I choose the Basic Text element.

For the name, title, and bio, choose the Basic Text element

And also set dynamic data for each of them. Here I set dynamic data for names as an example.

Set dynamic data for names as Nicename

Do the same with the title and bio.

Set dynamic data for the title and bio

The contact information saved in a group field. We should use a query to get data from the group. So, I added another Block element, and enabled the query loop for it. Then, set the type of the query as the name of the group field for the contact information.

Add another Block element for contact information

Enable the query loop for the Block element, set the type of the query as the name of the group field

Then use the List element to display the contact info.

Choose List element to display the contact info

Add the title for Website information, and set the Meta setting as dynamic data from the matched subfield of the group.

Add the title for Website information, and set the Meta setting as dynamic data from the matched custom field

For other contact information, do the same. Just change the title and set the Meta settings.

The last part is where we show all the icons for the social linking. The links also are saved in a group, so I add a Block element once again. Also, set a query for this Block element from the group of custom fields for social networks.

add a Block element and set a query for social networks

Then, add some Icon elements inside the block. Each one will be used for a social network linking.

Add some Icon elements used for social network linking

In each Icon element, choose an icon to display.

Choose an icon to display

Set the Link as External URL. Then, in the URL option, set dynamic data from a subfield of the group as well.

Set the Link as External URL and set dynamic data from a subfield of the group

Do likewise for all the social network icons.

After getting all the expected information for the author, just go to the page on the front end, you will see the result of all the author information without any style.

This is the result of all the author information without any style

Style the Section

To make the author bio section look better, go back to the page template, change the settings of each element.

This is the desired look for the section.

This is the desired look for the section

Last Words

Hopefully, you can create your own bio-author page with Meta Box and Bricks easily after reading our tutorial. Don’t hesitate to share your results with us in the comments. And, follow our channel to see more helpful tutorials!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  9. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  10. How to Add Custom Fields for WooCommerce - P2 - Using MB Views
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Authors and Guest Posts - Using Meta Box
  13. How to Add Related Posts - Using Custom Fields
  14. How to Build a Hotel Booking Website Using Meta Box - P1
  15. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  16. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  17. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  18. How to Create a Classified Ads Website using Meta Box
  19. How to create a FAQs page - P5 - Using Meta Box and Breakdance
  20. How to Create a Product Page - P2 - Using Meta Box and Oxygen
  21. How to Create a Product Page - P3 - Using Meta Box and Bricks
  22. How to Create a Product Page - P4 - Using Meta Box and Elementor
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page - P6 -Using Meta Box and Breakdance
  25. How to Create a Product Page - P7 - Using Meta Box + Kadence
  26. How to Create a Product Page - P8 - Using Meta Box and Brizy
  27. How to Create a Product Page - P9 - Using Meta Box and Divi
  28. How to Create a Product Page using Meta Box Plugin
  29. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  30. How to Create a Recipe - P3 - Using Meta Box and Elementor
  31. How to Create a Recipe - P4 - Using Meta Box and Bricks
  32. How to Create a Recipe - P5 - Using Meta Box and Zion
  33. How to Create a Recipe - P6 - Using Meta Box and Brizy
  34. How to Create a Recipe - P7 - Using Meta Box and Breakdance
  35. How to Create a Recipe - P8 - Using Meta Box and Kadence
  36. How to Create a Recipe - P9 - Using Meta Box and Divi
  37. How to Create a Recipe with Meta Box Plugin
  38. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  39. How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
  40. How to Create a Simple Listing - P4 - Using Meta Box and Elementor
  41. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  42. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  43. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  44. How to Create a Team Members Page - P4 - Just Meta Box
  45. How to Create a Team Members Page - P6 - using Meta Box and Breakdance
  46. How to Create a Team Members Page - P7 - Using Meta Box and Kadence
  47. How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
  48. How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
  49. How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
  50. How to Create a Video Gallery Page - P5 - Using MB Views
  51. How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
  52. How to Create a Video Gallery Page Using Meta Box + Oxygen
  53. How to Create ACF Flexible Content Field with Meta Box
  54. How to Create an Auto-Updated Cheat Sheet in WordPress
  55. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  56. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  57. How to create an FAQs page - P4 - Using Meta Box and Bricks
  58. How to Create an FAQs Page - P6 - Using MB Views
  59. How to Create an FAQs Page - P7 - Using Meta Box and Divi
  60. How to Create an FAQs Page -P3- Using Meta Box
  61. How to Create Buttons with Dynamic Link using Custom Fields
  62. How to Create Category Thumbnails & Featured Images Using Custom Fields
  63. How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
  64. How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
  65. How to Create Download and Preview Buttons - P3 - Using MB Views
  66. How to Create Download Buttons in WordPress - Using Custom Fields
  67. How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
  68. How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
  69. How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
  70. How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
  71. How to Create Notification Using Custom HTML Field
  72. How to Create Online Admission Form for School or University
  73. How to Create Online Reservation Form for Restaurants using Meta Box
  74. How to Create Relationships - P1 - Using Meta Box and Oxygen
  75. How to Create Relationships - P2 - Using Meta Box and Bricks
  76. How to Create Relationships - P3 - Using MB Views
  77. How to Create Relationships - P4 - Using Meta Box and Breakdance
  78. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  79. How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
  80. How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
  81. How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
  82. How To Display All Listings On A Map With Meta Box
  83. How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
  84. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  85. How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
  86. How to Display Images from Cloneable Fields - P3 - with Elementor
  87. How to Display Images from Cloneable Fields - P4 - with Bricks
  88. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  89. How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
  90. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  91. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  92. How to Display Product Variations - P3 - Using Meta Box and Bricks
  93. How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
  94. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  95. How to Display the Latest Products - P6 - using Meta Box and Breakdance
  96. How to Display the Latest Products - P7 - Using Meta Box + Kadence
  97. How to Display the Latest Products Section - P4 - Using Meta Box + Zion
  98. How to Display the Most Viewed Posts - P1 - using MB Views
  99. How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen

Leave a Reply

Your email address will not be published. Required fields are marked *