How to Create a Bio Page - Using MB Settings Page and MB Views

A bio page is useful for personal websites, portfolios, and sponsor information. It not only provides information fully but also shows them in the cleanest way to catch everything. So, let’s figure out how to create it showing the contact information of someone. It’s a piece of cake if you use the MB Settings Page and MB Views from Meta Box.

I have a bio page about our founder as an example.

Video Version

Before Getting Started

The information about the biography will be saved in custom fields. As a result, he can change them anytime he wants without touching the page template. Then, we use MB Views to display them on the frontend.

For the bio page, you can use a normal page or a settings page to save information. But I think the settings page will be more appropriate.

So, let’s check some tools we need in this practice before starting.

First, we need the Meta Box plugin to have a framework to create custom fields and settings pages for the profile. You can download it directly from wordpress.org.

Also, you may need some advanced features from some extensions of Meta Box:

• MB Settings Page: allows you to create a settings page to input all the information that we want to be on the bio page.
• MB Views: to create a view for displaying the bio page.
• MB Builder: to have a UI on the back end to create custom fields to save that information.

You also can use several other extensions to have your own structure of fields that fit your page’s content. In this tutorial, I use MB Group to organize custom fields into groups for better management and display.

We highly recommend you use Meta Box AIO to have both the framework and extensions. It’s much more convenient than installing them separately.

Now, it’s time to see the way to make a bio page step by step.

Create a Settings Page

As I said before, instead of using a normal page to put the biography information, I use a settings page.

Go to Meta Box > Settings Page, and create a new one.

I just keep the settings of this page as default.

The page is blank now since we haven’t added any content to it.

Let’s move on to the next step for that.

Create Custom Fields for Bio Page Content

Instead of adding fixed content to the page that you should change in the template or code, we suggest you use custom fields to manage that content more easily and change it anytime you want.

These are some simple fields that I’ll create for the biography.

There will be some social links as well as websites you may want to add so I’ll create cloneable groups for them.

To create them, go to Meta Box > Custom Fields, and create a new field group.

Just add the field types corresponding to the kinds of data you want to add for the biography as usual.

For the social channels, add a Group field.

Inside the group, add subfields for the social icon, title, and URL.

You should set this group as cloneable to add more than one social channel.

Next, add another group for the links. Then, add subfields for it as well.

It’s cloneable as well.

You can add any other field types for other information as what you want to show with the help of 40+ field types from Meta Box.

After creating all the fields, move to the Settings tab to set the location for the fields. Since we’ve created a settings page for the biography, we choose the Settings page and select the suitable one.

Now, on the settings page, you can see all the fields displayed.

Just input content into them.

Next, we’ll display them on the frontend.

Display Bio Information on a Page

Go to Pages, and create a new page first.

To display the data, I’ll use MB Views. It not only helps get and display data but also style and add some action easily.

Go ahead to Meta Box > Views, and create a new view specifically for the bio page.

Besides adding code directly, MB Views supports inserting fields to get data from them by just clicking.

Click on the Insert Field button, and choose the fields from the list on the right panel.

Since the fields are applied to the settings page, move to the Site tab, you will see the fields that you created for the biography.

Just click on the field name to insert the field into the template, and choose the size or output of some special kind of data.

Since the field that stores the account information is a cloneable group. When you click on it, there will be a loop in the template. Inside it, insert the subfields.

Do the same for the links.

After inserting all the fields you need, scroll down to the Settings section. Then, choose the Type as a singular page, and select the page where you want to display the bio.

View the page on the frontend, you can see all the information is displayed.

But, it obviously needs to be beautified. So, we will style them a little bit to give the page a better look.

Style the Bio Page

In the real case, you may have a lot of ideas to have a beautiful biography page. The final look may be different from the one I’m doing but the way to do it is the same. I’m going to make the bio in a simple style like this.

Modify the Template

We’ll add some div tags and classes for styling.

Also, I’ll use JavaScript since I have a Read more button to shorten the description and spread it as well, and have a popup when clicking on the Contact button. So, we’ll declare some libraries in the Template tab.

Back to the created view to modify it.

First, add these lines of code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

In there:

• <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>: is to declare the JavaScript library as I mentioned above.
• <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />: is to declare the Font Awesome library since I want to have some Font Awesome icons for the social channels and links.

Next, we’ll add some div tags and classes for each element for styling with CSS later.

As you can see, I inserted all the elements into the corresponding classes.

Besides:

• <span class="button-readmore">Read more</span>(line 12): is to create the Read more button with the class as button-readmore. The button helps to show a part or full description when you click it. And its class will be used to add action later in JavaScript later.
• hover-shadow (line 14): is the class we created for the Contact button. It’s also used to add action later in JavaScript.

To style the bio, move to the CSS tab, and add some CSS.

Add Actions for the Buttons

To add action for the Read more and Contact buttons, I’ll use some JavaScript code. Go ahead to the JavaScript tab. We’ll add code for the action of the button one by one.

Add Action for the Read more Button

$('.button-readmore').click(function () {
    $(this).parent().find('.bio-description').toggleClass('show-full-content');
    if ($(this).text() == "Read more")
        $(this).text("Read less")
    else
        $(this).text("Read more");
})

Specifically:

• button-readmore: the class of the button that we created in the Template tab before.
• show-full-content: the class I add to the description section. It’s an action to toggle the button to show its full content since the description hides a part by default.
• Read less: the new label of the button when the content is showed fully.

When you click on the button one more time, the show-full-content class will be removed automatically since it is a kind of toggle class. As well as, the label of the button will turn to the default one as Read more.

Add Action for the ‘Contact’ Button

$(".hover-shadow").click(function () {
    $('.contact').toggleClass('show-popup');
});

$(".close.cursor").click(function () {
    $(".contact").removeClass("show-popup");
});

Explanation:

• $(".hover-shadow").click(function () {: is to trigger when the reader clicks on the Contact button with hover-shadow is the class we created for it.
• show-popup: is a class I added to display the pop-up when the Contact button is clicked.
• close: is a class of the popup’s close icon.

When the reader clicks on that icon to close the pop-up, the show-popup class will be removed. And then, the pop-up disappears.

That’s all.

I’ve uploaded all lines of code to GitHub, so feel free to refer to them, and customize them as your need.

And, we have the new look of my bio page. The Read more button and the Contact button work well.

Somedays, when you want to edit the bio information, just change the content in the custom fields. All the data on this bio page will be updated since they’re dynamic.

Last Words

With MB Settings Page and MB Views from Meta Box, creating a Bio page becomes not only simple but also highly customizable to fit your specific needs.

You can try to build your own bio page and share the results with us.

If you’re interested in this topic, you might also find it useful to learn how to display the custom user profile page on the frontend.

Thanks for reading!