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 ) );
?>
<?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’ ),
) ) );
}
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 ) );
?>
” id=””>
My element content
My element content
<?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’ );
Source: https://my.hogash.com/documentation/how-to-create-your-own-page-builder-elements/