Informations

35169 views
Medium

Ingredients

  • WordPress v4.5+required
  • Visual Composer Plugin v4.xx+required
  • Directly related tutorialadvised
  • Basic PHP/WP knowledge

STEPS

If you’ve used Visual Composer in developing of themes probably you’ve thought at least one time to create your custom block.
Well, this tutorial will explain how to do it, but before to start I strongly suggest you read the basic tutorial to integrate Visual Composer in your themeadvised

1. Where to include your code

As I wrote in other similar tutorials, the code position is a personal choice. Most tutorials on the net recommend to place any function in the functions.php file in the theme folder. I believe instead that it’s better to create a separate file for the Visual Composer setup in which to place all features.
In this tutorial I’ll share my way to include an element on Visual Composer. I think it’s a really clean way.

So you have to create a folder in your theme’s root folder. I decided to create a vc-elements folder in my theme’s root.
Inside vc-elements folder you can create a php file that will contain your new element. I created for example my-first-custom-element.php

The file you just created is still not in WP so we’re going to require it.
If you followed the related tutorial that I reported on the heading you’ll know how to add actions to the hook vc_before_init, but let me show you the code once again.

Add the following code in function.php in your theme. It’s called BEFORE the Visual Composer initialization:
// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );

function vc_before_init_actions() {
	
	//.. Code from other Tutorials ..//

	// Require new custom Element
	require_once( get_template_directory().'/vc-elements/my-first-custom-element.php' ); 
	
}

Code explanation

  • row 02: I added an action to the vc_before_init VC hook, so my function will be called before VC init
  • row 09: I required the file we just created my-first-custom-element.php and to find its absolute path I used get_template_directory()
Now we can finally start to add code in our new file!
Note: if you want to edit or customize a Visual Composer default block please follow the tutorial How-To: customize default elements in Visual Composer advised

2. Initialize your new Element

Before to show you the element code I have to say that there are many ways to build it, I will show you my way. I commonly create a php Class to extend the WPBakeryShortCode Class so I can include all the code in the same place and it allows to do a clean work.
My Class consists of 3 parts:
  1. Shortcode Init
  2. Shortcode Map (parameters)
  3. Shortcode HTML
But now it’s time to paste the code for the Class structure:
/*
Element Description: VC Info Box
*/

// Element Class 
class vcInfoBox extends WPBakeryShortCode {
    
	// Element Init
	function __construct() {
        add_action( 'init', array( $this, 'vc_infobox_mapping' ) );
        add_shortcode( 'vc_infobox', array( $this, 'vc_infobox_html' ) );
    }
 	
	// Element Mapping
    public function vc_infobox_mapping() {
        
		//.. the Code is in the next steps ..//				  			  
	   
    } 
	
	
	// Element HTML
	public function vc_infobox_html( $atts ) {
		
		//.. the Code is in the next steps ..//
		
	} 
	
} // End Element Class

// Element Class Init
new vcInfoBox();	

Code explanation

  • row 02: I advise to put a description about the element you are developing
  • row 06: I extended the WPBakeryShortCode class with new element class vcInfoBox
  • row 09: I added a __construct() function to initialize the functions in the class
  • row 10: I added an action to initialize the element’s mapping function vc_infobox_mapping() (row: 15)
  • row 11: I used add_shortcode() function to create the new shortcode for the element. In the first parameter I passed the slug for the shortcode vc_infobox and in the second parameter I passed an array to call the element’s HTML function vc_infobox_html() (row: 23)
  • row 15: vc_infobox_mapping() function (explained in the next steps)
  • row 23: vc_infobox_html() function (explained in the next steps)
  • row 32: After the end of the Class,so outside the class, you have to initialize it so Visual Composer will be able to include your element in the list

3. Mapping the Element

It’s time to use the famous vc_map() function, that allows to add new elements inside Visual Composer and to assign them custom params/attributes.

