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 […]