How to Add Shortcodes in Visual Composer

Posted OnJul 7, 2015     CategoryPlugins     CommentsNo comment

In this section of the guide to the Visual Composer, we will focus on how to add a shortcode.

Starting from Visual Composer version 4.1.0 it is possible to add 3rd party shortcodes by using the Shortcode Mapper.

In order to map a shortcode, the plugin you will be referencing needs to be installed on your WordPress site

Working with the Shortcode Mapper

Step 1) Login to the WordPress Dashboard.

Step 2) From the left-hand sidebar of the Dashboard, navigate to Visual Composer -> My Shortcodes.

km-jc-short-01a

Step 3) Click the Map Shortcode button to display the Shortcode String textbox.

km-jc-short-02a

Step 4) In the textbox paste or enter your shortcode.

For this example, copy and paste the following shortcode in to this textbox:

[my_shortcode value="100" bgcolor="#8e8e8e" desc="Default values" cssanim="yes" size="50"]

km-jc-short-03a

Step 5) Click the Parse Shortcode button to display the new Shortcode details.

km-jc-short-04a

Don’t be concerned about entering different values while parsing as you will be able to modify all parameters and values later on.

Changing Shortcode Values

Once you have parsed your shortcode, you can edit parameters and values as needed.

The General Information area contains:

  • The Tag field. This is the name of the shortcode.
  • The Category field. This indicates where your shortcode will be displayed in the element menu.
    The default value is My Shortcodes.
  • The Description field.

km-jc-short-05a

If your shortcode contains a content part, you will need to activate it by placing a checkmark in the Include content param into shortcode checkbox. This will trigger content param auto-add into the list of parameters.

In the Shortcode Parameters area you can control all parameters of your shortcode – add, edit, re-arrange or delete if you do not want your customers to use some of the parameters.

For this example, the first parameter was edited.

km-jc-short-07a

A Hidden field type means that this shortcode parameter will not be displayed in the Element Parameters Window and will use the Default value.

Step 6) Click the Save Changes button to save any changes.

Step 7) Navigate to the page where you want the Shortcode to appear and add.

If you are a PHP Developer and want to view the advanced documentation, click here. This documentation shows you how to the modify vc_map() array.

Checkpoint

Prior to moving forward, we recommend that you view your review the shortcode added above and make any modifications as needed.


This concludes our guide of the Visual Composer plugin.

 


Leave a Reply

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

Send this to friend