How to add custom shortcodes to the visual composer using theme functions.php

Add the custom shortcodes in theme’s file ( functions.php) for visual composer.

WordPress getting one of the user friendly CMS with admin controls which allows the users to make changes to their site. WordPress functions to make this acquaintance even better.

Using vc_map() function you can easily create custom shortcodes. vc_map() function should be called with an array of special attributes describing your shortcode.

vc_map functions accept an array with arguments defining:
1. name – Name of your shortcode for human reading inside element list.
2. base – Shortcode tag. It is more like an unique id of the component.
3. category – Category which best suites to describe functionality of this shortcode, you can use the defaults like Content, widgets, or can add your custom category.
4. params – List of shortcode attributes. Array which holds your shortcode params, these params will be editable in shortcode settings page.

Example:

<?php
if(!function_exists('title_component_example')) {
function title_component_example() {
	if(function_exists('vc_map'))
	{
	    // Title
	    vc_map(
		array(
		    'name' =&gt; __( 'Example shortcode ' ),
		    'base' =&gt; 'example_shortcode',
		    'category' =&gt; __( 'Example Shortcodes' ),
		    'params' =&gt; array(
			array(
			    'type' =&gt; 'textfield', /* textfield, textarea_html, 
textarea, dropdown, attach_image, attach_images, posttypes, 
colorpicker, exploded_textarea ,textarea_raw_html ,
widgetised_sidebars, vc_link, checkbox, loop, css*/
			    'holder' =&gt; 'div',
			    'class' =&gt; '',
			    'heading' =&gt; __( 'Example shortcode' ),
			    'param_name' =&gt; 'title',
			    'value' =&gt; __( 'This is the custom shortcode.' ),
			    'description' =&gt; __( 'Example shortcode description.' ),
			),
		    )
		)
	    );
		}
	}
}
add_action( 'vc_before_init', 'title_component_example' );

/* Function for displaying Title functionality */

function title_example_function( $atts, $content ) {
    $atts = shortcode_atts(
    array(
        'title' =&gt; __( 'This is the custom shortcode.' ),
    ), $atts, 'example_shortcode'
);
 
$html = '


&lt;div&gt;'. $atts['title'] . '&lt;/div&gt;



';
return $html;
}
add_shortcode( 'example_shortcode', 'title_example_function' );
?>

How to add custom shortcodes to the visual composer
How to add custom shortcodes

Leave a Reply