How to create your own page builder elements
In this article, we will go trough creating a custom pagebuilder element for Kallyas. Please follow the steps bellow:
- Activate your child theme
- Inside the child theme folder, create a new folder named “custom-elements” and inside it create your element folder “my-custom-element“
- Inside the my-custom-element folder created earlier create a new PHP file in which the custom element code will be found ( for example “my-custom-element.php” ) and add the following code:
<?php if ( ! defined( 'ABSPATH' ) ) { return; } class KallyasChild_MyCustomElement extends ZnElements { /** * This method is used to retrieve the configurable options of the element. * @return array The list of options that compose the element and then passed as the argument for the render() function */ public function options() { // In case you need to dispay the unique id of the current element, you can use this variable $uid = $this->data['uid']; // Array containing options $options = array( 'has_tabs' => true, 'tab1_id' => array( 'title' => 'FIRST TAB NAME', 'options' => array( array( 'name' => __( 'Text', 'zn_framework' ), 'description' => __( 'Text option', 'zn_framework' ), 'id' => 'text', 'std' => 'The default value', 'type' => 'text', ), array( 'name' => __( 'Link', 'zn_framework' ), 'description' => __( 'Link option example', 'zn_framework' ), 'id' => 'link', 'std' => array( 'url' => '#', 'target' => '_self', 'title' => esc_html__( 'Click me', 'zn_framework' ), ), 'type' => 'link', 'options' => zn_get_link_targets(), ), ), ), 'tab2_id' => array( 'title' => 'SECOND TAB NAME', 'options' => array( array( 'name' => __( 'Select option example', 'zn_framework' ), 'description' => __( 'option description.', 'zn_framework' ), 'id' => 'select_option_id', 'std' => 'option_key_1', 'type' => 'select', 'options' => array( 'option_key_1' => __( 'Option name 1', 'zn_framework' ), 'option_key_2' => __( 'Option name 2', 'zn_framework' ), ), ), ), ), ); return $options; } /** * This method is used to display the output of the element. * * @return void */ public function element() { $options = $this->data['options']; $classes = $attributes = array(); $uid = $this->data['uid']; $classes[] = $uid; $classes[] = zn_get_element_classes( $options ); $attributes[] = zn_get_element_attributes( $options, $this->opt( 'custom_id', $uid ) ); ?> <div class="<?php echo esc_attr( zn_join_spaces( $classes ) ); ?>" id="<?php echo esc_attr( zn_join_spaces( $attributes ) ); ?>"> My element content </div> <?php } /** * Output the inline css to head or after the element in case it is loaded via ajax request */ public function css() { $uid = $this->data['uid']; $css = " /** Your custom css here */ "; return $css; } public function scripts() { // Load scripts needed by this element by using wp_enqueue_script or wp_enqueue_style // You can access the current element directory using $this->getUrl('assets/js/custom-element-js.js') } /** * Can render * * @return boolean True/false if the element should render or not. Default is true */ public function canRender() { return true; } /** * Can load * * Checks if the element can be loaded or not. It is usefull if this element is depending on a different plugin and you need to check if that plugin is active * * @return bool */ public function canLoad() { return true; } }
Now, you will need to register the element by adding the following code into the child theme functions.php file:
/** * Load Custom Elements */ add_action( 'znb:elements:register_elements', 'kallyas_child_load_custom_elements' ); function kallyas_child_load_custom_elements( $zionBuilder ) { include get_stylesheet_directory() . '/custom-elements/my-custom-element/my-custom-element.php'; /** * Register the element to the elements library * * id: The unique element identifier * name: A name that will be visible in elements tab * level: - 1: Element can only be placed as full width * - 2: Element can only be placed in a section ( for example, the column element is a level 2 ) * - 3: Element can be placed as full width or inside a level 2 element ( column ) * category: The category in which the element is placed * keywords: Keywords that will help you find this element when searching the ELements tab */ $zionBuilder->registerElement( new KallyasChild_MyCustomElement( array( 'id' => 'unique_element_id', 'name' => __( 'VISIBLE ELEMENT NAME', 'zion-builder' ), 'level' => 3, 'category' => 'Content', 'keywords' => array( 'scroll' ), ) ) ); }
Your element should be visible now by searching for the “VISIBLE ELEMENT NAME” inside the elements tab.
Helper functions and methods:#
zn_get_element_classes( $options ) : Will return the element css classes based on options
zn_get_element_attributes( $options = array(), “Custom ID” ) : Will return an array containing the element attributes based on options
zn_join_spaces( $array_to_join ) : Will join an array by spaces
Get saved values:#
In order to get a saved value from the options, you can use the following method:
$this->opt( ‘OPTION_ID’, ‘Default value in case the option is not set’ );