Advanced API Documentation

Customize WPTF with new features

Add new components - Hybrid Composer

This documentation will show you how to add new components for Hybrid Composer.

  • 1 Download the first file below and paste it into the folder wp-content\plugins\hybrid-composer\custom. The example file is a complete component ready to edit and customize.
    Download components fileDownload example

  • 2 Enter into the admin and edit a page, add a new component and you will see the new component AAA.

  • 3 Now we need to edit it. A component is composed by 3 parts: Init array, admin, front-end. On the top of file there the init array, below the admin, on bottom the front-end.

  • 4 Edit the top array and replace AAA with the ID of your component without spaces, BBB with the name that will appear to the user, icon with the icon class of FontAwesome, you can get the full list here. The field type set the position of the component and can have 3 values: component,container,lists,page. To add multiple components add multiple items to this array. Example:

    'id' => 'AAA',
    'name' => 'BBBB',
    'icon' => 'fa-star',
    'type' => 'component'
    'id' => 'XXX',
    'name' => 'YYY',
    'icon' => 'fa-gears',
    'type' => 'container'
    'id' => 'ZZZ',
    'name' => 'KKK',
    'icon' => 'fa-photo',
    'type' => 'container'

  • 5 To create the admin area replace all occurrences of AAA with the ID of your item and BBB with the item's name, then insert the codes you want on the position of the comment < !-- ADMIN - Insert the custom code here. -- >. Every setting must have the attribue data-hc-setting="CCC". Below on this page you can find the list of codes you can use. To add multiple components paste the same code one below the other. Example:

  • 6 To create the front-end replace AAA of hc_include_AAA with the ID of you component and insert the codes you want into on the position of the comment < !-- FRONT-END .... -- >. Use $Y_NOW["CCC"] to read the settings of your component. Below on this page there are a set of useful function you can use. To add multiple components add the functions one below the other. Example:

Component code snippets

Use these code blocks for create the admin of your component. Insert it on the position of the comment < !-- ADMIN - Insert the custom code here. -- > as described above.

Text input


Text area input






Checkbox with text


Image uploader

Mini image uploader


Multi images uploader

Link with uploader

Advanced link

Icon popup

Simple icon popup
Popup box
Show a list of settings into a popup that appear when you click the gears icon. You can insert here all the single settings code block but replace div with li.

  • ...

  • ...

  • ...

Flex box
Arrange horizontally the setting inside it to cover all the width of the container. Use the customization classes below to menage the width of the single setting.




Insert into the repeater-source container the settings you want to repeat.


Repeater - advanced
This repeater allow the user to add every component recursively.

Settings options

These classes and attributes can be added to the single setting item to change the design, layout and functionality.

Class or attributeDescriptionExample
small-inputSmall width applied to the input tag<div class="input-row input-text small-input"> ... </div>
small-inputMedium width applied to the input tag<div class="input-row input-text medium-input"> ... </div>
full-inputFull width applied to the input tag<div class="input-row input-text full-input"> ... </div>
only-inputShow only the input without the title, you must remove the <p></p> tag<div class="input-row input-text only-input"> ... </div>
data-mask="number"Convert a text input into a only number input<div class="input-row input-text" data-mask="number"> ... </div>

Hybrid Composer functions

A set of useful functions for Hybrid Composer and Theme options panel, back-end side.

Conditional hide options
Hide or show the options (childs) only if a checkbox is checked or if a value of a select option is selected (trigger). Add the attribute data-dependence-trigger="hide" or data-dependence-trigger="show" to the trigger option, add the attribute data-dependence-show="SETTING_NAME" to the child options that you want to hide/show, replace SETTING_NAME with the name of the trigger option. If the trigger is a select option, the child options must be like data-dependence-show="SETTING_NAME_SELECT_VALUE" where SELECT_VALUE is the sub value of the select option. Example:

Setting name of the trigger

Setting name

Setting name

Script and css loading

Custom scripts and styles
To load on front-end a custom CSS file insert a file with name custom.css into the folder wp-content\plugins\hybrid-composer\custom. To load on front-end a custom JS file insert a file with name custom.js into the folder wp-content\plugins\hybrid-composer\custom. You can download these file here or generate its from theme options panel > customizations.

