Creating Custom Smart Component

SmartComponent allows you to create, configure and add own components easily.

Where to

Creating a custom component is very simple. First - create a folder builder/modules/components/modules/name where name - your custom component's name in lowercase.

Basic file structure

To watch and create basic component structure jump to 'Components' tab menu and follow instructions.


Create assets folder. Place images, js files or css files accordingly to assets/img or assets/js or assets/css folders.

Adding styling to your component on the frontend

To customize styling for your component just add next file structure to your component root folder assets/css/frontend.css Place styling for your component in this file which would be automatically included and used on the frontend.

Notice: frontend.css files are all gathering in builder/modules/components/templates/components.css.php file:

foreach ($list_components as $component) {
        $filename = $component->getPathAssets() . '/css/frontend.css';
        $assets_path = $component->getUrlAssets();
        if (file_exists($filename)) {
            echo preg_replace('/\{\%assets_path\%\}/', $assets_path, file_get_contents($filename));

So all your urls in frontend.css should look like this

.some_class {
        background-image: url('{%assets_path%}/path/to/needed/asset/from/assets/folder');

where {%assets_path%} is a pattern that would be replaced with url of your assets folder.

That's it.

Alternative case

Notice: If you want to separate your component's from builder plugin (to keep them save on updates) or you want to override existing ones, follow next instructions.

Go to your theme folder wp-content/themes/your_theme. Create such folder structure there: subbuilder/modules. Now you can add your custom component's modules to the folder modules.

To make it all work just place this peace of code in the functions.php file

if (file_exists(get_template_directory() . '/subbuilder/modules')) {
        $submodules_path = get_template_directory() . '/subbuilder/modules';
        $modules = dir($submodules_path);
        while (false !== ($name = $modules->read())) {
            if ($name != '.' && $name != '..' && $name != '' && file_exists($submodules_path . DIRECTORY_SEPARATOR . $name . DIRECTORY_SEPARATOR . 'index.php')) {
                require_once($submodules_path . DIRECTORY_SEPARATOR . $name . DIRECTORY_SEPARATOR . 'index.php');

To override existing modules just use the same name for basic files and classes from overriding one.

Here we are!