Add Custom Tabs to Member Profile Pages Using HTML

Important

This article is intended for developers.

This method only works when at least one default navigation tab is already displayed on the member profile page. If no default tabs are available, additional custom development is required to create custom tabs.

To add a custom tab, edit the following widget:

Bootstrap Theme - Member Profile - Member Tabs Lazyload

Step 1: Add the Navigation Tab

The following example adds a new Facebook tab when the member has a Facebook URL.

<?php if ($user['facebook'] != "") { ?>

<li>
    <a data-toggle="tab"
       role="tab"
       href="#35"
       rel="nofollow"
       aria-controls="t35">
        Facebook
    </a>
</li>

<?php } ?>

Step 2: Add the Tab Content

Next, add the content that will be displayed when the custom tab is selected.

<div id="35" class="tab-pane" role="tabpanel">
    <div id="my_id" style="display:inline;padding:0;">
        <?php echo $user['facebook']; ?>
    </div>
</div>

The content inside the <div> can be replaced with any custom HTML, PHP, widgets, or other supported content.

The value used in the href attribute of the navigation tab (#35) must match the id attribute of the corresponding content container (id="35").

Summary

Creating a custom profile tab requires two components:

1. A navigation tab added to the member profile tabs.
2. A matching content container with the same ID.

Once both components use the same identifier, selecting the tab displays the associated content.