Load built-in scripts and styles
The scripts and styles of Hybrid Composer are loaded only when required, every component must specify what script and style to load. To load a script\style add the code at the top of your component's container, replace AAA with the script\style name, you can find the complete list below. Example:

Script or style nameDescription
parallaxLoad the parallax script for the background parallax images
flexsliderLoad the sliders and carousel script and style
lightboxLoad the lightbox scripts and styles
slimscrollLoad the scrollbox scripts
gmapsLoad the Google Maps initialization script
gmaps_apiLoad the Google Maps main script, required
progress_counterLoad the script for progress bars, counters and countdowns
socialLoad the script and style for the social streams of Facebook and Twitter
toolstipLoad the script of Bootstrap popover
bootgridLoad the script and style of the advanced Bootgrid table
flipsterLoad the script and style of the coverflow slider
componentsLoad the script and style of tabs and accordions
paginationLoad the script and style for the pagination of the grid list and masonry list
masonryLoad the isotope script for the masonry list
fullpageLoad the script and style of the fullPage engine
popoverLoad the script and style of the popover box
twosidesLoad the script and style of the Two Sides engine
contact_formLoad the script and style for the contact form
datepickerLoad the script and style for the calendar of the contact form
image_boxLoad the style of all advanced image box components
content_boxLoad the style of all content box components

Display the components - Hybrid Composer

This documentation will show you how to show your content on the front-end. Your component content must be inserted into this function as described above, remember to replace AAA with the name of your component.:


You not need to write custom HTML or JS codes, everything is ready. Please use HTMLTF, the HTML framework, to build your components.

Read a value
To read a your setting use the $Y_NOW["ABCD"] where ABCD is the name of your setting, this method return a error if the setting is not found, the recommended method to use is hc_get_now($Y_NOW,"ABCD");.

Read image value
To get the image value use the function hc_get_img($Y_NOW['AAA'],'ultra-large'). The second field set the image sizes, there are 5 sizes: full,hd,ultra-large,large,thumbnail.

Read icon value
To get the icon value use the function hc_get_icon($Y_NOW["AAA"], $Y_NOW["AAA_style"], $Y_NOW["AAA_image"], ""). The last field is optional and set the icon size, there are 6 sizes: text-xs,text-s,text-m,text-xl,text-xxl and the default size.

Read advanced link value
To get the link value use this code:

0) echo ""; echo esc_attr($Y_NOW["text"]); ?>

Read classes and styles
Every component have, on top right, the CSS button, to read CSS classes values use the function hc_get_component_classes($Y_NOW,$EXTRA), to read the CSS styles use $Y_NOW["custom_css_styles"]. Example:


Read repeater values
To read the values and settings generated by the repeater use this code, replace AAA with the name of the repeater and BBB,CCC with the name of the settings into the repeater:

