Hightek's Guide on Adding an Additional Menu to V4 Admin Portal

[hightekhosting]

After getting so used to having our own custom menu in V3.x for staff links etc, changing to the new V4 theme in the Admin area, we have had to set out on re-adding the menu for staff "quick links" etc.

 

With our investigating complete, we're happy to bring you this guide on how do add an additional menu to your top/header section.

 

1. Before we do ANYTHING, create a backup of the following 2 files:

 

- whmcs/admin/templates/v4/header.tpl

- whmcs/includes/jscript/adminmenu.js

 

We will not be held responsible if you do not backup these files and cause errors with them.

 

2. So, we have default, V4 admin area links across the top/header bar, being HOME, CLIENTS, ORDERS, BILLING, SUPPORT, REPORTS, UTILITES, SETUP and HELP....but we want to add one.

 

For this example, let's call it STAFF LINKS

 

3. In a text editor, locate and open the first file, being your whmcs/admin/templates/v4/header.tpl

 

4. Locate the following line:

   <li class="navbutton" onmouseover="this.className='navbuttonover';dropdownmenu(this, event, menu9, '');" onmouseout="this.className='navbutton';delayhidemenu();">Help</li>

 

5. After this line, add the following code:

<li class="navbutton" onmouseover="this.className='navbuttonover';dropdownmenu(this, event, menu10, '');" onmouseout="this.className='navbutton';delayhidemenu();">Staff Links</li>

 

Then save and exit this file.

 

Note: You can call the menu whatever you like. Just replace Staff Links with your menu title.

 

6. Now in a text editor, locate and open the first file, being your whmcs/includes/jscript/adminmenu.js

 

This is where the core of your menu is made up.

 

7. Locate the following line:

menu9[6]='<a href="http://forum.whmcs.com/" target="_blank">Community Forums</a>'

 

8. After the above line, add the following:

var menu10=new Array()
menu10[0]='<a href="http://yourlink1url" target="_blank">Link 1</a>'
menu10[1]='<a href="http://yourlink2url" target="_blank">Link 2</a>'
menu10[2]='<a href="http://yourlink3url" target="_blank">Link 3</a>'

 

Note: Simply replace the URL's and Link Titles with whatever you like to add as a staff link. Maybe you want to link to your knowledgebase (client side) for easy viewing or to a particular helpful article for staff. Anything you like, it doesn't matter!

To add more links, simply add another line like menu10[2]='<a href="http://yourlink3url">Link 3</a>' and change the number in the [x] brackets. If you do not change this number, you will have issues!

 

9. Save and exit this file.

 

10. Upload both files back to their original locations, being:

 

- whmcs/admin/templates/v4/header.tpl

- whmcs/includes/jscript/adminmenu.js

 

 

That's it!

 

Now simply login to your admin area and admire your new menu's.

 

You may need to flush your browser cache, you may not.

 

Providing you have followed the above instructions to the letter, you should not have any issues adding/implementing your own additional custom menu to your V4 admin area

 

I have attached 2 screenshots to show before and after results for demonstration

 

Enjoy!

Edited May 18, 2009 by hightekhosting

[GORF]

SHHAAWEEET!!

 

A well written and detailed instruction set! Thank you.

 

[except you said "locate and open the first file" twice ]

[ljesh]

Wonderful. Thank you

[hightekhosting]

SHHAAWEEET!!

 

A well written and detailed instruction set! Thank you.

 

[except you said "locate and open the first file" twice ]

 

Copy and paste will do that to you at 4am in the morning...lol!

[Zorro67]

Given that Matt has released the community add-ons update, now i can post the following update

 

var menu9=new Array()

menu9[0]='<a href="http://wiki.whmcs.com/" target="_blank">Documentation</a>'

menu9[1]='<a href="systemlicense.php">License Information</a>'

menu9[2]='<a href="licenseerror.php?licenseerror=change">Change License Key</a>'

menu9[3]='<a href="systemupdates.php">Check for Updates</a>'

menu9[4]='<a href="systemsupportrequest.php">Support Request</a>'

menu9[5]='<a href="http://dev.whmcs.com/" target="_blank">Dev Tracker</a>'

menu9[6]='<a href="http://forum.whmcs.com/" target="_blank">Community Forums</a>'

menu9[7]='<a href="http://www.whmcs.com/members/communityaddons.php" target="_blank">WHMCS Add-ons</a>'

menu9[8]='<a href="http://wiki.whmcs.com/Main_Page" target="_blank">WHMCS WIKI</a>'

menu9[9]='<a href="https://www.whmcs.com/members/clientarea.php" target="_blank">WHMCS Client Area</a>'

 

var menu10=new Array()

menu10[0]='<a href="http://..........." target="_blank">Supplier 1 tickets</a>'

menu10[1]='<a href="http://..........." target="_blank">Supplier 1 Client Area</a>'

menu10[2]='<a href="http://..........." target="_blank">Supplier 2 tickets</a>'

menu10[3]='<a href="http://..........." target="_blank">Supplier 2 Client Area</a>'

menu10[4]='<a href="http://tshosting.com.au" target="_blank">Supplier 3</a>'

 

 

etc etc