

When working in the text editor, you can also replace squared brackets by their codes. If you want to display a shortcode with start and end tags, use only the first and the last double bracket: New York, USA] To display the text of a shortcode, use double brackets: ]

Thank you, shortcodes! Start and end tags
Wordpress visual composer iconbox new window shortcode code#
Now imagine what would the entire thing look like if you were about to manually add the PHP code which would have tens if not hundreds of lines. And you get all that with a simple shortcode. In this case, the size would be automatically changed to medium. The gallery from this example would show only images with specified ID numbers. Gallery shortcode lets you specify images by their ID so you can show just the specific pictures or even include images that aren’t part of that particular post.Īlso, it is possible to define a size of the gallery, and many other things by providing additional parameters. For example, while the trivial shortcode displays all images that are attached to the post, it is possible to change that. By adding extra information to them, you can customize and change the output. More often than not, shortcodes can have additional parameters. "description" => _( "Description for foo param.Shortcodes get replaced by the actual content as soon as you publish or preview a post or page. "/vc_extend/my_shortcode_icon.png", // Simply pass url to your icon here

Please see example below: _( "Bar tag test", "my-text-domain" ), "description" => _( "Description for foo param.", "my-text-domain" ),Īnother way of adding an icon to your content element, doesn’t require a CSS file with CSS rules from you, and instead, you can simply pass url to your icon image and it will be added automatically to the “Add element” window and schematic backend interface. "value" => _( "Default param value", "my-text-domain" ), 'admin_enqueue_css' => array( get_template_directory_uri(). "icon" => "my_bartag", // New param added In order to make 3) css snippet to work properly you should add “icon” param to the vc_map() function call and pass “my_bartag” as a value. vc_element-icon /vc_extend/my_shortcode_icon.png) Note: path to the icon file should be relative to the css file where you place your css rules (this file) *Ĭhange icon in the "Add element" content elements list Now open css file that you defined in “admin_enqueue_css” param in vc_map() function call, and add CSS rule for your content element.

Save this icon somewhere in your theme’s folder. Now you may want your element to have a fancy custom icon (Note: Icon file format should be png or gif with transparent background). Creating your own icon with CSSįor example, you have created a new custom content element and with help of vc_map() function added it to the WPBakery Page Builder editor. Or another option is to simply provide URL of your icon. “icon” param should store CSS class name, which will be later used in your css file as a CSS selector (for targeting). Define “icon” param in the vc_map() function call (“mapping”). Another option is to assign class name for your item and then in your own css file add required css rules to style your element. To add your icon you can simply pass icon url in “icon” attribute when you call vc_map() function. WPBakery Page Builder content element’s icon is visible in the available content elements list and is shown when the user clicks “Add element” button in the WPBakery Page Builder interface.
