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 that can be used as the base for your elements:

• Element Code Features – An advanced element containing all the option types you can use for your element, as well as methods used for scripts and other API features for elements
• Sample Element – A simple element containing basic options. This can be used as a starter for your element

Prerequisites:

• Node JS LTS version installed – https://nodejs.org/en/
• Composer installed – https://getcomposer.org/download/

How to use the tool

In order to use the tool, you will need to run the following command inside the WP plugins folder ( \wp-content\plugins ):

npx @zionbuilder/create-zion-extension my-awesome-zion-plugin

After this, you will be presented with several questions:

• WordPress plugin name ( will be displayed in WordPress admin page ) (My Awesome Zion Plugin) – Here you can set the plugin name
• Plugin URL – The url for the plugin
• Plugin Description (A Zion Builder Companion plugin.) – The plugin description
• Plugin Author REQUIRED – Plugin author name
• Plugin Author URL – The url for the plugin author

After filling all the required information, a WordPress plugin will be created using the name you’ve provided earlier.

Final notes and general considerations:

• Zion Builder elements can be created in both PHP and Vue js. If the Vue js component is not loaded for an element, the render will be done on the server
• If you want to register custom style options ( by default, style options will be added automatically for the wrapper element ), you can use the following code:

/**
 * Get style elements
 *
 * Returns a list of elements/tags for which you
 * want to show additional style options
 *
 * @return void
 */
public function on_register_styles() {
    $this->register_style_options_element(
        'sample_styles',
        [
            'title'    => esc_html__( 'Additional Style options', 'zionbuilder' ),
            'selector' => '{{ELEMENT}} .zb-sample-child',
            'tag_id' => 'sample_child'
        ]
    );
}