How to extend visual composer with custom post as element - wordpress

Question

I installed visual composer in my wordpress website. I need to add an custom post type as an element in visual composer and need to map the template file to the created custom post type element in visual composer.
<?php
add_action( 'vc_before_init', 'vc_extend_func' );
function vc_extend_func() {
vc_map( array(
"name" => __( "Testing", "my-text-domain" ),
"base" => "test",
"class" => "",
"category" => __( "Content", "my-text-domain"),
) );
}
?>
This piece of code created the element in visual composer. My question is how to map a template to this element.
<?php
$dir = get_stylesheet_directory() . '/vc_templates';
vc_set_shortcodes_templates_dir( $dir );
?>
I also overwrite the default shortcode template path. But I didn't get the desired result. Kindly, provide solution to map the template for the created to post type.
Thanks in Advance.

Answer 1

I've done exactly this for my theme. I've created a "portfolio" custom post and then added it into Visual Composer as element. It also have some options and it can display the posts based on "category". Below is the full working code.
Step 1 - create a php file and paste this code:
add_action( 'vc_before_init', 'agr_portfolio_integrateWithVC' );
function agr_portfolio_integrateWithVC() {
$taxonomy = 'portfolio_categories';
$categories_array = array();
$categories = get_terms( array(
'taxonomy' => $taxonomy,
'hide_empty' => false,
) );
$categories_array[] = 'All';
foreach( $categories as $category ){
$categories_array[] = $category->name;
}
vc_map(array(
"name" => __("Portfolio", THEME_TEXT_DOMAIN) ,
"base" => "agr_portfolio",
"category" => __( "Adina Addons", THEME_TEXT_DOMAIN),
'icon' => get_template_directory_uri().'/visual_composer/agr-portfolio/agr-portfolio.png',
'description' => __('Displays Portfolio items with many styles & options.', THEME_TEXT_DOMAIN) ,
"params" => array(
array(
"type" => "dropdown",
"heading" => __("Style", THEME_TEXT_DOMAIN) ,
"param_name" => "agr_portfolio_style",
"value" => array(
"Modern" => "modern",
"Classic" => "classic",
"Newspaper" => "newspaper",
"Masonry" => "masonry"
) ,
"description" => __("Select Portfolio loop style to use.", THEME_TEXT_DOMAIN)
) ,
array(
"type" => "dropdown",
"heading" => __("Category", THEME_TEXT_DOMAIN) ,
"param_name" => "agr_portfolio_category",
"value" => $categories_array ,
"description" => __("Select Portfolio category to display.", THEME_TEXT_DOMAIN)
) ,
array(
"type" => "dropdown",
"heading" => __("Image Size", THEME_TEXT_DOMAIN) ,
"param_name" => "agr_portfolio_image_size",
"value" => array(
"Cover" => "cover",
"Contain" => "contain"
) ,
"description" => __("Select Portfolio image style.", THEME_TEXT_DOMAIN)
) ,
array(
"type" => "dropdown",
"heading" => __("How many columns", THEME_TEXT_DOMAIN) ,
"param_name" => "agr_portfolio_nr_columns",
"value" => array(
"Default" => "col-md-6 col-xs-12",
"1 column" => "col-md-12 col-xs-12",
"2 columns" => "col-md-6 col-xs-12",
"3 columns" => "col-md-4 col-xs-12",
"4 columns " => "col-md-3 col-xs-12",
"6 columns " => "col-md-2 col-xs-12"
) ,
"description" => __("Select Portfolio image style.", THEME_TEXT_DOMAIN)
) ,
array(
'type' => 'textfield',
'heading' => __( 'How many posts', THEME_TEXT_DOMAIN ),
'param_name' => 'agr_portfolio_nr_posts',
'value' => '10',
'admin_label' => true,
'description' => __( 'Enter the number of posts to be displayed.', THEME_TEXT_DOMAIN ),
),
array(
"type" => "dropdown",
"heading" => __("Order", THEME_TEXT_DOMAIN) ,
"param_name" => "agr_portfolio_order",
"value" => array(
"DESC (descending order)" => "DESC",
"ASC (ascending order)" => "ASC"
) ,
"description" => __("Portfolio items will be displayed in DESC or ASC order", THEME_TEXT_DOMAIN)
) ,
array(
"type" => "dropdown",
"heading" => __("Order By", THEME_TEXT_DOMAIN) ,
"param_name" => "agr_portfolio_order_by",
"value" => array(
"Date" => "date",
"Title name" => "title"
) ,
"description" => __("Sort Portfolio items by selected parameter.", THEME_TEXT_DOMAIN)
) ,
array(
"type" => "textfield",
"heading" => __("Extra class name", THEME_TEXT_DOMAIN) ,
"param_name" => "agr_portfolio_class",
"value" => "",
"description" => __("If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your Custom CSS.", THEME_TEXT_DOMAIN)
)
)
));
}
// this is a custom pagination function. Put it in the same file.
function agr_portfolio_pagination($pages = '', $range = 2) {
$showitems = ($range * 2)+1;
$paginationData = '';
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '') {
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages) {
$pages = 1;
}
}
if(1 != $pages) {
$paginationData = '<div class="pagination">';
if($paged > 2 && $paged > $range+1 && $showitems < $pages) {
$paginationData .= '«';
}
if($paged > 1 && $showitems < $pages) {
$paginationData .= '«';
}
for ($i=1; $i <= $pages; $i++) {
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
if($paged == $i){
$paginationData .= "<span class='current'>".$i."</span>";
} else {
$paginationData .= "<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
}
}
}
if ($paged < $pages && $showitems < $pages) {
$paginationData .= "<a href='".get_pagenum_link($paged + 1)."'>›</a>";
}
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) {
$paginationData .= "<a href='".get_pagenum_link($pages)."'>»</a>";
}
$paginationData .= '</div>';
}
return $paginationData;
}
// The next function will display the portfolio element into the page. Again, paste it in the same file.
function agr_portfolio_func( $atts) {
extract(shortcode_atts(array(
'agr_portfolio_style' => 'modern',
'agr_portfolio_category' => '',
'agr_portfolio_image_size' => 'cover',
'agr_portfolio_nr_columns' => 'col-md-6 col-xs-12',
'agr_portfolio_nr_posts' => '12',
'agr_portfolio_order' => 'DESC',
'agr_portfolio_order_by' => 'date',
'agr_portfolio_class' => '',
), $atts));
if (get_query_var('paged')) {
$paged = get_query_var('paged');
} elseif (get_query_var('page')) {
$paged = get_query_var('page');
} else {
$paged = 1;
}
$type = 'portfolio-posts';
$post_per_page = $agr_portfolio_nr_posts;
if ($agr_portfolio_category == '') {
$args = array(
'post_type' => $type,
'post_status' => 'publish',
'posts_per_page' => $post_per_page,
'order' => $agr_portfolio_order,
'orderby' => $agr_portfolio_order_by,
'paged' => $paged
);
} else {
$args = array(
'tax_query' => array(
array(
'taxonomy' => 'portfolio_categories',
'field' => 'slug',
'terms' => $agr_portfolio_category
)
),
'post_type' => $type,
'post_status' => 'publish',
'posts_per_page' => $post_per_page,
'order' => $agr_portfolio_order,
'orderby' => $agr_portfolio_order_by,
'paged' => $paged
);
}
$wp_query = null;
$wp_query = new WP_Query($args);
$dataToReturn = '<div class="portoflio-list ' . $agr_portfolio_class . '">';
if ($wp_query->have_posts()) {
$totalPages = $wp_query->max_num_pages;
while ($wp_query->have_posts()) {
$wp_query->the_post();
$title = get_post(get_post_thumbnail_id())->post_title; //The Title
$caption = get_post(get_post_thumbnail_id())->post_excerpt; //The Caption
$description = get_post(get_post_thumbnail_id())->post_content; // The Description
switch ($agr_portfolio_style) {
case "modern":
if (has_post_thumbnail()) {
$dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
$dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
$dataToReturn .= '<div class="image-container" style="background-image: url(' . get_the_post_thumbnail_url() . ');background-size: ' . $agr_portfolio_image_size . '"></div>';
$dataToReturn .= '</a>';
$dataToReturn .= '<div class="content-container">';
$dataToReturn .= '<h4 class="portfolio-title">';
$dataToReturn .= '' . get_the_title() . '';
$dataToReturn .= '</h4>';
$dataToReturn .= '</div>';
$dataToReturn .= '</div>';
} else {
$dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
$dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
$dataToReturn .= '<div class="image-container border-img"><h5 class="no-image-available text-center">No Img Available</h5></div>';
$dataToReturn .= '</a>';
$dataToReturn .= '<div class="content-container">';
$dataToReturn .= '<h4 class="portfolio-title">';
$dataToReturn .= '' . get_the_title() . '';
$dataToReturn .= '</h4>';
$dataToReturn .= '</div>';
$dataToReturn .= '</div>';
}
break;
case "classic":
$content = get_the_content();
$trimmed_content = wp_trim_words($content, 60, ' ...');
$vcElementsToRemove = array(
'[vc_row]',
'[/vc_row]',
'[vc_column]',
'[/vc_column]',
'[vc_column_text]',
'[/vc_column_text]',
'[vc_row_inner]',
'[/vc_row_inner]',
'[vc_column_inner width="1/2"]',
'[vc_column_inner width="1/3"]',
'[vc_column_inner width="1/4"]',
'[vc_column_inner width="1/6"]'
);
$trimmed_content = str_replace($vcElementsToRemove, "", $trimmed_content);
if (has_post_thumbnail()) {
$dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
$dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
$dataToReturn .= '<div class="image-container" style="background-image: url(' . get_the_post_thumbnail_url() . ');background-size: ' . $agr_portfolio_image_size . '"></div>';
$dataToReturn .= '</a>';
$dataToReturn .= '<div class="content-container">';
$dataToReturn .= '<h4 class="portfolio-title">';
$dataToReturn .= '' . get_the_title() . '';
$dataToReturn .= '</h4>';
$dataToReturn .= '<p class="mt20">' . $trimmed_content . '</p>';
$dataToReturn .= '</div>';
$dataToReturn .= '</div>';
} else {
$dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
$dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
$dataToReturn .= '<div class="image-container border-img"><h5 class="no-image-available text-center">No Img Available</h5></div>';
$dataToReturn .= '</a>';
$dataToReturn .= '<div class="content-container">';
$dataToReturn .= '<h4 class="portfolio-title">';
$dataToReturn .= '' . get_the_title() . '';
$dataToReturn .= '</h4>';
$dataToReturn .= '<p class="mt20">' . $trimmed_content . '</p>';
$dataToReturn .= '</div>';
$dataToReturn .= '</div>';
}
break;
case "newspaper":
if (has_post_thumbnail()) {
$dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
$dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
$dataToReturn .= '<div class="image-container" style="background-image: url(' . get_the_post_thumbnail_url() . ');background-size: ' . $agr_portfolio_image_size . '"></div>';
$dataToReturn .= '</a>';
$dataToReturn .= '<div class="content-container">';
$dataToReturn .= '<h4 class="portfolio-title">';
$dataToReturn .= '' . get_the_title() . '';
$dataToReturn .= '</h4>';
$dataToReturn .= '</div>';
$dataToReturn .= '</div>';
}
break;
case "masonry":
if (has_post_thumbnail()) {
$dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
$dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
$dataToReturn .= '<div class="image-container" style="background-image: url(' . get_the_post_thumbnail_url() . ');background-size: ' . $agr_portfolio_image_size . '"></div>';
$dataToReturn .= '</a>';
$dataToReturn .= '<div class="content-container">';
$dataToReturn .= '<h4 class="portfolio-title">';
$dataToReturn .= '' . get_the_title() . '';
$dataToReturn .= '</h4>';
$dataToReturn .= '</div>';
$dataToReturn .= '</div>';
}
break;
default:
if (has_post_thumbnail()) {
$dataToReturn .= '<div id="post-' . get_the_ID() . '" class="' . join(' ', get_post_class($agr_portfolio_nr_columns)) . '">';
$dataToReturn .= '<a href="' . esc_url(get_permalink()) . '" alt="' . $description . '" title="' . $title . '">';
$dataToReturn .= '<div class="image-container" style="background-image: url(' . get_the_post_thumbnail_url() . ');background-size: ' . $agr_portfolio_image_size . '"></div>';
$dataToReturn .= '</a>';
$dataToReturn .= '<div class="content-container">';
$dataToReturn .= '<h4 class="portfolio-title">';
$dataToReturn .= '' . get_the_title() . '';
$dataToReturn .= '</h4>';
$dataToReturn .= '</div>';
$dataToReturn .= '</div>';
}
}
}
$dataToReturn .= '<div class="col-md-12 col-xs-12 navigation text-center">';
$dataToReturn .= agr_portfolio_pagination($totalPages);
$dataToReturn .= '</div>';
} else {
$dataToReturn .= '<div id="post-404" class="noposts text-center">';
$dataToReturn .= '<p>' . _e('No Portfolio Item found.', THEME_TEXT_DOMAIN) . '</p>';
$dataToReturn .= '</div>';
}
wp_reset_postdata();
$dataToReturn .= '</div>';
return $dataToReturn;
}
Step 2 - Load the Php file into functions.php
include_once 'custom-portfolio.php';
// Also in functions.php I've created a function that will load multiple Visual Components elements.
function register_vc_shortcodes(){
add_shortcode( 'custom_portfolio', 'agr_portfolio_func' );
add_shortcode( 'other_element', 'other_element_func' );
add_shortcode( 'other_element2', 'other_element_func2' );
}
add_action( 'init', 'register_vc_shortcodes');
Important Info:
1. In order for this code to work, your custom post "register_post_type" should be "portfolio-posts"
2. The category name "register_taxonomy" should be "portfolio_categories"
3. You can change this with your own taxonomy.