Create a custom page builder element

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:

1. A text field stored as text_content
2. 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