How To Make A New Element for Visual Composer

What is Visual Composer

Visual Composer for WordPress lets you and your clients build complex layouts without having to write code or complex shortcodes. Visual Composer gives you a drag and drop environment for all your design elements which helps you quickly build pages.

Visual Composer not only lets you use the in-built elements but also allows you to use third party plugins or better yet make your own ones. I am going to show you how to create new custom elements for Visual Composer which you can use inside your themes for your clients or yourself.

Like most page builders, Visual Composer also builds shortcodes for each elements, which are shown by the Visual Composer as a layout elements instead of complex shortcode structures in the WordPress dashboard. This is how a typical Visual Composer layout looks like in the backend:

1

Each block represents a row, which contains one or more elements. Most elements let you customize them on the time of their creation and you can edit them later. I will show you in this tutorial how to make a new Visual Composer element, add fields to that element, set an icon for that element, categorize it and make an output html based on those customizations.

Lets Get Started

We need to tell Visual Composer about the new element we are creating, we need a unique shortcode (required), a title (required), a description (optional), an icon (optional), category (optional) and the fields required for you or your clients to configure the element (also optional). Here is the how you do it:

Let me explain the above code each line at a time. The vc_map( $args ); function defines a new element for Visual Composer and takes one argument, an array. This array contains all the information about the new element you need to make. More info on vc_map and its argument array here.

  • name is the name you assign to this element.
  • description is more description about the element. This parameter is optional.
  • “base” is the unique shortcode name for this element, a better prefix than “my”, mostly its your plugin or theme name, for example: “awesometheme_alertbox”
  • icon is the url to the icon you need to set for this element in the backend. Again, it doesnt do anything for the front-end.
  • category will set this element in a separate section with this category name, if there is no category with this name, Visual Composer will make a new one for you. You can use your plugin or theme name to categorize your elements differently from the in-built elements.
  • admin_enqueue_js is the url to the javascript you want to load in the backend when this element is present. It has nothing to do in the front-end.
  • admin_enqueue_css is the url to the css file you want to load in the backend when this element is present. It has nothing to do in the front-end.
  • params is an array of all the fields you need to let your clients able to customize the shortcode, like title, details, background image, some links.

Most fields in the params require a type, heading, a unique param_name, its default value and admin_label which lets you choose if that field is visible in the backend layout.

Now we register the shortcode with WordPress, here is how we do it:

add_shortcode takes 2 parameters, first is the shortcode name, make sure you use the shortcode name you defined in the vc_map’s base parameter. The second argument is the function that will handle the shortcode’s output.

Shortcode Output

We make a function to handle the output html for the shortcode, this functions has the same name which you defined in the second parameter of the add_shortcode function. Here is an example of this function:

This function takes two parameters, first is the array of parameters passed with the shortcode, the second is the content inside the shortcode tags. shortcode_atts takes the shortcode argument and assigns them a default value if they are not set, extract convert them into variables for you to use. This is how we bring all the fields values set in the element to the front-end and use them however we want.