Author Bio in Oxygen using Meta Box

In the past, we showed how an author bio box can be set up in Oxygen by adding custom contact information fields using user_contactmethods filter of WordPress.

This members-only tutorial shows how the same can be done using Meta Box.

We shall

1. create a "User Fields" field group having Twitter (Text-type), Facebook, Pinterest and Instagram (latter three of URL-type) custom fields using Meta Box.
2. fill these fields with values for a test user.
3. create a shortcode using Meta Box view for outputting the social profile links while ensuring that each link will only be output if it is not empty.
4. register a custom function that returns the URL of the post author's avatar at a given size. Needed due to this bug.
5. register a generic custom function for checking if the post author has his/her bio description filled. This is to ensure that empty markup does not get printed in the output.
6. register a custom function for checking if the author has social profile fields filled. This is to ensure that empty markup does not get printed in the output.
7. set up the author bio Section in the Oxygen Template that applies to single posts (1-click paste Hydrogen code is provided).

Step 1

Install and activate Meta Box and Meta Box AIO plugins.

Go to Meta Box > Custom Fields and create a new group named say, "User Fields".

Add the desired fields for social media links.

Here is the export file from my test site. Mirror.

Step 2

Edit your user profile.

Set your display name, fill in biographical info and populate the custom user fields created in the previous step.

Step 3

Go to Meta Box > Views and create a new View.

Title: Author Social Follow Icons

Template: