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:
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.
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
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 name
Load the parallax script for the background parallax images
Load the sliders and carousel script and style
Load the lightbox scripts and styles
Load the scrollbox scripts
Load the Google Maps initialization script
Load the Google Maps main script, required
Load the script for progress bars, counters and countdowns
Load the script and style for the social streams of Facebook and Twitter
Load the script of Bootstrap popover
Load the script and style of the advanced Bootgrid table
Load the script and style of the coverflow slider
Load the script and style of tabs and accordions
Load the script and style for the pagination of the grid list and masonry list
Load the isotope script for the masonry list
Load the script and style of the fullPage engine
Load the script and style of the popover box
Load the script and style of the Two Sides engine
Load the script and style for the contact form
Load the script and style for the calendar of the contact form
Load the style of all advanced image box components
Load 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. Visit HTMLTF
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.
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:
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:
Set what panel's tab must contain the new setting. Accepted values: main,layout,menu,footer,lists,titles,customizations,social.
The 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.
This documentation will show you how to customize WPTF to create you personal theme ready for Themeforest.
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 */
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.
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.
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.
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.
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.
Update the screenshot images of theme folder and child theme folder.
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.
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.
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 email@example.com.
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"
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 "http://www.your-site.com/your-uploads-folder/", 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 "http://www.your-site.com/your-uploads-folder/2016/01/image.jpg". 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.
Export.json 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 "http://www.your-site.com/"
Medias Upload all the folders inside /wp-content/uploads/ to your online URL you previously inserted in the XML files, like http://www.your-site.com/your-uploads-folder/ So your online link http://www.your-site.com/your-uploads-folder/ 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 "main-slider.zip", "main-slider-2.zip", "main-slider-3.zip"
Final package 1. All the files must be inserted into a zip file with name "demo.zip", 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: $HC_CUSTOM_PANEL = array( 'name' => 'Theme Name', 'version' => '1.0', 'colors' => array("#23282d","#353535"), 'demos' => array(array('id' => 'demo-name','name' => 'Main demo')), 'demos_url' => 'http://your-site.com/your-demo-folder/' ); The "demo.zip" file must be inserted here: http://your-site.com/your-demo-folder/demo-name/demo.zip
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".
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.