Informations

Ingredients

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

STEPS

Nowadays it’s rare to find a theme without animation on the elements, in fact, Visual Composer includes a CSS animation field that applies many effects during the page scrolling. A few days ago I was losing my time creating my personal animation field when I thought: why not to use the field that already exists in Visual Composer? I was impressed by the ease of use and lack of information on the net about this field!
Note: the Tutorial will improve the code already explained in the related tutorial I linked in the ingredients.

1. Where to include your code

We’ll edit the custom element we just created through the related tutorial (our amazing “VC Infobox“). At the end of tutorial we’ll be able to apply an Animation to the text of our element. We’ll edit the code in 2 points: improving the mapping and editing the HTML.

2. Add the Animation field to your custom element

Visual Composer already has an Animation field and we only need to add it in the vc_map() function. Below I propose the entire mapping code from the related tutorial adding the field we need to the end:
// 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',
			),

			array(
				'type' => 'animation_style',
				'heading' => __( 'Animation Style', 'text-domain' ),
				'param_name' => 'animation',
				'description' => __( 'Choose your animation style', 'text-domain' ),
				'admin_label' => false,
				'weight' => 0,
				'group' => 'Custom Group',
			),
						   
		),
	)
);					  			  				  		

Code explanation

I will skip all code already explained.
  • row 38: This is the type name to include the Google Font field in your element.
Now your Element will display a complete Animation option (with its preview button):

3. Manage the Animation Data and edit the HTML

For the final step I attach the entire vc_infobox_html() function explaining the additional rows:
// Element HTML
public function vc_infobox_html( $atts ) {
	
	// Params extraction
	extract(
		shortcode_atts(
			array(
				'title'   => '',
				'text' => '',
				'animation' => '',
			), 
			$atts
		)
	);
	
	//***********************//
	// MANAGE ANIMATION DATA //
	//***********************//
	
	// Build the animation classes
	$animation_classes = $this->getCSSAnimation( $animation );
	
	// Fill $html var with data
	$html = '
	<div class="vc-infobox-wrap">
	
		<h2 class="vc-infobox-title">' . $title . '</h2>
		
		<div class="vc-infobox-text ' . $animation_classes . '">' . $text . '</div>
	
	</div>';		
	
	return $html;
	
} 

Code explanation

  • row 10: I added also new parameter “animation” to the extraction function
  • row 21: I have built the $animation_classes using the VC function getCSSAnimation()
  • row 29: Finally I added the $animation_classes to my text div

4. Result and Complete Code

This is our frontend result:
And this the complete code for your my-first-custom-element.php file:
/*
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',
					),
					
					array(
				        'type' => 'animation_style',
				        'heading' => __( 'Animation Style', 'text-domain' ),
				        'param_name' => 'animation',
				        'description' => __( 'Choose your animation style', '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' => '',
					'animation' => '',
				), 
				$atts
			)
		);
		
	    //***********************//
	    // MANAGE ANIMATION DATA //
	    //***********************//
	
	    // Build the animation classes
	    $animation_classes = $this->getCSSAnimation( $animation );
	
	    // Fill $html var with data
	    $html = '
	    <div class="vc-infobox-wrap">
	
	    <h2 class="vc-infobox-title">' . $title . '</h2>
		
	    <div class="vc-infobox-text ' . $animation_classes . '">' . $text . '</div>
	
	    </div>';		
	
	    return $html;
		
	}
		
} // End Element Class


// Element Class Init
new vcInfoBox();	
  • Akhtarujjaman Shuvo

    Nice tuts

Your Personal Notes