Wordpress frontend builder

Lightweight content management system. Connect your theme to it in matter of minutes. Frontend builder writes code for you. A modern, must-have solution for every theme developer!

Wordpress Shortcodes

Frontend builder uses wordpress shortcodes as display functions. There is no need to modify your theme. Just map them and your good to go.

Fully optimized

No unnecessary scripts are included. Frontend editing is done virtually, on the separate page from the one used as a display.

Premade UI-System

Every control is at your disposal. Each control has multiple parameters to best suit the atribute you want to use it on.


Responsive dimensions and margins are changeable. Some or all default shortcodes can be removed. New shortcodes can be included.


All builder commands are bound to $fbuilder global variable. You can access all the parameters and functions from there.

Action hooks and events

Wordpress actions

add_action('fbuilder_activate', function);n'fbuilder_activate' is wordpress action hook that is executed when user activates frontend builder.nnadd_action('fbuilder_head', function);n'fbuilder_head' is wordpress action hook that is executed in the head of fbuilder edit page.

jQuery events

$(document).on( 'refresh' , '.fbuilder_module' , function(){});nnrefresh is event that is triggered every time content reloads inside of fbuilder shortcode. You can use it to re-initiate scripts that modify html structure like sliders etc.nnFor mouse events you can use live document events to prevent shortcodes from failing after module loads.

Options and templates

fbuilder options

$fbuilder->set_options($Array); is public function that expects array ($optionName => $optionValue, $optionsName2 => ....) as parameter.nn$fbuilder->option($name); is public function that returns value of one option.n nAll fbuilder options are located in wp_frontend_builder_options table in the database


$fbuilder->save_templates($Array); is public function that expects array ($templateName => $templateItems, $templateName2 => ... ) as parameter.nnAll fbuilder pages are located in wp_frontend_builder_pages table in the database. You can copy $templateItems from page items column.

Shortcode functions

Remove shortcodes

$fbuilder->remove_shortcodes(); is a global function that can accept, array, string, or no parameter. If you call it without the parameters it will remove all the default shortcodes. Array should consist of fbuilder shortcode slug strings. nnThis is the array of all the default shortcodes:nnArray(n'heading', 'separator', 'button', 'image', 'video', 'testimonials', 'tabs', 'accordion', 'alert', 'features', 'post', 'menu', 'icon_menu', 'sidebar', 'search' n)n

Add new shortcodes

$fbuilder->add_new_shortcodes($Array); is a global function that expects array as parameter. The $Array should represent map of your shortcodes and their parameters. nnList of shortcodes is located in the /functions/shortcode_list.php file. It can be used as a reference for your shortcode map if you get stuck with building it. We tried our best to make the array keys as readable and logical as they can be.nnFor more details about the shortcode mapping system read the next section.

Shortcode array

Formatting shortcode array

Shortcode array is array of unique slugs that point to shortcode options, and it should look something like this:nnarray(n 'button' => array(n 'type' => 'draggable',n 'text' => 'Button',n 'function' => 'fbuilder_button',n 'options' => array( /* your shortcode options will go here */ )n)nnnalert is used as unique identifierndraggable is the type of control used for shortcodes and should not be changednButton is the text displayed in the shortcode draggable menunfbuilder_button is the name of your wordpress shortcodennOptions part should be the main focus here, it is the array of all the options for that shortcode.

Formating options array

Similar to shortcode array Options should be formated as array of:n'name' => control_options_array()npairs. And should look something like this:nn'options' => array(n 'text' => array(n 'type' => 'input',n 'label' => 'Text',n 'std' => 'Read more'n ),n 'font_size' => array(n 'type' => 'number',n 'label' => 'Font size',n 'std' => 16,n 'unit' => 'px'n )n)nnThis mapping will generate this shortcode:n[shName text='Read more' font_size='16']nnAs stated before text and font_size are names of the controls and your shortcode parameters. The arrays represent set of control atributes which can differ depending on the control type and will be covered in the next section.

Control atributes

Each control must have a type atribute, since it is the core on which builder creates controles, at the moment you can create these controles:nninput, textarea, checkbox, select, button, number, image, icon, sortable

Global atributes

label => The label text,ndesc => Label description if needed, nstd => Default value when user inserts the shortcode,nclass => Control wrapper class for customizing control behavior, nhide_if => Used to dynamically hide control when it's value doesn't affect the display

"hide_if" formating

Example:nn'hide_if' => array(n  'text' => array('hide1', 'hide2')n)nnThis means that control will be hidden if the other control with name 'text' is set to ether 'hide1' or 'hide2'.

Control specific atributes

Checkbox control aditional info

Checkbox returns 'true' or 'false' as string. When setting it bare in mind that standard value should be sat as string too.

Select control aditional info

Appart from standard atributes select has the 'options' atribute. Options is array of value => label pairs. Value will be passed to the shortcode while users can see only the label of each option.

Icon control aditional info

Icon has 'notNull' additional option, if this option is set to false, user must pick a icon. For 'std' attribute of the icon shrotcode use one of the font awesome classes.

Button control aditional info

Button can have a 'float' atribute, if set to 'true' it will float left. It can also have the 'loader', similar to float loader will include ajax loader gif near the button if set to 'true'.

Number control aditional info

Number has optional 'min', 'max', 'unit' atributes. They are used for setting the range and metric unit of the number bar. Unit is set to 'px' by default.

Sortable control aditional info

Sortable is the most complex control in the set, it can have any other control inside of it. Users can add, sort or remove sets of options. It's ideal for tabs, accordions, galleries etc.nnSortable control 'options' attribute should be formatted as 'options' attribute for shortcodes.