Advanced API Documentation

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

    
Setting name of the trigger

    
                                                                        Option 1            
                                                                           Option 2            
                                                                           Option 3                                                                               
    


    
Setting name

    


    
Setting name

    

      ...

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

      

           ...
      

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

$CURRENT_SECTION = $Y_NOW["AAA"];
 for ($i = 0; $i < count($CURRENT_SECTION); $i++) {
        hc_get_content_recursive($CURRENT_SECTION[$i],$EXTRA);
}

• 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.

• 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
  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',
          'version'    => '1.0'
          '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 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/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

  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";

  
  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.
  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.