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:

    $HC_CUSTOM_COMPONENTS = array(
    array(
    'id' => 'AAA',
    'name' => 'BBBB',
    'icon' => 'fa-star',
    'type' => 'component'
    ),
    array(
    'id' => 'XXX',
    'name' => 'YYY',
    'icon' => 'fa-gears',
    'type' => 'container'
    ),
    array(
    '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:

















BACK-END ADMIN CODES

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

AAA




Text area input

AAA




Select

AAA




Checkbox

AAA




Checkbox with text

AAA





Image uploader






Mini image uploader

AAA







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.



...


...

...
Tabs












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



...





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







SETTING CUSTOMIZATIONS

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>

FUNCTIONS FOR BACK-END

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

CONDIZIONAL HIDDEN 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




LOAD SCRIPT AND CSS

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



SHOW YOUR COMPONENT ON FRONT-END

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, is all ready. Please use Framework Y - HTML to build your components.

Framework Y


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
$CURRENT_SECTION = $Y_NOW["AAA"];
for ($i = 0; $i < count($CURRENT_SECTION); $i++) {
hc_get_content_recursive($CURRENT_SECTION[$i],$EXTRA);
}



ADD 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:


    $HC_CUSTOM_THEME_OPTIONS = array(
    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
    STYLE.CSS
    Update the top informations of file style.css of theme folder and child theme folder, the theme folder name must have the same theme name.

    /*
    Theme Name: YOUR THEME NAME
    Theme URI: URL OF THEME PREVIEW
    Author: YOUR NAME
    Author URI: YOUR WEBSITE
    Description: YOUR THEME DESCRIPTION
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    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',
    'colors' => array("#000","#000"),
    'demos' => array(array('id' => 'AAA','name' => 'BBB'),(array('id' => 'AAA','name' => 'BBB')),
    'demos_url' => 'http://www.yoursite.com/demo/'
    );

    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 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/demo.zip. For example if you have 2 demos with ID drink and food, and the demos_url is http://www.yoursite.com/demo/, your demo.zip files must be http://www.yoursite.com/demo/drink/demo.zip and http://www.yoursite.com/demo/food/demo.zip.

    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 WITH CSS
    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
    FONTS
    Load your fonts by insert the following variable into hybrid-composer/custom/custom-options-panel.php. You can get the Google Fonts names from fonts.google.com, insert only the font url like Droid+Serif:400i|Open+Sans:400,600,700,800.

    $HC_CUSTOM_FONT = "GOOGLE-FONTS-NAME";


  • 5
    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 pacakge include also the source file for allow you to edit the documentation.
    DOWNLOAD 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.


CREATE DEMO PACKAGE


  • 1 Go to STEP 2 - Theme options panel of above documentation and add the demos to the theme options panel.

  • 2 Go to Tools > Export and export all contents, rename this file with name: demo-all-contents.xml.

  • 3 Go to Tools > Export and export only your list post types, if you created its. Ex. portfolio. Rename this file with name: demo-list-1.xml. If you have multiple post types assign a sequential number. Ex. demo-list-1.xml,demo-list-2.xml.

  • 4 Go to Apparence > Theme options > customizations and click the export setting button and save the file.

  • 5 Now you should have a folder with these files (demo-list-1.xml is not required if you not have any post type) like showed on this image, all files must be into the same folder.





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.