Add more tabs to the vB 3.7 profile pages

Hoxxy

New Member
If you want to add more tabs to the vB 3.7 profile pages, assuming JavaScript is enabled, or more blocks if JavaScript is off, then this tutorial is for you. If you like to learn in a trial by fire sort of way, create a new template titled

PHP:
memberinfo_block_mymodification

with the following content:

PHP:
<div class="alt1 block_row">
	<ul class="list_no_decoration">
		$block_data[mymodification]
	</ul>
</div>

Add a new plugin to the member_build_blocks_start hook with the following PHP


PHP:
$blocklist = array_merge($blocklist, array(
	'mymodification' => array(
		'class' => 'MyModification',
		'title' => 'My Modification',
		'hook_location' => 'profile_left_last'
	)
));

class vB_ProfileBlock_MyModification extends vB_ProfileBlock
{
	var $template_name = 'memberinfo_block_mymodification';

	function confirm_empty_wrap()
	{
		return false;
	}

	function confirm_display()
	{
		return ($this->block_data['mymodification'] != '');
	}

	function prepare_output($id = '', $options = array())
	{
		$this->block_data['mymodification'] = 'Content to show in the tab.';
	}
}

Now visit your profile page to test it out. You should see a 'My Modification' tab that when clicked shows you the following text: Content to show in the tab. Exciting huh? Of course you need to add your own custom code for what to display, but this tutorial isn't about that, but rather to show you how to add tabs to the profile pages.

If you want to learn a bit more of the details, first consider this part:


PHP:
$blocklist = array_merge($blocklist, array(
	'mymodification' => array(
		'class' => 'MyModification',
		'title' => 'My Modification',
		'hook_location' => 'profile_left_last'
	)
));

The $blocklist variable contains the default blocks. You merge to that another array where the key 'mymodification' references an array which sets a class to use, the title of the tab on the profile page, and the hook location. You can set whatever you want for title including the use of $vbphrase but in the example 'My Modification' is used. As for the hook location, you can use profile_left_first or profile_left_last depending on whether you want your new tab to be left or right of the current tabs, respectively.

Next consider the next part:


PHP:
class vB_ProfileBlock_MyModification extends vB_ProfileBlock
{
	var $template_name = 'memberinfo_block_mymodification';

	function confirm_empty_wrap()
	{
		return false;
	}

	function confirm_display()
	{
		return ($this->block_data['mymodification'] != '');
	}

	function prepare_output($id = '', $options = array())
	{
		$this->block_data['mymodification'] = 'Content to show in the tab.';
	}
}

The class needs to be called vB_ProfileBlock_MyModification extends vB_ProfileBlock and note that part of the class name is vB_ProfileBlock_MyModification where MyModification comes from the class value set in your addition to the $blocklist variable. Inside the class, $template_name is set to the template to use, the confirm_empty_wrap function returns false to not create an empty block, the confirm_display function tests whether there is any content to display, and the prepare_output function is where you’d want to add your own custom code to fetch whatever you want to display, setting $this->block_data['mymodification'] to the content you want displayed. Remember variable scope when you add your own code, as you are inside a function that is inside a class.

Now there is the new template itself:


PHP:
<div class="alt1 block_row">
	<ul class="list_no_decoration">
		$block_data[mymodification]
	</ul>
</div>

Note that $block_data[mymodification] contains whatever $this->block_data['mymodification'] contains in the prepare_output function inside the class, and because a hook location is set in your addition to the $blocklist variable, there are no manual template edits to make. Hooray! You should of course replace 'mymodification', 'MyModification', and 'My Modification' throughout this tutorial with something meaningful for your modification.

Finally there are other things that can be added to modifications such as options, and these can be seen in the vB class_profileblock.php and member.php files, though this tutorial should get you on your way to adding more content to the profile pages via additional tabs, but remember not to go overboard with queries, because even though you need to click the tab to see the content, whatever queries you run get run on page load, not tab click. Enjoy!

tutorial based on vB 3.7.0 Beta 2
 

Phlex

New Member
Just wanted to say thanks so much for this excellent tutorial...It took me a bit to figure out but I got the P3tz info to show up in a tab. =)
 

p.n.c

New Member
i am still not gettin it

ok now i have went till the end and i got the tab with the contents to be displayed
but when i try to add my own code here

Code:
 $this->block_data['mymodification'] = 'Content to show in the tab.';

instead of 'content to show in this tab i have replaced it with

Code:
<if condition="$userinfo[petz]">
<table cellpadding="0" cellspacing="0" border="0" class="tborder" width="$stylevar[tablewidth]" align="center"> 
  <tr> 
    <td>
        <table cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%"> 
            <tr align="center"> 
              <td class="tcat">P3tz</td>
            </tr>
            <tr align="center"> 
              <td class="alt1">$userinfo[petz]</td>
        </table>
    </td> 
  </tr> 
</table>
<br /><br />
</if>
<table cellpadding="0" cellspacing="0" border="0" class="tborder" width="$stylevar[tablewidth]" align="center"> 
  <tr> 
    <td>
        <table cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%"> 
<thead>
            <tr align="center"> 
              <td class="tcat" colspan="5"><a style="float:$stylevar[align=right]" href="#top" onclick="return toggle_collapse('inventory')"><img id="collapseimg_inventory" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_inventory}.gif" alt="" border="0" /></a>My Itemz Inventory</td>
            </tr>
</thead>
<tbody id="collapseobj_inventory" style="{$collapseobj_inventory}">
            <tr align="center"> 
              <td class="thead" width="2%">Item</td>
              <td class="thead" width="15%">Name</td>
              <td class="thead" width="*">Description</td>

              <td class="thead" width="15%">Effect</td>
              <td class="thead" width="2%">Steal</td>
            </tr> 
              $petz_inventory_bit
</tbody>
<tfoot>
            <tr align="center"> 
              <td class="thead" colspan="5" align="left">
                 <span style="float:right">Total Items: $totalitems</span>
              </td> 
            </tr>
</tfoot>
        </table>
    </td> 
  </tr> 
</table>

and it showed me an error and wudnt display

i think i need to get more into this becoz m not really familiar with php
but thanks alot this tutorial have gave me at least an idea of how to creat tabs :D

thanx alot
 

p.n.c

New Member
ok i decided to remove the tab as i faced a problem that in the About member tab it shows the mod name or sumthin

i removed the plugin and template and the tab i added is removed but still shows that name and nothin else in the About section with nothin else
 
Top