$arr = $Y_NOW["AAA"];
for ($i = 0; $i < count($arr); $i++) {
echo $arr[$i]["BBBB"];
echo $arr[$i]["CCC"];

Read advanced repeater values
for ($i = 0; $i < count($CURRENT_SECTION); $i++) {

Add new theme options panel settings

This documentation will show you how to add new settings to the theme options panel, to see it go to Apparence > Theme options.

  • 1 Download the first file below and paste it into the folder wp-content\plugins\hybrid-composer\custom. The example file is a complete example that add new settings to the panel. To add new settings use this array:

    'id' => 'AAA',
    'name' => 'BBB',
    'description' => 'This is the setting description.',
    'type' => 'checkbox',
    'label' => 'main',
    'value' =>''

    Download theme options fileDownload example

  • 2 Go to the theme panel from Apparence > Theme options and you will see the new value. To add new settings add a new array one below the other. The array values are explained on the table below.

Array valueDescription
idThe ID of the new setting, must be unique and without spaces.
nameThe name of the new setting, insert the name you want.
descriptionThe description showed to the user that explain the scope of the setting.
typeSetting type. Accepted values: checkbox,select,text,textarea,color,image_upload.
labelSet what panel's tab must contain the new setting. Accepted values: main,layout,menu,footer,lists,titles,customizations,social.
valueThe setting's value. Required only for select type. Use this sintax: value 1|value2|value3

Read theme options panel settings

To read a setting of the theme option panel use the function: hc_get_setting("ID"). Replace ID with the ID of your setting. You can use the function hc_is_setted("ID") to check if a setting have a value or if it's empty.

Custom theme

This documentation will show you how to customize WPTF to create you personal theme ready for Themeforest.

  • 1
    Edit the style.css file
    Update the top informations of style.css file of theme folder and child theme folder, the theme folder name must have the same theme name.

    Theme Name: YOUR THEME NAME
    Author: YOUR NAME
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI:
    Text Domain: THEME_DOMAIN

  • 2
    Theme options panel
    Add the array below into the file hybrid-composer/custom/custom-options-panel.php for customize the panel and insert the demos or download the example file.

    global $HC_CUSTOM_PANEL;
    $HC_CUSTOM_PANEL = array(
    'name' => 'THEME NAME',
    'version' => '1.0'
    'colors' => array("#000","#000"),
    'demos' => array(array('id' => 'AAA','name' => 'BBB'),(array('id' => 'AAA','name' => 'BBB')),
    'demos_url' => ''

    Replace the ID AAA of the demos with the demos name without spaces and all lowercase, replace the demos name BBB with the name of the demos.
    The images of the demos must be inserted into the folder hybrid-composer/custom/demos/, images name must be in JPG and the name must be the demo ID. Recommended image's size is 500x277px.

    The versionfield is the theme version and is showed on theme option panel title.

    The demos_url field is the link to the root folder of you demos, the importing process will append to the link the string DEMO-ID/ For example if you have 2 demos with ID drink and food, and the demos_url is, your files must be and

    Update the panel's logo by insert a image with name logo-panel.png into the custom folder, must be a PNG image, 29px height. Example.

  • 3
    Site colors
    Add the array below into the file hybrid-composer/custom/custom-options-panel.php for enable the colors customization by the user or download the example file.

    $HC_SITE_COLORS = '.class-example {
    color: [MAIN-COLOR];
    .class-example:hover {
    color: [HOVER-COLOR];
    .class-example-two {
    color: [COLOR-3];
    .class-example-two {
    background-color: [COLOR-4];

    Add the classes you want. You can use 4 color selectors: [MAIN-COLOR],[HOVER-COLOR],[COLOR-3],[COLOR-4].
    The 4 colors are the colors setted on the theme options panel, main settings section, the styles are applied only if the main color is setted.

  • 3
    Theme design
    Create your theme design with the CSS by insert the skin.css file into the root theme folder, this file is automatically loaded and overwrite the default design.

  • 3
    Theme's images
    Update the screenshot images of theme folder and child theme folder.

  • 4
    Load your fonts by insert the following variable into hybrid-composer/custom/custom-options-panel.php. You can get the Google Fonts names from, insert only the font url like Droid+Serif:400i|Open+Sans:400,600,700,800.


    You can also assign the CSS for the custom font selected by the user from the Theme options panel by insert the below code.

    $HC_SITE_FONTS = 'body, .adv-img p, .caption-bottom p, .adv-circle .caption p, .advs-box p, .list-blog p {
    font-family: [FONT-1] !important;
    body, .adv-img p, .caption-bottom p, .adv-circle .caption p, .advs-box p, .list-blog p {
    font-family: [FONT-2] !important;

  • 5
    Theme documentation
    The documentation is ready and you need only to insert the PDF as it is, without any change, into the package that you will upload on Themeforest. The PDF can be downloaded from the button below, the package include also the source file for allow you to edit the documentation.

  • 6 Update the theme prefix on all theme's folder files by replace all occurrences of wptf and wptf_ with your theme's prefix.

  • 7 Update language file on languages folder.

  • 8 Go to wp-content/plugins, create a zip file of the folder hybrid-composer and insert it into your-theme/inc/. The file name must be hybrid-composer-zip.

  • 9 Install Theme Check plugin and make sure not show any error.

  • 10 Create the demo packages by follow the documentation below.

Demo package

The demo package creation is currently the most difficult part. It require about 2 hours of work and consist on lot's of steps. If you need help please contact us at

Export XML file
1. Install "WordPress Menu Exporter" and from Tools > Export choose Navigation Menu Items, open the file and remove the top and bottom errors lines. Rename the file in "demo-all-contents-8.xml"
2. Export "Lists" from Tools > Export, select all the and remove them from this file, move them at top of file "demo-all-contents-8.xml"
3. Export all your Lists - Post types like the "portfolio" e rename them like "demo-list-1.xml,demo-list-2.xml, ..."
4. Export "media" and split the file in 7 different files with the app WXRsplit , rename the files like "demo-all-contents.xml, ... ,demo-all-contents-7.xml"

Video tutorial

Edit XML file
On all the xml files do the following steps.
1) Rename all the source links like "http://localhost/your-theme/wp-content/uploads/" to "", where your-uploads-folder if the directory that contain the images, video and all the medias of your demo, your-uploads-folder will contain the same content of your "/wp-content/uploads/". The final XML must contain links like "". For copyright reasons the images should not be included so you can convert them to gray images by use the software Multiple Image Resizer .NET
2) Replace: \\" with ' and \" with '
3) Delete wp:term from custom post type on demo-all-contents-8.xml, search for"-cat]]"
4) Replace: \\n with "" and \n with "", where "" mean an empty value.

Video tutorial

1) Disable WPML plugin if installed and active and check your footer contents.
2) Go to Theme options > Customizations and click Export settings, save the file as export.json. Open the file and follow the below steps
3) Replace: \\" with " and \" with ".
4) Replace: \/ with /
5) Replace: \\n with "" and \n with "", where "" mean an empty value.
6) Replace links like: "http://localhost/your-theme/wp-content/uploads/" with ""

