How to Add Shortcodes in Visual Composer
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.
Step 3) Click the Map Shortcode button to display the Shortcode String textbox.
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"]
Step 5) Click the Parse Shortcode button to display the new Shortcode details.
|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.
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.
|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.|
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.