Smart Components

SmartComponent allows you to create, configure and add shortcodes easily.

File structure

Minimal component has next file structure

index.php                             //Starter file
includes/SmartComponentName.class.php //Main module class `SmartComponentName`
templates/shortcode.php               //template for shortcode


index.php This is starter file. You shold change only SmartComponentName for your module/class name.

  Plugin Name: Component SmartComponentName for SmartBuilder
  Version: 1.0

if (defined('ABSPATH')) {

    $module = "SmartComponentName";
    $dependency = "SmartComponents";

    if (class_exists("SmartUtils")) {
        eval(SmartUtils::starter($module, $dependency, realpath(dirname(__FILE__) . DIRECTORY_SEPARATOR . "modules"), realpath(dirname(__FILE__) . DIRECTORY_SEPARATOR . "includes")));
    } else {
        $md5 = "mod_" . md5(rand());
        add_action("Smart_load_module", $md5);
        eval('function ' . $md5 . '(){include("' . __FILE__ . '");}');

File includes/SmartComponentName.class.php

Each component class should have config() method. It describes title, type and other components parameters. Method config() return an array of key=>value params.

List of config keys

key type Description
title String Title of component. Use __() function for localize title
icon String Url for icon file
category Array\String Category or categories
area Array\String Area or areas where this component might be used
settings Array Configurable attributes that can be used in shortcode. See more Settings form fields
localize Array Component localization array



class SmartComponentName extends SmartComponent {

    public function config() {
        return array(
            'title' => __('Title', 'name'),
            'icon' => $this->getUrlAssets(true) . "/img/icon.png",
            'category' => 'simple',
            'area' => 'pagebuilder',
            'settings' => array(
                    'field' => 'input',
                    'name' => 'content',
                    'label' => __('Text', 'name'),
                    'default' => __('Default Text', 'text'),
                    'field' => 'select',
                    'name' => 'size',
                    'label' => __('Size', 'name'),
                    'values' => array(
                        'class1' => __('v1', 'name'),
                        'class2' => __('v2', 'name'),
                        'class3' => __('v3', 'name'),
                        'class4' => __('v4', 'name'),
                        'class5' => __('v5', 'name'),
                        'class6' => __('v6', 'name')
                    'default' => 'class1'
            'localize' => array(
                'frontend' => array(
                    'someName' => __('Some name', 'name')
                'backend' => array(


File templates/shortcode.php

This file is template file for your shortcode. It means in this file we convert shortcode to html. You can use any variable from settings.

<div id="<?php echo $id;?>" class="<?php echo $size;?>"><?php echo $content;?></div>