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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: