{"id":143,"date":"2020-05-03T07:26:12","date_gmt":"2020-05-03T07:26:12","guid":{"rendered":"https:\/\/codexcoach.com\/?p=76"},"modified":"2024-04-13T19:55:48","modified_gmt":"2024-04-13T14:25:48","slug":"create-repeater-elements-using-visual-composer-api","status":"publish","type":"post","link":"https:\/\/codexcoach.com\/create-repeater-elements-using-visual-composer-api\/","title":{"rendered":"How to Create Repeater Elements Using Visual Composer API"},"content":{"rendered":"\n<p>Learn how to create repeater fields for custom element of Visual Composer &amp; WP Bakery. To achieve this, we need to write 2 functions. First one for create new element, Second one for add shortcode.<\/p>\n\n\n\n<p>function will be hooked to these specific action:<\/p>\n\n\n\n<ul>\n<li>vc_before_init<\/li>\n<\/ul>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-php\" data-file=\"function.php\" data-lang=\"PHP\"><code>&lt;?php\nadd_action( &#39;vc_before_init&#39;, &#39;cxc_box_repeater_items_funct&#39; );\nfunction cxc_box_repeater_items_funct() {\n\tvc_map(\n\t\tarray(\n                &quot;name&quot; =&gt; __(&quot;Box Repeater&quot;, &quot;my-text-domain&quot;), \/\/ Element name\n                  &quot;base&quot; =&gt; &quot;box_repeater&quot;, \/\/ Element shortcode\n                  &quot;class&quot; =&gt; &quot;box-repeater&quot;,\n                  &quot;category&quot; =&gt; __(&#39;Content&#39;, &#39;my-text-domain&#39;),\n                  &#39;params&#39; =&gt; array(\n                  \tarray(\n                  \t\t&quot;type&quot; =&gt; &quot;textfield&quot;,\n                  \t\t&quot;holder&quot; =&gt; &quot;div&quot;,\n                  \t\t&quot;class&quot; =&gt; &quot;&quot;,\n                  \t\t&quot;admin_label&quot; =&gt; true,\n                  \t\t&quot;heading&quot; =&gt; __(&quot;Headig&quot;, &quot;my-text-domain&quot;),\n                  \t\t&quot;param_name&quot; =&gt; &quot;box_repeater_heading&quot;,\n                  \t\t&quot;value&quot; =&gt; __(&quot;&quot;, &quot;my-text-domain&quot;),\n                  \t\t&quot;description&quot; =&gt; __(&#39;Add heading here&#39;, &quot;my-text-domain&quot;)\n                  \t),\n                  \tarray(\n                  \t\t&#39;type&#39; =&gt; &#39;param_group&#39;,\n                  \t\t&#39;param_name&#39; =&gt; &#39;box_repeater_items&#39;,\n                  \t\t&#39;params&#39; =&gt; array(\n                  \t\t\tarray(\n                  \t\t\t\t&quot;type&quot; =&gt; &quot;attach_image&quot;,\n                  \t\t\t\t&quot;holder&quot; =&gt; &quot;img&quot;,\n                  \t\t\t\t&quot;class&quot; =&gt; &quot;&quot;,\n                  \t\t\t\t&quot;heading&quot; =&gt; __( &quot;Image&quot;, &quot;my-text-domain&quot; ),\n                  \t\t\t\t&quot;param_name&quot; =&gt; &quot;box_repeater_items_img&quot;,\n                  \t\t\t\t&quot;value&quot; =&gt; __( &quot;&quot;, &quot;my-text-domain&quot; ),\n                  \t\t\t),\n                  \t\t\tarray(\n                  \t\t\t\t&quot;type&quot; =&gt; &quot;textarea&quot;,\n                  \t\t\t\t&quot;holder&quot; =&gt; &quot;div&quot;,\n                  \t\t\t\t&quot;class&quot; =&gt; &quot;&quot;,\n                  \t\t\t\t&quot;admin_label&quot; =&gt; true,\n                  \t\t\t\t&quot;heading&quot; =&gt; __(&quot;Title&quot;, &quot;my-text-domain&quot;),\n                  \t\t\t\t&quot;param_name&quot; =&gt; &quot;box_repeater_items_title&quot;,\n                  \t\t\t\t&quot;value&quot; =&gt; __(&quot;&quot;, &quot;my-text-domain&quot;),\n                  \t\t\t),\n                  \t\t\tarray(\n                  \t\t\t\t&quot;type&quot; =&gt; &quot;textarea&quot;,                            \n                  \t\t\t\t&quot;class&quot; =&gt; &quot;&quot;,\n                  \t\t\t\t&quot;admin_label&quot; =&gt; true,\n                  \t\t\t\t&quot;heading&quot; =&gt; __(&quot;Description&quot;, &quot;my-text-domain&quot;),\n                  \t\t\t\t&quot;param_name&quot; =&gt; &quot;box_repeater_items_description&quot;,\n                  \t\t\t\t&quot;value&quot; =&gt; __(&quot;&quot;, &quot;my-text-domain&quot;),\n                  \t\t\t),\n                  \t\t)\n                  \t),                    \n                  )\n              )\n\t);\n}\n?&gt;<\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Displaying Fields Values on the Frontend with shortcode.<\/h2>\n\n\n\n<p>Visual Composer &amp; WP Bakery are based on shortcode. So we have to create shortcode with <strong>base<\/strong> value. On above code <strong>base<\/strong> value is <code>box_repeater<\/code> so shortcode will like below. You need to add the following function to functions.php file.<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-php\" data-file=\"function.php\" data-lang=\"PHP\"><code>&lt;?php\nadd_shortcode( &#39;box_repeater&#39;, &#39;cxc_box_repeater_funct&#39; );\n\nfunction cxc_box_repeater_funct( $atts ) {\n\tob_start();\n\n\t$atts = shortcode_atts(\n\t\tarray(\n\t\t\t&#39;box_repeater_heading&#39; =&gt; &#39;&#39;,\n\t\t\t&#39;box_repeater_items&#39;   =&gt; &#39;&#39;,\n\t\t),\n\t\t$atts, &#39;box_repeater&#39;\n\t);\n\n\t$heading = isset( $atts[&#39;box_repeater_heading&#39;] ) ? $atts[&#39;box_repeater_heading&#39;] : &#39;&#39;;  \n\t$cxc_items = isset( $atts[&#39;box_repeater_items&#39;] ) ? $atts[&#39;box_repeater_items&#39;] : &#39;&#39;;  \n\t$items = vc_param_group_parse_atts( $cxc_items );\n\n\t?&gt;\n\t&lt;div class=&quot;box-repeater&quot;&gt;\n\n\t\t&lt;?php echo (!empty($heading))? &#39;&lt;h2&gt;&#39;.$heading.&#39;&lt;h2&gt;&#39;: &#39;&#39;; ?&gt;\n\n\t\t&lt;?php if( $items ) { ?&gt;\n\t\t\t&lt;div class=&quot;box-repeater-items&quot;&gt;\n\t\t\t\t&lt;?php foreach( $items as  $item ) { ?&gt;\n\t\t\t\t\t&lt;div class=&quot;item-box&quot;&gt;\n\t\t\t\t\t\t&lt;?php\n\t\t\t\t\t\tif( $item[&#39;box_repeater_items_img&#39;] ) {\n\t\t\t\t\t\t\techo wp_get_attachment_image($item[&#39;box_repeater_items_img&#39;], &#39;full&#39;);\n\t\t\t\t\t\t}\n\t\t\t\t\t\t?&gt;\n\t\t\t\t\t\t&lt;div class=&quot;info-box&quot;&gt;\n\t\t\t\t\t\t\t&lt;h2&gt;\n\t\t\t\t\t\t\t\t&lt;?php \n\t\t\t\t\t\t\t\tif( $item[&#39;box_repeater_items_title&#39;] ) {\n\t\t\t\t\t\t\t\t\techo $item[&#39;box_repeater_items_title&#39;]; \n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t?&gt;\n\t\t\t\t\t\t\t&lt;\/h2&gt;\n\t\t\t\t\t\t\t&lt;p&gt;\n\t\t\t\t\t\t\t\t&lt;?php\n\t\t\t\t\t\t\t\tif( $item[&#39;box_repeater_items_description&#39;] ) {\n\t\t\t\t\t\t\t\t\techo $item[&#39;box_repeater_items_description&#39;]; \n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t?&gt;\n\t\t\t\t\t\t\t&lt;\/p&gt;\n\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;?php } ?&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;?php } ?&gt;\n\n\t&lt;\/div&gt;\n\t&lt;?php\n\t$result = ob_get_clean();\n\treturn $result;\n}\n?&gt;<\/code><\/pre><\/div>\n<div id=\"ezoic-pub-ad-placeholder-118\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Learn how to create repeater fields for custom element of Visual Composer &amp; WP Bakery. To achieve this, we need to write 2 functions. First one for create new element, Second one for add shortcode. function will be hooked to these specific action: Displaying Fields Values on the Frontend with shortcode. Visual Composer &amp; WP [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":2512,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_aib_schema_json_ld":""},"categories":[10,11],"tags":[],"_links":{"self":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/143"}],"collection":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":3,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/143\/revisions"}],"predecessor-version":[{"id":13212,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/143\/revisions\/13212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media\/2512"}],"wp:attachment":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media?parent=143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/categories?post=143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/tags?post=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}