Informations

12557 views
Easy

Ingredients

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

STEPS

In this tutorial I’ll reveal a little trick about to remove the default elements of Visual Composer plugin but before to start I strongly suggest you read the basic tutorial to integrate Visual Composer in your themeadvised

1. Where to include your trick code

As I wrote in other similar tutorials, the trick 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, however, I do not take care to explain how to do a require_once in wordpress and then for convenience we start inserting the integration code in the functions.php file of the theme.

2. Remove the element

To completely disable/remove a default element in Visual Composer you only have to add an action AFTER VC init. I’ve chosen to add the trick after VC init to be sure that all elements are loaded. This is also useful to remove custom elements from other plugins and themes.
// After VC Init
add_action( 'vc_after_init', 'vc_after_init_actions' );

function vc_after_init_actions() {
	
	// Remove VC Elements
	if( function_exists('vc_remove_element') ){ 
		
		// Remove VC Button Element
		vc_remove_element( 'vc_btn' );
		
		// Remove VC Separator Element
		vc_remove_element( 'vc_separator' );
		
	}
	
}

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 07: I used function_exists() to be sure the function that I’ll call exists.
  • row 09: I called the function vc_remove_element() passing as parameter the exact slug of the shortcode. In the next step I’ll explain hot to quickly find the shortcode slug.
Now you can note that the “Button” and the “Separator” elements are disappeared from the elements list.

3. How to find the shortcode slug

There is nothing easier. You only have to add the shortcode in a page and to check the shortcode’s code in CLASSIC MODE view. trick-remove-default-elements-in-visual-composer-1
trick-remove-default-elements-in-visual-composer-2
Note: this trick is working also with custom elements loaded by themes and plugins.

Your Personal Notes