Video tutorial

Upload all the folders inside /wp-content/uploads/ to your online URL you previously inserted in the XML files, like
So your online link will contain the /wp-content/uploads/ folders like 2016, 2017, 2018
For copyright reasons the images should not be included, so you should convert all the images to gray placeholders or similar, you can use softwares like Multiple Image Resizer .NET.

File names
1) The main home's name must be: "Home"
2) Menu's names must be: "Main menu", "Footer menu", "Top menu"
3) The XML files names must be like "demo-all-contents.xml", ... , "demo-all-contents-8.xml"
4) The List - Post Types name must be like "demo-list-1.xml", "demo-list-2.xml"
5) The Revolution Slider names must be like "Main slider", "Main slider 2" and file names like "", "", ""

Final package
1. All the files must be inserted into a zip file with name "", the zip must not contain any folder, only the files.
2. Open the file hybrid-composer\custom\custom-options-panel.php and edit the $HC_CUSTOM_PANEL variable like below:
'name' => 'Theme Name',
'version' => '1.0',
'colors' => array("#23282d","#353535"),
'demos' => array(array('id' => 'demo-name','name' => 'Main demo')),
'demos_url' => ''
The "" file must be inserted here:

You can download the demo package of Bulldog - Theme for check it.


Problems and tips
1) MENU ICON - Menu with images have formatted url that must be removed, find "http-T--I--I-" and remove all links
2) MENU FULLPAGE - Delete links, find "_menu_item_url" and remove if required
3) INVALID CHARS - Make sure to avoid these chars
and \ use instead
and /
4) The exports of Revolution Slider sometime net to be extracted and packed again manually as zip

Wrong or invalid demo images
Most of times some of the imported images are broken or incorrects, to solve the problem follow this method.
1) Find the wrong image by visit the test website of the just imported demo.
2) Find the related correct image in the same page of the original theme site
3) Open all the xml files(demo-all-contents 1 to 8), find the wrong image(step 2) and change his ID with another with a big number like 999901
4) Open demo-all-contents-8.xml and update the old ID with the new ID. Ex. replace "image-1.jpg|450|800|52" with "image-1.jpg|450|800|999901".

Custom templates

This file hybrid-composer/custom/templates.php contain the templates for Hybrid Composer. The templates are available in every page and post type by click the top right button Templates. You can add every page as template. To get the template code to add to the array of the file below select "Classic" composer mode on top right area and copy the code of the main editor, you must insert this code into the array.