Logo
Published on 5/31/2025

How to Customize the Navigation Bar on Your WHMCS Website

When it comes to customizing the client area of WHMCS, one of the most common requests is to customize the WHMCS navigation bar — particularly the header menu. Whether you want to rename menu items, change their links, remove unnecessary sections, or add your own, it’s important to know the correct way to do it.

WHMCS Guide: Customize the Navigation Bar Using Hooks

Unfortunately, WHMCS does not allow direct customization of the header through the theme’s header.tpl file or from the WHMCS Admin Dashboard. Trying to do so will not affect the menu behavior, since the navigation is controlled programmatically by WHMCS itself.

But don’t worry — there’s a clean, supported way to do it using WHMCS hooks.

The Correct Way: Use WHMCS Hooks

WHMCS offers a powerful hook system that lets you programmatically customize the WHMCS navigation bar menus. With a simple PHP hook, you can add, remove, or change any menu item.

Step-by-Step Guide to Modify the Header Menu

  1. Navigate to your WHMCS installation directory.
    Go to:

    /includes/hooks/
    
  2. Create a new PHP file (e.g., custom-navbar.php).

  3. Insert the following code:

    
    use WHMCS\View\Menu\Item as MenuItem;
    
    add_hook('ClientAreaPrimaryNavbar', 1, function (MenuItem $primaryNavbar) {
        foreach ($primaryNavbar->getChildren() as $item) {
            $name = $item->getName();
    
            // Change Home button URL
            if ($name === 'Home') {
                $item->setUri('https://examplehost.com/');
            }
    
            // Remove Store item
            if ($name === 'Store') {
                $primaryNavbar->removeChild($name);
            }
    
            // Replace Announcements with About
            if ($name === 'Announcements') {
                $item->setLabel('About');
                $item->setUri('https://examplehost.com/about');
            }
    
            // Change Contact Us button URL
            if ($name === 'Contact Us') {
                $item->setUri('https://examplehost.com/contact');
            }
        }
    });
    
  4. Clear the WHMCS template cache:

    • Go to:
      Admin Panel > Utilities > System > System Cleanup >

    • Then Click on: Empty Template Cache

  5. Refresh your client area to see your custom menu in action.

What This Code Does:

  • Updates the Home link to your custom homepage.
  • Removes the default “Store” menu item.
  • Renames Announcements to “About” and changes its link.
  • Points Contact Us to your custom contact page.

This approach is safe, supported, and upgrade-friendly — and can be extended further using WHMCS conditions like client login status or client group.

Need Help with Your WHMCS Setup?

If you’re launching your own hosting or reseller business, or need help with server setup, WHMCS configuration, or marketing strategy — we can help.

Contact 3Zero Digital for professional support with:

  • VPS, Dedicated, Cloud and Reseller hosting setup and deployment
  • Complete WHMCS installation, configuration, and automation
  • Custom website design and branding aligned with your business goals
  • Strategic digital marketing services to drive traffic and boost conversions

Thanks for reading! Let us know in the comments if you’d like to see more WHMCS customization guides.

Leave a Comment

Comments (0)

No comments yet. Be the first to comment!