So we can edit our vc_infobox_mapping() function:
// Element Mapping
public function vc_infobox_mapping() {
        
	// Stop all if VC is not enabled
	if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
    }
		
	// Map the block with vc_map()
	vc_map( 
 
        array(
			'name' => __('VC Infobox', 'text-domain'),
			'base' => 'vc_infobox',
			'description' => __('Another simple VC box', 'text-domain'), 
			'category' => __('My Custom Elements', 'text-domain'),   
			'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',            
			'params' => array(   
					 
				array(
					'type' => 'textfield',
					'holder' => 'h3',
					'class' => 'title-class',
					'heading' => __( 'Title', 'text-domain' ),
					'param_name' => 'title',
					'value' => __( 'Default value', 'text-domain' ),
					'description' => __( 'Box Title', 'text-domain' ),
					'admin_label' => false,
					'weight' => 0,
					'group' => 'Custom Group',
				),  
				 
				array(
					'type' => 'textarea',
					'holder' => 'div',
					'class' => 'text-class',
					'heading' => __( 'Text', 'text-domain' ),
					'param_name' => 'text',
					'value' => __( 'Default value', 'text-domain' ),
					'description' => __( 'Box Text', 'text-domain' ),
					'admin_label' => false,
					'weight' => 0,
					'group' => 'Custom Group',
				)                   
					
			)
		)
	);                   			  
	   
}

Code explanation

  • row 05-07: If Visual Composer is not enabled the function stops, avoiding the Fatal Error.
  • row 10: I called the function vc_map() passing an Array of options and params
  • row 10: A human friendly name for the element. It will be displayed in the list of elements in VC. how-to-create-a-custom-new-block-in-visual-composer-01
  • row 14: This must be extactly the shortcode slug you defined in previous step on the row 11.
  • row 15: A human friendly description for the element. It will be displayed in the list of elements in VC. how-to-create-a-custom-new-block-in-visual-composer-02
  • row 16: Using the category attribute is allowing you to create a custom tab for your personal elements in the VC list of elements. If you don’t add this attribute, your element will be placed in the “All” tab. how-to-create-a-custom-new-block-in-visual-composer-03
  • row 17: The icon attribute allows to add a custom icon for the element. I created and uploaded my icon in the img folder in my theme and I used get_template_directory_uri() function to reach it. how-to-create-a-custom-new-block-in-visual-composer-04
  • row 18: params attribute is the heart of the Mapping. You can pass here an array of arrays adding unlimited params to your custom element.
  • row 21: The field type. In our example it’s a simple textfield (input type text).
  • row 22: HTML tag name where Visual Composer will store attribute value in Visual Composer edit mode. Default: hidden input.
  • row 23: 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.
  • row 24: Human friendly title of your param. Will be visible in shortcode’s edit screen.
  • row 25: Will be the “name” attribute for your field. Use only _ for multiple words and try to add unique names because it will be used to save the data.
  • row 26: Default value
  • row 27: Human friendly description of your param. Will be visible in shortcode’s edit screen.
  • row 28: Show/Hide value of param in Visual Composer editor.
  • row 29: Params with greater weight will be rendered first respect the other params.
  • row 30: Use it to divide your params within groups/tabs (the position of the tab is influenced by the previous option).
  • row 33-44: I added another param (a textarea to add some text). You can add any else arrays/params here.
Now our custom element has its params and can it appears in the VC list of elements but it can’t be displayed in frontend because it’s missing the HTML code to render it.

4. Element HTML

We are finally ready to work on the frontend layout, so let’s edit our vc_infobox_html() function:
// Element HTML
public function vc_infobox_html( $atts ) {
	
	// Params extraction
	extract(
		shortcode_atts(
			array(
				'title'   => '',
				'text' => '',
			), 
			$atts
		)
	);
	
	// Fill $html var with data
	$html = '
	<div class="vc-infobox-wrap">
	
		<h2 class="vc-infobox-title">' . $title . '</h2>
		
		<div class="vc-infobox-text">' . $text . '</div>
	
	</div>';		
	
	return $html;
	
}

