How to add custom shortcodes to the visual composer plugin?

visual composer shortcodes
visual composer shortcodes

Web Development is moving forward in a great pace and so is WordPress development. WordPress being one of the most or the most user friendly CMS with admin controls which allows the users to make changes to their site the way they want it to be. Everyday, if not million, tens of thousands of developers work on plugins, themes, WP core to make this experience even better.

Recently I worked in a project, where the client wanted to use a custom theme and wanted to drag and drop elements, in other words which means they did not want to have a traditional fix template or structure, and rather they wanted to have components/elements build which they can add to any post or page and can drag and drop to make a new template any time. Now a days this has become more a trend as clients like the control they have over the template using dragging and dropping than when its a fixed template.

Visual Composer

While looking for a plugin which would allow to drag and drop elements within a template, we came across many plugins claiming to do such a job, but we settled with the premium plugin visual composer because it has all what we needed. The most powerful thing is the plugin is built with hooks for you to customize it with your needs. You can get the plugin from here

Using the hooks you can easily create custom shortcodes using which you can create custom components which can be dragged and dropped.

This blog is about how to create a custom shortcode or element or a component which you can drag and drop in your template. I will try and build a small add on plugin which adds the custom shortcode. You can download the plugin from github.

Visual composer add on plugin

vc-add-shortcodes is the main plugin file and contains the below codes.

Here we have checked for the parent visual composer plugin before activating this add on plugin and also have included the vcas-admin.php file which contains the code include shortcodes. I would prefer to make one shortcode in one file for better management.

The above code includes all the files for shortcodes inside the shortcodes folder. This way we won’t have to go to this file and include the shortcode file each time we create a new custom file.

Alternative would be to simply add the below to include the shortcode in the vcas-admin.php file.

But like I have mentioned above the former set of codes adds the files in the shortcodes folder dynamically and we have a lesser headache to take care of.

Finally the file vcas-title.php, which contains an example of an element or component which allows to add title ( like the file name suggests).

Here we have hooked our function to the vc_before_init action hook which allows us to add our custom component to the list of visual composer default components using vc_map function. You can find the detail documentation here.

vc_map

vc_map functions accept an array with arguments defining

  • name – Name of your shortcode for human reading inside element list, here ‘name’ => __( ‘Title’ )
  • base – Shortcode tag. For [my_shortcode] shortcode base is my_shortcode, it is more like an unique id of the component, here ‘base’ => ‘vcas_title’,
  • category – Category which best suites to describe functionality of this shortcode, you can use the defaults like Content, Social or can add your custom category like, here ‘category’ => __( ‘Test Shortcodes’ ),
  • params – List of shortcode attributes. Array which holds your shortcode params, these params will be editable in shortcode settings page

This are the ones I have used for a basic component, you can look into the list in details from the documentation page.

Out of the four keys above, params is the one we can further discuss. It is an array of shortcode params which define what can be added/edited in your shortcode in the settings page.

In the above snippet I have used two such shortcode params lets discuss these in details.

Parameters of the params array

  • type – This is the attribute type, like textfield, colorpicker, textarea etc thats appear in the settings popup.
  • holder -HTML tag name where Visual Composer will store attribute value in Visual Composer edit mode. Default: hidden input
  • class – Class name that will be added to the “holder” HTML tag. Useful if you want to target some CSS rules to specific items in the backend edit interface.
  • heading – Human friendly title of your param. Will be visible in shortcode’s edit screen
  • param_name – The unique id, which should same as the parameter name to be used in the shortcode function.
  • value – Attribute’s default value.
  • description – Human friendly description of your param. Will be visible in shortcode’s edit screen.

These are the parameters I have used in the snippet, there are some more optional parameters, you can see the detailed list from the documentation.

The above parameters are responsible for the shortcode/component settings popup which now looks like this.

shortcode settings

shortcode settings

This allows you to add a text for the title and choose a color from the color picker.

The add_shortcode at the bottom of the snippet is where you define the html structure of the component. Make sure you set the parameter name and the default values. These default values appear in the front end when settings popup is saved with no values.

This image below is how the component would look like in the front end.

shortcode frontend

shortcode frontend

So this was all about an add on to create custom components/shortcodes using the visual composer plugin. Please try this and let me know if you have questions or suggestions in the comments below.

facebook-profile-picture

Maruti Mohanty

I am a happy go lucky WordPress Developer, who loves biking, movies and learning different languages

   

8 Responses

  1. Goran Markovic says:

    I try to make but i didnt get anything in visual composer? I try 10 different way but nothing.
    Can you help me ? Thanks

  2. Thanks for such a nice, step by step explanation of the process adding a set of custom shortcodes into VC. Well written 🙂

  3. Andre Ferraz says:

    Hi Maruti Mohanty.
    Thanks for this amazing tutorial. It is exactly what I am looking for.
    But I have an issue about where do I need to put these files? Do I need to change something else in some WordPress file?

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: