Add Custom Tabs to Member Profile Pages Using HTML

IMPORTANT NOTE: This article is a guide for developers. In this example, this code will only display custom tabs when another default nav tab on the member’s profile page is already displaying. If at least 1 default tab is not already displaying on the member’s profile page, then this method will not work and alternate custom coding is required.


You would need to edit the widget Bootstrap Theme - Member Profile - Member Tabs Lazyload

Of course in this example we will be using a div id that will likely be different from the one you assign. We went ahead and added a custom div id for this example.

This line of coded added another tab: 

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

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

<?php } ?>

The next thing to do to edit what appears inside of that tab is to add this code:

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

As you will see, you can add as much custom content as you wish inside of this div and it will show in the tab that has been linked to the proper tab. 

For additional questions or help setting this up, please submit a ticket to [email protected] or create a ticket HERE.