Code explanation

  • row 02: I start saying that we have to set a variable ($atts) in the function in order to contain our attribute values.
  • row 05: This function is extracting all the values from the DB and is putting them in some variables.
  • row 08: I extract the title param. It must be exactly the same name you used in the params mapping (previous step, row 25). You can also pass a default value in case of empty value. I don’t need to add a default value so I leave it blank.
    Note: the function will create a var $title and the name is exactly the param name you passed.
  • row 09: I extract the text param. It must be exactly the same name you used in the params mapping (previous step, row 38). You can also pass a default value in case of empty value. I don’t need to add a default value so I leave it blank.
    Note: the function will create a var $text and the name is exactly the param name you passed.
  • row 11: I pass to the function the $atts variable where the data is saved (as described for the row 02)
  • row 16-23: I fill a $html variable with the HTML code adding also my 2 attributes $title and $text
  • row 25: I finally return the $html variable rendering my custom element in frontend.

5. Result and Complete Code

This is our backend result: how-to-create-a-custom-new-block-in-visual-composer-05
And this is our frontend result: how-to-create-a-custom-new-block-in-visual-composer-06
If you need the complete code paste in your function.php file this function:
// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );

function vc_before_init_actions() {
	
	//.. Code from other Tutorials ..//

	// Require new custom Element
	require_once( get_template_directory().'/vc-elements/my-first-custom-element.php' ); 
	
}
And paste in your my-first-custom-element.php file this class:
/*
Element Description: VC Info Box
*/

// Element Class 
class vcInfoBox extends WPBakeryShortCode {
    
	// Element Init
	function __construct() {
        add_action( 'init', array( $this, 'vc_infobox_mapping' ) );
        add_shortcode( 'vc_infobox', array( $this, 'vc_infobox_html' ) );
    }
 	
	// Element Mapping
    public function vc_infobox_mapping() {
        
		// Stop all if VC is not enabled
		if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
        }
		
		// Map the block with vc_map()
		vc_map( 
			array(
				'name' => __('VC Infobox', 'text-domain'),
				'base' => 'vc_infobox',
				'description' => __('Another simple VC box', 'text-domain'), 
				'category' => __('My Custom Elements', 'text-domain'),	
				'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',	 		
				'params' => array(	
						
					array(
						'type' => 'textfield',
						'holder' => 'h3',
						'class' => 'title-class',
						'heading' => __( 'Title', 'text-domain' ),
						'param_name' => 'title',
						'value' => __( 'Default value', 'text-domain' ),
						'description' => __( 'Box Title', 'text-domain' ),
						'admin_label' => false,
						'weight' => 0,
						'group' => 'Custom Group',
					),  
					
					array(
						'type' => 'textarea',
						'holder' => 'div',
						'class' => 'text-class',
						'heading' => __( 'Text', 'text-domain' ),
						'param_name' => 'text',
						'value' => __( 'Default value', 'text-domain' ),
						'description' => __( 'Box Text', 'text-domain' ),
						'admin_label' => false,
						'weight' => 0,
						'group' => 'Custom Group',
					),  					
					   
				),
			)
		);					  			  
	   
    }
	
	
	// Element HTML
	public function vc_infobox_html( $atts ) {
		
		// Params extraction
		extract(
			shortcode_atts(
				array(
					'title'   => '',
					'text' => '',
				), 
				$atts
			)
		);
		
		// Fill $html var with data
		$html = '
		<div class="vc-infobox-wrap">
		
			<h2 class="vc-infobox-title">' . $title . '</h2>
			
			<div class="vc-infobox-text">' . $text . '</div>
		
		</div>';		
		
		return $html;
		
	}
	
} // End Element Class


