The plugin structure
The new plugin which extends Zion Builder current elements should have the following basic structure: │ .gitignore │ composer.json │ manifest.json │ package.json │ readme.md │ readme.txt │ ruleset.xml │ tsconfig.base.json │ tsconfig.json │ webpack.config.js │ zion-builder-extension-example.php │ zionbuilder.config.js │ ├───assets │ └───vendors ├───includes │ │ Plugin.php │ │ Utils.php │ │ │ └───Elements │ […]
Registering elements in PHP
Plugin.php file should have the following structure to load the php template files of the newly added elements namespace MyPlugin; use MyPlugin\Editor; use MyPlugin\Frontend; // Prevent direct access if ( ! defined( ‘ABSPATH’ ) ) { return; } class Plugin { public static $instance = null; private $version = null; private $project_root_path = null; private $project_root_url = null; public $plugin_data = []; public $plugin_file = null; public function __construct( $path ) { $this->plugin_file = $path; $this->project_root_path = trailingslashit( dirname( $path ) ); $this->project_root_url = plugin_dir_url( $path ); $this->plugin_data = get_plugin_data( $path ); $this->version = $this->plugin_data[‘Version’]; self::$instance = $this; } public function register_elements( $elements_manager ) { $default_elements = [ ‘MyElement’, ]; foreach ( $default_elements as $element_name ) { $file_path = Utils::get_file_path( ‘includes/Elements/’ . trailingslashit( $element_name ) . $element_name . ‘.php’ ); if ( is_file( $file_path ) ) { include $file_path; // Normalize class name $class_name = str_replace( ‘-‘, ‘_’, $element_name ); $class_name = __NAMESPACE__ . ‘\\Elements\\’ . $class_name; […]
Registering elements in JavaScript
Each element should have an editor.js file where the element is registered to Zion Builder plugin import myElement from ‘./components/myElement.vue’ import { registerElementComponent } from ‘@zb/editor’ registerElementComponent({ elementType: ‘my_element’, component: myElement })
How to create a custom plugin
Zion Builder has a very powerfull API for developers and it also provides several tools for developers. The easiest way to create a Zion Builder plugin is to use the @zionbuilder/create-zion-extension npx command which we will cover bellow. This tool will create a fully functional WordPress plugin and will bring two elements for Zion Builder […]
