{"id":10587,"date":"2022-01-05T15:53:04","date_gmt":"2022-01-05T15:53:04","guid":{"rendered":"https:\/\/themenectar.com\/docs\/salient\/?page_id=10587"},"modified":"2022-01-05T16:03:59","modified_gmt":"2022-01-05T16:03:59","slug":"add-new-wpbakery-element","status":"publish","type":"page","link":"https:\/\/themenectar.com\/docs\/salient\/add-new-wpbakery-element\/","title":{"rendered":"Add new WPBakery element"},"content":{"rendered":"\n
<\/div>\n\n\n\n

Adding a map for your new element<\/h3>\n\n\n\n

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)<\/span>.<\/p>\n\n\n\n

The first step in adding a new element to the page builder is to register a map using the WPBakery function vc_map<\/a>. 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.<\/p>\n\n\n

\nadd_action('vc_before_init', 'salient_child_custom_wpbakery_elements');\n\nfunction salient_child_custom_wpbakery_elements() {\n  \n\t vc_map( array(\n      "name" => __( "My Custom Element", "salient-child" ),\n      "base" => "my_custom_element",\n      "class" => "",\n      "category" => __( "Content", "salient-child"),\n      "html_template" => get_stylesheet_directory() . '\/custom_element_templates\/my_custom_element.php',\n      "params" => array(\n         array(\n          "type" => "textfield",\n          "class" => "",\n          "heading" => __( "Text", "salient-child" ),\n          "param_name" => "text_content",\n          "value" => __( "Default param value", "my-text-domain" ),\n          "description" => __( "Description for foo param.", "my-text-domain" )\n         ),\n         array(\n          "type" => "colorpicker",\n          "class" => "",\n          "heading" => __( "Text color", "my-text-domain" ),\n          "param_name" => "color",\n          "value" => '#FF0000', \n          "description" => __( "Choose text color", "my-text-domain" )\n         )\n      )\n   ));\n  \n}\n<\/pre><\/div>\n\n\n
Creating a template to display the element<\/h3>\n\n\n\n
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<\/strong> – this is handled through the line:<\/p>\n\n\n
\n"html_template" => get_stylesheet_directory() . '\/custom_element_templates\/my_custom_element.php',\n<\/pre><\/div>\n\n\n
That location can be changed to wherever you wish to store the templates. <\/p>\n\n\n\n
<\/p>\n\n\n\n
Creating the template file to process and display our element.<\/h3>\n\n\n\n
Inside the file salient-child\/custom_element_templates\/my_custom_element.php<\/strong>, we can now take in and use the parameters in whatever way we want to. Our element has two parameters: <\/p>\n\n\n\n
  1. A text field stored as text_content <\/strong><\/li>
  2. A color field stored as color<\/strong><\/li><\/ol>\n\n\n\n
    As an example, we’ll take both of those fields and output them in a basic paragraph:<\/p>\n\n\n
    \n<?php \n\n\/\/ Exit if accessed directly\nif ( ! defined( 'ABSPATH' ) ) {\n\texit;\n}\n\nextract(shortcode_atts(array(\n  "color" => "#000", \n  'text_content' => '' \n), $atts));\n\necho '<p style="color: '.$color.';">'.$text_content.'<\/p>';\n<\/pre><\/div>\n\n\n
    In conclusion<\/h3>\n\n\n\n
    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<\/strong><\/p>\n\n\n\n
    <\/div>\n","protected":false},"excerpt":{"rendered":"
    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…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/10587"}],"collection":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/comments?post=10587"}],"version-history":[{"count":4,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/10587\/revisions"}],"predecessor-version":[{"id":10595,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/10587\/revisions\/10595"}],"wp:attachment":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/media?parent=10587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}