Page tree
Skip to end of metadata
Go to start of metadata

 

Introduction

Your plugins can include the same interface elements as cPanel-provided WHM interfaces. To best match the WHM interface, we strongly recommend that you include the provided headers and footers in all of your custom interfaces.

Note:

For help to match custom interfaces to the WHM interface, read our experimental User Interface Style Guide.

Basic usage

To include WHM's header and footer, use the WRAPPER directive to include the master_templates/master.tmpl file:

[% WRAPPER 'master_templates/master.tmpl' -%]

Note:

To include WHM's header and footer, use the /usr/local/cpanel/php/WHM.php PHP library:

<?php
 require_once('/usr/local/cpanel/php/WHM.php');
    WHM::header('Example Plugin Interface',0,0);
?>
 
// Add content here.
  
<?php
    WHM::footer();
?> 

Notes:

Options

Note:

For Template Toolkit code examples that use these flags, read the Example section below.

You can include the following flags within the WRAPPER directive:

FlagDescription
breadcrumbdata

Provides data to construct the WHM interface's navigation breadcrumbs.

When you use this flag, you must also set the following variables:

  • previous — An array of hashes that includes the following variables:
    • name — The previous page's display name.
    • url — The previous page's location, relative to the /usr/local/cpanel/ directory.
  • name — The current page's name.
  • url — The current page's location, relative to the /usr/local/cpanel/ directory.
extrastyle

Provides inline CSS code.

Note:

To include CSS stylesheets, use the stylesheets flag.

hide_header

Hides the WHM header.

  • Set this value to 1 to hide the header.
  • Set this value to 0 to display the header.

If you do not include this flag, it defaults to 0.

hide_navigation

Hides the WHM left navigation menu.

  • Set this value to 1 to hide the menu.
  • Set this value to 0 to display the menu.

If you do not include this flag, it defaults to 0.

include_legacy_stylesheets

Sets whether the interface uses legacy YUI stylesheets.

  • Set this value to 1 to include legacy YUI stylesheets.
  • Set this value to 0 to exclude legacy YUI stylesheets.

If you do not include this flag, it defaults to 0.

inside_frame_or_tab_or_popup

Hides the WHM header, left navigation menu, navigation breadcrumbs, and Support tab.

  • Set this value to 1 to hide these items.
  • Set this value to 0 to display these items normally.

If you do not include this flag, it defaults to 0.

scripts

Adds an array of JavaScript files to load with the interface. For each file, the system will create a <script> include tag and insert it into the template's <HEAD> tag.

skipbreadcrumbHides navigation breadcrumbs.
  • Set this value to 1 to hide navigation breadcrumbs.
  • Set this value to 0 to display navigation breadcrumbs.

If you do not include this flag, it defaults to 0.

skipheaderHides the interface's header.
  • Set this value to 1 to hide the header.
  • Set this value to 0 to display the header.

If you do not include this flag, it defaults to 0.

skipsupport

Hides the Support tab.

  • Set this value to 1 to hide the Support tab.
  • Set this value to 0 to display the Support tab.

If you do not include this flag, it defaults to 0.

stylesheets
Sets an array of CSS stylesheets for the interface. For each stylesheet, the system will create a <style> include tag and insert it into the template's <HEAD> tag.

 

Note:

To include inline CSS code, use the extrastyle flag. 

theme

Sets a Bootstrap or YUI theme, in order to use that theme's code and styles.

  • Set this value to yui to use YUI code and styles.
  • Set this value to bootstrap to use Bootstrap code and styles.

If you do not include this flag, it does not use a Bootstrap or YUI theme.

Example

The following code includes all of the possible flags for the master.tmpl file:

[%
     WRAPPER 'master_templates/master.tmpl'
         breadcrumbdata = {
             previous = [{name = "Home",url = "/scripts/command?PFILE=main"}],
             name = 'Previous Page',
             url = '/scripts/example',
             },
         extrastyle = '.container, #example-group { margin-bottom: 0; } #exampleContainer { margin-top: 0px; }',
         hide_header = 0,
         hide_navigation = 0,
         include_legacy_stylesheets = 1,
         inside_frame_or_tab_or_popup = 0,
         scripts = ['scripts/example.js'],
         skipbreadcrumb = 0,
         skipheader = 0,
         skipsupport = 0,
         stylesheets = ['index.css','example/styles.css'],
         theme = 'bootstrap'
 -%]

# Add plugin content here.

[% END %]

Parameters

You can pass the following ordered parameters to the WHM header:

OrderParameterDescription
1noneThe new interface's title.
2skipsupport

Hides the Support tab.

  • Set this value to 1 to hide the Support tab.
  • Set this value to 0 to display the Support tab.

If you do not include this flag, it defaults to 0.

3skipheaderHides the interface's header.
  • Set this value to 1 to hide the header.
  • Set this value to 0 to display the header.

If you do not include this flag, it defaults to 0.

Example

The following code sets the interface title to Example Plugin Interface and displays the Support tab, but hides the interface's header:

<?php
 require_once('/usr/local/cpanel/php/WHM.php');
    WHM::header('Example Plugin Interface',0,0);
?>
 
// Add content here.
  
<?php
    WHM::footer();
?>