// Element Class Init
new vcInfoBox();	
  • thanks. how can I customize the appearance of my new element in the visual composer backend page?

    • Hello,

      are you talking about the graphic design of the backend block?

      In this case you could enqueue a CSS in your wp backend and you could add some css classes to change the block appearance.

      Backend enqueuing -> https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

      Best

      • I’ve found a specific option called ‘custom_markup’ under params of vc_map() function, it is specific for my case. But I’m not able to show my custom elements.
        (source: https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524332)

        • Yes the custom_markup param allows to rebuild the html of shortcode but there aren’t many informations about the use of attributes inside the markup.

          We found an example of custom markup for tabs element:

          ‘custom_markup’ => ‘

          %content%
          ‘,

          This could suggest you can user %your-param-name% but we really need to study this feature (I’m thinking to queue a new tutorial for this feature because it would be interesting!)

          Thanks for sharing,

          Best

  • Mirosnicencu Florin

    Hi, i tried using your code to develop a new element for Visual Composer 5.0, but i couldn’t see it in the backend.
    Has the new version broken this method?
    Thanks

    • Hello,

      we tested the custom block on the latest version of Visual Composer (v5.0) and it work well.

      Take a look to your code if there are some issues or check the theme/plugins for some incompatibility.

      Best

  • Man you’re really awesome, I’m so thankful to you πŸ™‚

  • adi

    Hi this tutorial is great, can you make a tutorial on groups, how do we create groups. For example, we great team shortcode, and if someone want to add more team member it simply click on plus button and go on. Thanks

    • Hi,

      are you talking about a fields repeater?
      I do an example.. you have 2 fields “Name” and “Role” for every team member.

      Group 1
      ——————–
      | NAME FIELD |
      | ROLE FIELD |
      ——————–

      ____________________________
      [Add new Group + ]

      If you press the button Add new Group the repeater will create:

      Group 1
      ——————–
      | NAME FIELD |
      | ROLE FIELD |
      ——————–

      Group 2
      ——————–
      | NAME FIELD |
      | ROLE FIELD |
      ——————–

      ____________________________
      [Add new Group + ]

      And so on to unlimited groups..

      If you were talking about this it is already possible in Visual COmposer and i already added a future tutorial in the queue. The tutorial title is visible in the home and it’s:

      “How-To: add a fields repeater on Visual Composer”

      Best

      • adi

        ok thanks i will try it

      • adi

        Any idea how long it will take to implement this example and it will available? Again Thanks for your work.

        • Unfortunately I don’t know the timing for new tutorial because my team is busy in the launch of our best theme ever πŸ™‚ (as you can see to the left of this page)

          Best

  • Chan

    I’m a fan. Thanks you. Great tutorial.

  • Hi Guys,

    thanks you all for your feedback! I’m trying to create a different way to write tutorials about WP. I hope to have time to write all tutorials that I started in the home and I would like to add also your ideas (for suggestions we have the specific form -> http://www.wpelixir.com/send-your-suggestion/ )

    Cheers

  • Andreas Baumann

    Hi nice tutorial. now i can make my own elements, with images etc. pp. but I just can not figure out how to build in the css-animation (getCSSAnimation). I have absolutly no idea. Can someone help me? Thanks

    • What do you nean with css-animation? Are you talking about the appearing function to display an element in frontend using some animation?
      (something like this -> http://demo.uncommons.pro/themes/wp/maya/site/home-marketing/ scrolling down)

      Best

      • Andreas Baumann

        More or less yes. I mean the dropdown in the backend with the “build in” animation. without the detour via builing a own “handmade” dropdown. There seems to be a function and i have no idea how to use. https://uploads.disquscdn.com/images/02fff299062da52548f77e5e648ea0490c382a3a9756293fb64ea62a1313b0ad.jpg

        • Ah ok,

          we commonly reproduce this field by ourself using a simple dropdown field but if you want to use exactly that field you have to open a VC default element (ex. the Text Block) and check the VC_MAP of that element.. When we need some private field in Visual Composer we always open the plugin files about the folder of default elemente and we check if they created a specific field… Remember VC staff always HIDE its better fields πŸ™‚ we created this blog also to contrast this idea..

          Best

          • Andreas Baumann

            Thanks!

  • Dev

    Excellent Tutorial ! I cannot thank you enough spending your time for this post for people like me πŸ™‚
    One query,How could we achieve this, if we have multiple custom shortcodes, do you recommend creating single files for each element with map array and html output or have one file with all map arrays and different files for just html output. Also, how could we add parent, child shortcodes. One special mention on excellent way of writing – repeating the file structure in each of your post so one does not have to go to the first post to recollect. For someone like me who has just started php, Thank you very much.

    • Thank you very much for your feedback! I really appreciate it!

      About the right way to develope multiple elements, we can give you an advise because everyone can build his prefect way. Anyway we found really comfortable to create 1 file every element adding in this file the element mapping and the output.. So when you find a issue on a specific element you have a small file to check.. not thousand of code rows.. πŸ™‚

      For the child shortcodes I still haven’t studied them but I’ll do soon πŸ™‚

      Best

  • Dev

    Hi,

    Please let me know what is in vc-blocks folder in my theme’s root. Is vc-elements folder in vc-blocks folder ? If yes then, should we not have vc-blocks in the $dir as well. Thank You

    • Azz.. You’re right.. vc-blocks and vc-elements are the same folder but I changed the folder name during the tutorial.. LOL

      I’m fixing overall the blog..

      Thanks!

      • Dev

        Thank you very much, I felt stupid asking that question but was tearing my hair as was confused what the folder but feel better now

  • Aled Evans

    Hi, I have followed the tutorial but for some reason I’m getting the following error all across my site? https://uploads.disquscdn.com/images/5735f26eb76e42facee29a9edf35a16672ca8514e0e9d42d5a1c66c1507ab291.png

    • Hello there,

      seems like there is some missing to the top od file maybe the tag < ?php or something there.. because it seems to display your php code on screen.. I't strange.

      Check the beginning of your file.

      Best

      • Aled Evans

        Thank you I totally forgot the tags πŸ™‚
        Thanks for the fast reply. You may also want to add them into the example to make it easier.

  • Congratulations. Very clear and understandable tutorial. In particular, I appreciated the way you had explained almost all lines of code with the support of screenshots. It is very important for a developer newbie like me and I must say that many tutorials usually are not so detailed.
    thank you.

    • Thank you Riccardo I apreciate your feedback! I’m trying create something different respect standard tutorials. My goal will be to publish tutorial about “hidden knowledge”. Many times I stay on google for hours to understand how to do something about WP core and plugins and many times I find a working solution by myself (reading the core code, in particular about Visual Composer.. they published on the wiki not more than 60% of their fields and features I think..).
      So why not share this hidden knowledge? Now the blog is to its beginning but when I will have published 70% of tutorials that I have in mind I think it will become really popular πŸ™‚

      In the meanwhile take a look to the coming soon tutorial in the home so you can understand what I’m meaning πŸ˜‰

      Best

      • Hello,
        I approached your website because I’d like to customize VC post module of theme I bought, which was already customized by the theme developer. Unfortunately, I must say it is a mess understanding how, where and which files I should edit.
        Your tutorial is good but it doesn’t help much about the task I wanna perform.
        Reading in last few days on the web, I have had the idea that customizing and extending VC is a real complex task and I find the plugin developer wiki something of tough to read and not complete at all. I may be wrong, but for now this is my opinion.
        Thank you

  • Collin

    Hi, I started from your code to build multiple new elements in VC and I’m having this error while Yoast SEO is active: Uncaught SyntaxError: Unexpected token < in JSON at position 0 in this file wp-seo-shortcode-plugin-402.min.js?ver=4.0.2:1)

    If I delete my new VC elements, the error disappears and same if I deactivate Yoast. Not too sure what could be the problem.

    Any ideas on that matter?

    ex of one element I created

    __(‘VC Testimonials’, ‘html5blank’),
    ‘base’ => ‘vc_testimonials’,
    ‘description’ => __(‘Add a testimonials rotator’, ‘html5blank’),
    ‘category’ => __(‘Robotel Elements’, ‘html5blank’),
    ‘params’ => array(

    /* Title */
    array(
    ‘type’ => ‘textfield’,
    ‘holder’ => ‘p’,
    ‘class’ => ‘testi-title’,
    ‘heading’ => __( ‘Testimonial Title’, ‘html5blank’ ),
    ‘param_name’ => ‘testi_title’,
    ‘admin_label’ => false,
    ‘weight’ => 0,
    ),

    /* Texte */
    array(
    ‘type’ => ‘textarea_html’,
    ‘holder’ => ‘div’,
    ‘class’ => ‘testi-text’,
    ‘heading’ => __( ‘Text under title’, ‘html5blank’ ),
    ‘param_name’ => ‘testi_text’,
    ‘admin_label’ => false,
    ‘weight’ => 0,
    ),

    /* Shortcode ID */
    array(
    ‘type’ => ‘textfield’,
    ‘holder’ => ‘p’,
    ‘class’ => ‘testi-shortcode’,
    ‘heading’ => __( ‘Testimonial Shortcode’, ‘html5blank’ ),
    ‘param_name’ => ‘testi_shortcode_id’,
    ‘admin_label’ => false,
    ‘weight’ => 0,
    ‘description’ => __( ‘Enter the ID of the testimonial shortcode. Ex: 79’, ‘html5blank’ ),
    )
    )
    )
    );
    }

    // Element HTML
    public function vc_testimonials_html( $atts ) {

    // Params extraction
    extract(
    shortcode_atts(
    array(
    ‘testi_title’ => ”,
    ‘testi_text’ => ”,
    ‘vc_shortcode_id’ => ”,
    ),
    $atts
    )
    );

    // Fill $html var with data
    $html = ”;

    if ($testi_title){
    $html .= ” . $testi_title . ”;
    };

    if ($testi_text){
    $html .= ” . $testi_text . ”;
    };

    if ($testi_shortcode_id){
    $html .= do_shortcode(‘[testimonial_rotator id=”‘.$testi_shortcode_id.'”]’);
    };

    $html .= ”;

    return $html;

    }

    } // End Element Class

    // Element Class Init
    new vcTestimonials();
    ?>

  • Manu

    Perfect tutorial! Thanks a lot!

  • Emeka Emmanuel

    Hello how do i add element with suffix since the function.php prohibits that.

  • Md. Bayzid Bostame

    Very Nice Tutorial, How can i add media uploader to add an image in this info box? I want in my info box Image, title and short description.

  • Emeka Emmanuel

    Hello, what about if i have a shortcode and i want to just input it , so it outputs the shortcode data , how do i go about this, i have tried this , just that it outputs just the shortcode text, i have tried it with do_shortcode up to no avail

    • Raphael Glaser

      you can use the default visual composer shortcode mapper

  • Ali Raza

    nice

  • Animesh Sahu

    How to align css on it on frontend, it is not styling, what i do?

    • Mike Polachekster

      text-align: center;

  • Eiad Ashraf

    Thank you, Thank you, Thank you πŸ˜€

  • Very helpful for beginners, must appreciated. Thanks buddy

  • Nibor

    not working (anymore)
    vc version: 5.1
    theme: Twenty Twelve
    error message:
    This site does not work
    …. can not process this request at this time.
    HTTP ERROR 500
    Other Pluings installed: None beside VC

    Error comes up if I paste your code in functions.php

    • Hi,

      we tested the code also in your VC version and it works. Try to check what is the issue using the WP debug.

      Best

      • Nibor

        Wow, thanks for the quick response and the hint.
        Using WP debug I found the problem. It had nothing to do with your code but with my server settings / file permissions.
        Thanks again!

  • Stevan SlavniΔ‡

    Hi, great tutorial.

    I was wondering how to get array of CPT categories and list of posts in backend, and render CPT post featured image and content on frontend of website.

    Thanks

    • xdvl

      I’d like to know if this is possible too

    • Hi,

      the answer is off-topic respect this tutorial indeed I would like to create an additional tutorial about the dynamic sources for the dropdown fields..

      However you could create an array of items (cpt items – ID and Title) before to start the vc_map() and then under the ‘value’ attribute of dropdown field you can pass that array of cpt items.

      Best

  • Owen Melbourne

    Handy to help scaffold a nice base class which can be extended πŸ™‚ – although I’m getting a weird issue with clicking “Edit” all the fields are blank – any idea?

  • Dan

    Hi, first let me thank you for this article!
    I am new to wordpress and have a question: is it possible to set up a cron job to update my custom element once a day?

  • Aleksandrs Krasnovskis

    Hello,

    very useful article, and I have managed to make it work, but I have two issues how to add link and image in HTML, so i have everything in backend, but on front nothing appears

    • Rajendra Rijal

      You need to update vc_infobox_html($atts) function on my-first-custom-element.php file and also dont forget to return also.
      https://gist.github.com/rajendra89/50359da4662562dec9bab30b84d6623c

      • Jarda

        Hi, oneΒ΄s more please. Problem is I dont see image, if i add i see him but it isnt what i need. I have a slider and i need on one slide another image then the others slides. How can i do that? Is possible do something this or this ‘ . $image1 . ‘? Im completely new in php. And one more question, this array( ‘type’ => ‘attach_image’, …… returns what? url, full name with .png? I trying understand where can i insert this ‘ . $image1 . ‘ in code and what can i imagine under this part of code.

        Thanks

  • Bib Rofi

    Hi,

    Very useful article, and I’m working on several custom blocks, but I’m running into an issue: I can’t seem to save the actual values in the custom fields. Even when I implement the code provided in the tutorial, the values don’t save when I click on Save Changes.

    The rest of the code works; HTML is generated right away, but not filled with the values, since the actual values aren’t saved.

    How can I fix this?

  • Karl

    Thanks, just getting started with VC and this was very useful for building a simple testimonials module.

  • Hi, how can I create a new element but in a child theme ?

    I’ve been trying to do a copy paste of an existing component in the parent theme and adding it to a vc_blocks folder in a child theme and calling the file via the functions.php but i get an error of a function being redeclared

    Thanks in advance for your help

    • Sampo Virmasalo

      Modify the init-function from functions.php as follows:

      parent: require_once( get_template_directory().’/vc-elements/my-first-custom-element.php’ );
      child: require_once( get_stylesheet_directory().’/vc-elements/my-first-custom-element.php’ );

      • I actually created a vc_custom_blocks folder in the child theme and then called the component in the functions.php file as follows:
        get_template_part(‘vc_custom_blocks/vc_support_block’);

        The parent theme has a folder called vc_blocks so I created a same folder in my child theme but i think the naming was causing a problem, it always said that my function couldn’t be redefined or something like that.

        Anyways, now it’s working and I’m happy about it πŸ˜€

  • Great tutorial. Is there somewhere documented how to customise the Page Builder preview? I’ve created a new element with some links, and when administering the element, they just look untidy. I’d like to tidy this up to make it more presentable https://uploads.disquscdn.com/images/627c5cb66e7dd67cb12cd6526d07d87628bed7cdc6c2eb61d18abf93c151873c.png .

    I’ve just worked this out – I had used the holder class in the params section and as this normal defaults to hidden, changing this just then displayed the parameters in the bakery editor. changed this back to hidden or removed it fixed this.

    • Nadeem R Khatana

      leave holder blank and use ( “admin_label” => true )

  • Sarath Chandran PR

    hii how can i create a custom category widgets in visual composer

  • Diego Versiani

    Thanks for this great tutorial πŸ™‚

  • Mashrur Bin Ahad Fahim

    WPBakeryShortCode seems undefined in PhpStorm. How do I include it in my php class?
    I’m using PhpStorm latest version and working on visual composer starter theme.

  • Tariq Tahiri Bux Mahesar

    Thanks for greate tutorial , i follow step by step but nothing show on my Visual composer

  • Vladislav

    Hi
    How can I add an image field?
    Please!)

  • Vijaychandrika Chandrika

    Very helpful for beginners, must appreciated. Thanks buddy
    i also want to make features box with customize option can please upload the tutorial for this

Your Personal Notes