Adding a map for your new element
Adding a new element to the page builder needs to be handled via a child theme. In the below examples, we’ll be adding the code directly into the child theme functions.php file (salient-child/functions.php).
The first step in adding a new element to the page builder is to register a map using the WPBakery function vc_map. This map will contain all of the element settings as well as the general information about the element i.e. the title, shortcode name etc. For a full list of all available parameters you can use when creating your element, view the WPBakery documentation here.
add_action('vc_before_init', 'salient_child_custom_wpbakery_elements'); function salient_child_custom_wpbakery_elements() { vc_map( array( "name" => __( "My Custom Element", "salient-child" ), "base" => "my_custom_element", "class" => "", "category" => __( "Content", "salient-child"), "html_template" => get_stylesheet_directory() . '/custom_element_templates/my_custom_element.php', "params" => array( array( "type" => "textfield", "class" => "", "heading" => __( "Text", "salient-child" ), "param_name" => "text_content", "value" => __( "Default param value", "my-text-domain" ), "description" => __( "Description for foo param.", "my-text-domain" ) ), array( "type" => "colorpicker", "class" => "", "heading" => __( "Text color", "my-text-domain" ), "param_name" => "color", "value" => '#FF0000', "description" => __( "Choose text color", "my-text-domain" ) ) ) )); }
Creating a template to display the element
With the above snippet in place, a new element will be now available to select in the page builder. However, nothing will display on the front-end of the site because there’s no template file yet. In the function above, we’ve specified that the template file will live within the child theme at salient-child/custom_element_templates/my_custom_element.php – this is handled through the line:
"html_template" => get_stylesheet_directory() . '/custom_element_templates/my_custom_element.php',
That location can be changed to wherever you wish to store the templates.
Creating the template file to process and display our element.
Inside the file salient-child/custom_element_templates/my_custom_element.php, we can now take in and use the parameters in whatever way we want to. Our element has two parameters:
- A text field stored as text_content
- A color field stored as color
As an example, we’ll take both of those fields and output them in a basic paragraph:
<?php // Exit if accessed directly if ( ! defined( 'ABSPATH' ) ) { exit; } extract(shortcode_atts(array( "color" => "#000", 'text_content' => '' ), $atts)); echo '<p style="color: '.$color.';">'.$text_content.'</p>';
In conclusion
Registering a new element essentially involves two key steps – specifying a map that contains the element options, and specifying a template file to use those options and create an output. For further examples on processing elements in template files, you can examine the Salient element set template files at wp-content\plugins\salient-core\includes\vc_templates