Contents

Our WHMCS Templates support come with a main menu and footer based menu. These can be edited easily whether you want to change links or add new links for newly created pages.

The files containing these menus are:

Main Menu: /whmcs_path/templates/your_template/includes/menu.tpl

Footer Menu: /whmcs_path/templates/your_template/includes/footer.tpl

Adding A New Link To The Main Menu

Adding a new link to the menu is very simple. Open the menu.tpl and you will find a breakdown of each dropdown and link. The links of a dropdown are listed within the <div class="navmain-links"> as blocks. For example the Company link is:

<div class="navmain-link{if $LANG.stellar_company_icon && $feature_menuicons eq "on"} navmain-icon navmain-icon-company{/if}{if $LANG.stellar_company_highlight} navmain-highlight navmain-highlight-{$LANG.stellar_company_highlight}{/if}{if $filename eq "company"} navmain-active{/if}{if $feature_companyoverview_displayorder neq 0} displayorder{$feature_companyoverview_displayorder}{/if}">
    <a href="{$WEB_ROOT}/company.php">
        <div class="navmain-link-heading">{$LANG.stellar_company_name}</div>
        {if $LANG.stellar_company_text}<div class="navmain-link-text">{$LANG.stellar_company_text}</div>{/if}
    </a>
</div>

The {$filename} is used to detect if the page is viewed in order to change the link to an active state. The $filename is the name of the WHMCS page .php file (e.g company.php = company).

For a new link we can simplify this code a lot. As an example we could create a link for a page named merchandise.php:

<div class="navmain-link{if $feature_menuicons eq "on"} navmain-icon navmain-icon-merchandise{/if}{if $filename eq "merchandise"} navmain-active{/if}">
    <a href="{$WEB_ROOT}/merchandise.php">
        <div class="navmain-link-heading">Merchandise</div>
        <div class="navmain-link-text">View our selection of Merchandise</div>
    </a>
</div>

This code could be used in any order for either of the dropdowns to add your new link. You would need to create the class navmain-icon-merchandise in /whmcs_path/templates/your-template/css/layout.css in order to set the icon.

Adding A New Dropdown To The Main Menu

To add a new dropdown link to the main menu open the menu.tpl file.

In this file the menu links are contained within the navmain-links div. The first line is the home button and the last is the order call to action. To add a new dropdown link you can paste and edit the following code between either of the dropdown blocks:

<li class="{if $feature_menulayout eq "megamenu"}navmain-dropdown navmain-dropdown-megamenu{elseif $feature_menulayout eq "dropdown"}navmain-dropdown navmain-dropdown-single{else} navmain-basic{/if} navmain-link5{if $filename eq "merchandise"} navmain-active{/if}"><a href="{$WEB_ROOT}/merchandise.php">Shop</a>
                
    <div class="navmain-subcontainer">
        
        <div class="navmain-columns">
            
            <div class="navmain-columns-col navmain-columns-col1">

                <div class="navmain-links">
                
                    <div class="navmain-link{if $feature_menuicons eq "on"} navmain-icon navmain-icon-merchandise{/if}{if $filename eq "merchandise"} navmain-active{/if}">
                        <a href="{$WEB_ROOT}/merchandise.php">
                            <div class="navmain-link-heading">Merchandise</div>
                            <div class="navmain-link-text">View our company Merch!</div>
                        </a>
                    </div>
                    
                </div><!-- .navmain-links -->					
        
            </div><!-- .navmain-columns-col -->
            
            <div class="navmain-columns-col navmain-columns-col2">
        
                <p>We provide a wide range of products including exclusive merchandise.</p>
        
            </div><!-- .navmain-columns-col -->							
        
        </div><!-- .navmain-columns -->

    </div><!-- .navmain-subcontainer -->

</li>

Adding A New Link To The Footer Menu

Adding a new link to the footer menu is very simple. Open the file:

/whmcs_path/templates/your_template/includes/footer.tpl

The links are listed within the <ul> as blocks. For example the Company link is:

<li class="footermain-link{if $LANG.stellar_company_highlight} footermain-highlight footermain-highlight-{$LANG.stellar_company_highlight}{/if}{if $feature_companyoverview_displayorder neq 0} displayorder{$feature_companyoverview_displayorder}{/if}">
    <a href="{$WEB_ROOT}/company.php">{if $footer_links_icon}<i class="{$footer_links_icon}"></i>{/if}{$LANG.stellar_company_name}</a>
</li>

An an example we can duplicate this and edit it for a new link named merchandise.php:

<li class="footermain-link">
    <a href="{$WEB_ROOT}/merchandise.php">{if $footer_links_icon}<i class="{$footer_links_icon}"></i>{/if}Merchandise</a>
</li>

This code could be used in any order for either of the footer links to add your new link.

Adding A New Link Block To The Footer Menu

The template uses a title and set of links within columns of the footer.tpl file. The footer is separated into 4 columns using the divs: footermain-col

To add a new block you can paste and edit the following code between either of the other blocks within one of the 4 columns (use within the footermain-col div of your chosen column):

<h6 class="footermain-heading">Heading</h6>

<div class="footermain-links">
    
    <ul>
        
        <li class="footermain-link">
            <a href="{$WEB_ROOT}/page1.php">{if $footer_links_icon}<i class="{$footer_links_icon}"></i>{/if}Page 1</a>
        </li>

        <li class="footermain-link">
            <a href="{$WEB_ROOT}/page2.php">{if $footer_links_icon}<i class="{$footer_links_icon}"></i>{/if}Page 2</a>
        </li>

        <li class="footermain-link">
            <a href="{$WEB_ROOT}/page3.php">{if $footer_links_icon}<i class="{$footer_links_icon}"></i>{/if}Page 3</a>
        </li>                

	</ul>
							
</div><!-- .footermain-links -->

Comments

If you have any questions please leave a comment below or contact our support.