How to add the custom shortcode on visual composer (Completed)

Sometimes you want to implement some custom design to WordPress themes or plugins. That’s why you need to know some processes to do that. In this case, WordPress provides a shortcode process for done this job easily. Lots of WordPress developers using this process to implement their design with themes and plugins. Today, I will show you how to add the custom shortcode on visual.

What is Shortcode?

Before we learning the shortcode development into the Visual Composer we have known that what’s shortcode. Shortcode is a very important thing for designing a WordPress website. Each and every design element you can put in the shortcode. Then you can access them when you need them. All of the WordPress themes support shortcodes functionalities. Shortcode functionality is one important reason for WordPress popularity.

How add to create a shortcode?

If you want to use it without any plugin, you can do this. But it’s a very unprofessional way. Because of that, lots of WordPress users can’t use shortcodes properly without any other plugin. First of all, you have to create a design for your front-end element which you want to show using the shortcode. Then you need to use the add_shortcode function which is created by WordPress. Also, you can add some attributes if you want. To add the custom shortcode in visual composer you follow below code:

// Add Shortcode
function learnwptech_shortcode( $atts ) {
	// Attributes
	$atts = shortcode_atts(
		array(
			'attribute1' => '',
			'attribute2' => '',
			'attribute3' => '',
		),
		$atts
	);
	<div>
	    //Output goes here
	</div>
}
add_shortcode( 'learnwptech-shortcode', 'learnwptech_shortcode' );

When you will be done above work you can be used [learnwptech-shortcode] anywhere. Once you will be using this shortcode, the desired output will be shown. Also, you can be use shortcode attributes with this shortcode like HTML attributes. It’s very easy to use any content area. But problem is that many users can’t use shortcodes directly.

What is Visual Composer?

We are talking about WP Bekary Page builder which called Visual Composer. WP Backery Visual Composer is a plugin which can make WordPress website creation experience very easy. You will be able to design your pages and posts with drag and drop functonality. You can be create website pages, posts without any coding knowledge. Also, it will be provide your drag and drop facilities for your website to create page and posts.

Let’s add shortcode to Visual Composer

We have previously shown how to create a shortcode on WordPress. Now we will be add these shortcode with Visual Composer. That’s why have to use an function which is provided by Visual Composer. First of all, we have use vc_map function. It’s an function to initiate a shortcode for Visual Composer. Also you can follow below code instructions.

<?php  
  if(function_exists('vc_map')){   
      $params = array(
        "type"        => "textfield",
        "heading"     => __( "Shortcode Name", "textdomain" ),
        "param_name"  => "attribute-tag", 
        "description" => __( "Something about the shortcode", "textdomain" )
     );
      vc_map(array(
        "base"  => 'shortcode-tag',
        "description" => __( "Something about the shortcode", "textdomain" ),
        "params"      => $params,
      ));
  }
?>

If you want to include multiple attributes with the shortcode, you can use an associative array with vc_map params.

Final Talk

These is the primary discussion about the WordPress shortcode and Visual Composer shortcode. If you want to know more about WordPress shortcode and Visual Composer shortcode, you can their official website and online documentation. I hope it will be help you to grow your knowledge. But these is the actual system to add the custom shortcode in Visual Composer.

You may find out more information about these at here: Shortcode API and vc_map Documentation.