{"id":138,"date":"2020-04-30T11:06:12","date_gmt":"2020-04-30T11:06:12","guid":{"rendered":"https:\/\/codexcoach.com\/?p=42"},"modified":"2023-10-19T05:54:39","modified_gmt":"2023-10-19T05:54:39","slug":"how-to-create-loop-element-using-visual-composer-api","status":"publish","type":"post","link":"https:\/\/codexcoach.com\/how-to-create-loop-element-using-visual-composer-api\/","title":{"rendered":"How to Create Loop Element Using Visual Composer API"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

When we are making site with visual composer some time not possible to built some designs using visual composer elements. So at that time we need to use HTML element for built designs. But visual composer API provide facility to built own custom element for some special requirements and its very easy. We can built custom element using vc_before_init<\/strong> action. Add below code in theme\u2019s function.php<\/strong> file.<\/p>\n\n\n\n

<?php\nadd_action( 'vc_before_init', 'cxc_create_loop_element_in_vc' );\n\nfunction cxc_create_loop_element_in_vc() {\n\tvc_map(\n\t\tarray(\n\t\t\t"name" => __("My Loop Element", "my-text-domain"), \/\/ Element name\n\t\t\t"base" => "cxc_my_loop_element", \/\/ Element shortcode\n\t\t\t"class" => "loop-element",\n\t\t\t"category" => __('Content', 'my-text-domain'),\n\t\t\t"params" => array(\n\t\t\t\tarray(\n\t\t\t\t\t"type" => "textfield",\n\t\t\t\t\t"holder" => "div",\n\t\t\t\t\t"class" => "",\n\t\t\t\t\t"heading" => __("Title", "my-text-domain"),\n\t\t\t\t\t"param_name" => "cxc_my_loop_element_title",\n\t\t\t\t\t"value" => __("", "my-text-domain"),\n\t\t\t\t\t"description" => __('Add a Main section\\'s title.".', "my-text-domain")\n\t\t\t\t),\n\t\t\t\tarray(\n\t\t\t\t\t"type" => "loop",\n\t\t\t\t\t"holder" => "div",\n\t\t\t\t\t"class" => "",\n\t\t\t\t\t"heading" => __("Query", "my-text-domain"),\n\t\t\t\t\t"param_name" => "cxc_my_loop_element_query",\n\t\t\t\t\t"value" => __("", "my-text-domain")\n\t\t\t\t),\n\t\t\t\tarray(\n\t\t\t\t\t"type" => "textfield",\n\t\t\t\t\t"holder" => "div",\n\t\t\t\t\t"class" => "",\n\t\t\t\t\t"heading" => __("Extra class name", "my-text-domain"),\n\t\t\t\t\t"param_name" => "cxc_my_loop_element_extra_class",\n\t\t\t\t\t"value" => __("", "my-text-domain"),\n\t\t\t\t\t"description" => __('Style particular content element differently - add a class name and refer to it in custom CSS.".', "my-text-domain")\n\t\t\t\t),\n\t\t\t)\n\t\t)\n\t);\n}\n?><\/code><\/pre><\/div>\n\n\n\n
Now we should create shortcode for base cxc_my_loop_element<\/strong>. So we will create shortcode for cxc_my_loop_element<\/strong>. It will look like below.<\/p>\n\n\n\n
<?php\nadd_shortcode( 'cxc_my_loop_element', 'cxc_my_loop_element_func' );\n\nfunction cxc_my_loop_element_func( $query_loop ) {\n\tob_start();\n\t\n\t$query_loop = shortcode_atts(\n\t\tarray(\n\t\t\t'cxc_my_loop_element_title' => '',\n\t\t\t'cxc_my_loop_element_query' => '',\n\t\t\t'cxc_my_loop_element_extra_class' => '',\n\t\t),\n\t\t$query_loop, 'cxc_my_loop_element'\n\t);\n\n\t$title = isset( $query_loop['cxc_my_loop_element_title'] ) ? $query_loop['cxc_my_loop_element_title'] : '';\n\t$class = isset( $query_loop['cxc_my_loop_element_extra_class'] ) ? $query_loop['cxc_my_loop_element_extra_class'] : '';\n\t$query = isset( $query_loop['cxc_my_loop_element_query'] ) ? $query_loop['cxc_my_loop_element_query'] : '';\n\n\t$query = explode('|', $query);\n\n\tif( $query ){\n\t\tforeach( $query as $query_part ) {\n\t\t\t$q_part = explode(':', $query_part);\n\t\t\tswitch( $q_part[0] ) {\n\n\t\t\t\tcase 'post_type':\n\t\t\t\t$query_post_type = explode(',', $q_part[1]);\n\t\t\t\tbreak;\n\n\t\t\t\tcase 'size':\n\t\t\t\t$query_posts_per_page = ($q_part[1] == 'All' ? -1 : $q_part[1]);\n\t\t\t\tbreak;\n\n\t\t\t\tcase 'order_by':\n\t\t\t\t$query_meta_key = '';\n\t\t\t\t$query_orderby = '';\n\n\t\t\t\t$public_orders_array = array('ID', 'date', 'author', 'title', 'modified', 'rand', 'comment_count', 'menu_order');\n\t\t\t\tif( in_array( $q_part[1], $public_orders_array ) ) {\n\t\t\t\t\t$query_orderby = $q_part[1];\n\t\t\t\t} else {\n\t\t\t\t\t$query_meta_key = $q_part[1];\n\t\t\t\t\t$query_orderby = 'meta_value_num';\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\t\tcase 'order':\n\t\t\t\t$query_order = $q_part[1];\n\t\t\t\tbreak;\n\n\t\t\t\tcase 'by_id':\n\t\t\t\t$query_by_id = explode(',', $q_part[1]);\n\t\t\t\t$query_by_id_not_in = array();\n\t\t\t\t$query_by_id_in = array();\n\t\t\t\tif( $query_by_id ){\n\t\t\t\t\tforeach( $query_by_id as $ids ) {\n\t\t\t\t\t\tif ( $ids < 0 ) {\n\t\t\t\t\t\t\t$query_by_id_not_in[] = $ids;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t$query_by_id_in[] = $ids;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\t\tcase 'categories':\n\t\t\t\t$query_categories = explode(',', $q_part[1]);\n\t\t\t\t$query_cat_not_in = array();\n\t\t\t\t$query_cat_in = array();\n\t\t\t\tif( $query_categories ){\n\t\t\t\t\tforeach( $query_categories as $cat ) {\n\t\t\t\t\t\tif ( $cat < 0 ) {\n\t\t\t\t\t\t\t$query_cat_not_in[] = $cat;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t$query_cat_in[] = $cat;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\t\tcase 'tags':\n\t\t\t\t$query_tags = explode(',', $q_part[1]);\n\t\t\t\t$query_tags_not_in = array();\n\t\t\t\t$query_tags_in = array();\n\t\t\t\tif( $query_tags ){\n\t\t\t\t\tforeach( $query_tags as $tags ) {\n\t\t\t\t\t\tif ($tags < 0) {\n\t\t\t\t\t\t\t$query_tags_not_in[] = $tags;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t$query_tags_in[] = $tags;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\t\tcase 'authors':\n\t\t\t\t$query_author = explode(',', $q_part[1]);\n\t\t\t\t$query_author_not_in = array();\n\t\t\t\t$query_author_in = array();\n\t\t\t\tif( $query_author ){   \n\t\t\t\t\tforeach( $query_author as $author ) {\n\t\t\t\t\t\tif ( $tags < 0 ) {\n\t\t\t\t\t\t\t$query_author_not_in[] = $author;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t$query_author_in[] = $author;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\t\tcase 'tax_query':\n\t\t\t\t$all_tax = get_object_taxonomies($query_post_type);\n\t\t\t\t$tax_query = array();\n\t\t\t\t$query_tax_query = array('relation' => 'AND');\n\t\t\t\tif( $all_tax ){\n\t\t\t\t\tforeach( $all_tax as $tax ) {\n\t\t\t\t\t\t$values = $tax;\n\t\t\t\t\t\t$query_taxs_in = array();\n\t\t\t\t\t\t$query_taxs_not_in = array();\n\t\t\t\t\t\t$query_taxs = explode(',', $q_part[1]);\n\t\t\t\t\t\tif( $query_taxs ){\n\t\t\t\t\t\t\tforeach( $query_taxs as $taxs ) {\n\t\t\t\t\t\t\t\tif ( term_exists( absint( $taxs ), $tax ) ) {\n\t\t\t\t\t\t\t\t\tif ($taxs < 0) {\n\t\t\t\t\t\t\t\t\t\t$query_taxs_not_in[] = absint($taxs);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t$query_taxs_in[] = $taxs;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif ( count( $query_taxs_not_in ) > 0 ) {\n\t\t\t\t\t\t\t$query_tax_query[] = array(\n\t\t\t\t\t\t\t\t'taxonomy' => $tax,\n\t\t\t\t\t\t\t\t'field' => 'id',\n\t\t\t\t\t\t\t\t'terms' => $query_taxs_not_in,\n\t\t\t\t\t\t\t\t'operator' => 'NOT IN',\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} else if( count( $query_taxs_in ) > 0 ) {\n\t\t\t\t\t\t\t$query_tax_query[] = array(\n\t\t\t\t\t\t\t\t'taxonomy' => $tax,\n\t\t\t\t\t\t\t\t'field' => 'id',\n\t\t\t\t\t\t\t\t'terms' => $query_taxs_in,\n\t\t\t\t\t\t\t\t'operator' => 'IN',\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t$query_final = array(\n\t\t'post_type' => $query_post_type,\n\t\t'post_status' => 'publish',\n\t\t'posts_per_page' => $query_posts_per_page,\n\t\t'orderby' => $query_orderby,\n\t\t'order' => $query_order,\n\t\t'paged' => $paged,\n\t\t'post__in' => $query_by_id_in,\n\t\t'post__not_in' => $query_by_id_not_in,\n\t\t'category__in' => $query_cat_in,\n\t\t'category__not_in' => $query_cat_not_in,\n\t\t'tag__in' => $query_tags_in,\n\t\t'tag__not_in' => $query_tags_not_in,\n\t\t'author__in' => $query_author_in,\n\t\t'author__not_in' => $query_author_not_in,\n\t\t'tax_query' => $query_tax_query\n\t);\n\n\t$my_query = new WP_Query( $query_final );\n\n\tif( $my_query->have_posts() ) {\n\t\t?>\n\t\t<div class="main_title <?php echo $class; ?>">\n\t\t\t<h2><?php echo $title; ?><\/h2>\n\t\t\t<?php\n\t\t\twhile ($my_query->have_posts()) : $my_query->the_post();\n\t\t\t\t?>\n\t\t\t\t<!-- add your code here.  -->\n\t\t\t\t<?php\n\t\t\tendwhile;\n\t\t}\n\t\t?>\n\t<\/div>\n\t<?php\n\twp_reset_query();\n\n\t$result = ob_get_clean();\n\treturn $result;\n}\n?><\/code><\/pre><\/div>\n
<\/div>","protected":false},"excerpt":{"rendered":"
When we are making site with visual composer some time not possible to built some designs using visual composer elements. So at that time we need to use HTML element for built designs. But visual composer API provide facility to built own custom element for some special requirements and its very easy. We can built […]<\/p>\n","protected":false},"author":1,"featured_media":2517,"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\/138"}],"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=138"}],"version-history":[{"count":8,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"predecessor-version":[{"id":13211,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/posts\/138\/revisions\/13211"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media\/2517"}],"wp:attachment":[{"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexcoach.com\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}