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 action. Add below code in theme’s function.php file.
<?php
add_action( 'vc_before_init', 'cxc_create_loop_element_in_vc' );
function cxc_create_loop_element_in_vc() {
vc_map(
array(
"name" => __("My Loop Element", "my-text-domain"), // Element name
"base" => "cxc_my_loop_element", // Element shortcode
"class" => "loop-element",
"category" => __('Content', 'my-text-domain'),
"params" => array(
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __("Title", "my-text-domain"),
"param_name" => "cxc_my_loop_element_title",
"value" => __("", "my-text-domain"),
"description" => __('Add a Main section\'s title.".', "my-text-domain")
),
array(
"type" => "loop",
"holder" => "div",
"class" => "",
"heading" => __("Query", "my-text-domain"),
"param_name" => "cxc_my_loop_element_query",
"value" => __("", "my-text-domain")
),
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __("Extra class name", "my-text-domain"),
"param_name" => "cxc_my_loop_element_extra_class",
"value" => __("", "my-text-domain"),
"description" => __('Style particular content element differently - add a class name and refer to it in custom CSS.".', "my-text-domain")
),
)
)
);
}
?>Now we should create shortcode for base cxc_my_loop_element. So we will create shortcode for cxc_my_loop_element. It will look like below.
<?php
add_shortcode( 'cxc_my_loop_element', 'cxc_my_loop_element_func' );
function cxc_my_loop_element_func( $query_loop ) {
ob_start();
$query_loop = shortcode_atts(
array(
'cxc_my_loop_element_title' => '',
'cxc_my_loop_element_query' => '',
'cxc_my_loop_element_extra_class' => '',
),
$query_loop, 'cxc_my_loop_element'
);
$title = isset( $query_loop['cxc_my_loop_element_title'] ) ? $query_loop['cxc_my_loop_element_title'] : '';
$class = isset( $query_loop['cxc_my_loop_element_extra_class'] ) ? $query_loop['cxc_my_loop_element_extra_class'] : '';
$query = isset( $query_loop['cxc_my_loop_element_query'] ) ? $query_loop['cxc_my_loop_element_query'] : '';
$query = explode('|', $query);
if( $query ){
foreach( $query as $query_part ) {
$q_part = explode(':', $query_part);
switch( $q_part[0] ) {
case 'post_type':
$query_post_type = explode(',', $q_part[1]);
break;
case 'size':
$query_posts_per_page = ($q_part[1] == 'All' ? -1 : $q_part[1]);
break;
case 'order_by':
$query_meta_key = '';
$query_orderby = '';
$public_orders_array = array('ID', 'date', 'author', 'title', 'modified', 'rand', 'comment_count', 'menu_order');
if( in_array( $q_part[1], $public_orders_array ) ) {
$query_orderby = $q_part[1];
} else {
$query_meta_key = $q_part[1];
$query_orderby = 'meta_value_num';
}
break;
case 'order':
$query_order = $q_part[1];
break;
case 'by_id':
$query_by_id = explode(',', $q_part[1]);
$query_by_id_not_in = array();
$query_by_id_in = array();
if( $query_by_id ){
foreach( $query_by_id as $ids ) {
if ( $ids < 0 ) {
$query_by_id_not_in[] = $ids;
} else {
$query_by_id_in[] = $ids;
}
}
}
break;
case 'categories':
$query_categories = explode(',', $q_part[1]);
$query_cat_not_in = array();
$query_cat_in = array();
if( $query_categories ){
foreach( $query_categories as $cat ) {
if ( $cat < 0 ) {
$query_cat_not_in[] = $cat;
} else {
$query_cat_in[] = $cat;
}
}
}
break;
case 'tags':
$query_tags = explode(',', $q_part[1]);
$query_tags_not_in = array();
$query_tags_in = array();
if( $query_tags ){
foreach( $query_tags as $tags ) {
if ($tags < 0) {
$query_tags_not_in[] = $tags;
} else {
$query_tags_in[] = $tags;
}
}
}
break;
case 'authors':
$query_author = explode(',', $q_part[1]);
$query_author_not_in = array();
$query_author_in = array();
if( $query_author ){
foreach( $query_author as $author ) {
if ( $tags < 0 ) {
$query_author_not_in[] = $author;
} else {
$query_author_in[] = $author;
}
}
}
break;
case 'tax_query':
$all_tax = get_object_taxonomies($query_post_type);
$tax_query = array();
$query_tax_query = array('relation' => 'AND');
if( $all_tax ){
foreach( $all_tax as $tax ) {
$values = $tax;
$query_taxs_in = array();
$query_taxs_not_in = array();
$query_taxs = explode(',', $q_part[1]);
if( $query_taxs ){
foreach( $query_taxs as $taxs ) {
if ( term_exists( absint( $taxs ), $tax ) ) {
if ($taxs < 0) {
$query_taxs_not_in[] = absint($taxs);
} else {
$query_taxs_in[] = $taxs;
}
}
}
}
if ( count( $query_taxs_not_in ) > 0 ) {
$query_tax_query[] = array(
'taxonomy' => $tax,
'field' => 'id',
'terms' => $query_taxs_not_in,
'operator' => 'NOT IN',
);
} else if( count( $query_taxs_in ) > 0 ) {
$query_tax_query[] = array(
'taxonomy' => $tax,
'field' => 'id',
'terms' => $query_taxs_in,
'operator' => 'IN',
);
}
}
}
break;
}
}
}
$query_final = array(
'post_type' => $query_post_type,
'post_status' => 'publish',
'posts_per_page' => $query_posts_per_page,
'orderby' => $query_orderby,
'order' => $query_order,
'paged' => $paged,
'post__in' => $query_by_id_in,
'post__not_in' => $query_by_id_not_in,
'category__in' => $query_cat_in,
'category__not_in' => $query_cat_not_in,
'tag__in' => $query_tags_in,
'tag__not_in' => $query_tags_not_in,
'author__in' => $query_author_in,
'author__not_in' => $query_author_not_in,
'tax_query' => $query_tax_query
);
$my_query = new WP_Query( $query_final );
if( $my_query->have_posts() ) {
?>
<div class="main_title <?php echo $class; ?>">
<h2><?php echo $title; ?></h2>
<?php
while ($my_query->have_posts()) : $my_query->the_post();
?>
<!-- add your code here. -->
<?php
endwhile;
}
?>
</div>
<?php
wp_reset_query();
$result = ob_get_clean();
return $result;
}
?>-
CodexCoach is a skilled tech educator known for easy-to-follow tutorials in coding, digital design, and software development. With practical tips and interactive examples, CodexCoach helps people learn new tech skills and advance their careers.
I was recommended this blog by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my difficulty.
You’re wonderful! Thanks!
Thanks for finally talking about How To Create a Loop Element Using Visual Composer API.