Custom widget not showing in Visual Composer

Question

I created my own widget myself, I can see it in the widget area, but I can not find it in the editor using the Visual Composer plugin. Is there something wrong with my widget? My widget just uses this example as provided by Wordpress.org:

/** * Adds Foo_Widget widget. */ class Foo_Widget extends WP_Widget { /** * Register widget with WordPress. */ function __construct() { parent::__construct( 'foo_widget', // Base ID __( 'Widget Title', 'text_domain' ), // Name array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args ); } /** * Front-end display of widget. * * @see WP_Widget::widget() * * @param array $args Widget arguments. * @param array $instance Saved values from database. */ public function widget( $args, $instance ) { echo $args['before_widget']; if ( ! empty( $instance['title'] ) ) { echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title']; } echo __( 'Hello, World!', 'text_domain' ); echo $args['after_widget']; } /** * Back-end widget form. * * @see WP_Widget::form() * * @param array $instance Previously saved values from database. */ public function form( $instance ) { $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' ); ?> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>"> </p> <?php } /** * Sanitize widget form values as they are saved. * * @see WP_Widget::update() * * @param array $new_instance Values just sent to be saved. * @param array $old_instance Previously saved values from database. * * @return array Updated safe values to be saved. */ public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } } // class Foo_Widget 

Answer 1

You must create a dedicated one for the visual composer. Below is an example

 <?php /* Plugin Name: Extend Visual Composer Plugin Example Plugin URI: http://wpbakery.com/vc Description: Extend Visual Composer with your own set of shortcodes. Version: 0.1.1 Author: WPBakery Author URI: http://wpbakery.com License: GPLv2 or later */ /* This example/starter plugin can be used to speed up Visual Composer plugins creation process. More information can be found here: http://kb.wpbakery.com/index.php?title=Category:Visual_Composer */ // don't load directly if (!defined('ABSPATH')) die('-1'); class VCExtendAddonClass { function __construct() { // We safely integrate with VC with this hook add_action( 'init', array( $this, 'integrateWithVC' ) ); // Use this when creating a shortcode addon add_shortcode( 'bartag', array( $this, 'renderMyBartag' ) ); // Register CSS and JS add_action( 'wp_enqueue_scripts', array( $this, 'loadCssAndJs' ) ); } public function integrateWithVC() { // Check if Visual Composer is installed if ( ! defined( 'WPB_VC_VERSION' ) ) { // Display notice that Visual Compser is required add_action('admin_notices', array( $this, 'showVcVersionNotice' )); return; } /* Add your Visual Composer logic here. Lets call vc_map function to "register" our custom shortcode within Visual Composer interface. More info: http://kb.wpbakery.com/index.php?title=Vc_map */ vc_map( array( "name" => __("My Bar Shortcode", 'vc_extend'), "description" => __("Bar tag description text", 'vc_extend'), "base" => "bartag", "class" => "", "controls" => "full", "icon" => plugins_url('assets/asterisk_yellow.png', __FILE__), // or css class name which you can reffer in your css file later. Example: "vc_extend_my_class" "category" => __('Content', 'js_composer'), //'admin_enqueue_js' => array(plugins_url('assets/vc_extend.js', __FILE__)), // This will load js file in the VC backend editor //'admin_enqueue_css' => array(plugins_url('assets/vc_extend_admin.css', __FILE__)), // This will load css file in the VC backend editor "params" => array( array( "type" => "textfield", "holder" => "div", "class" => "", "heading" => __("Text", 'vc_extend'), "param_name" => "foo", "value" => __("Default params value", 'vc_extend'), "description" => __("Description for foo param.", 'vc_extend') ), array( "type" => "colorpicker", "holder" => "div", "class" => "", "heading" => __("Text color", 'vc_extend'), "param_name" => "color", "value" => '#FF0000', //Default Red color "description" => __("Choose text color", 'vc_extend') ), array( "type" => "textarea_html", "holder" => "div", "class" => "", "heading" => __("Content", 'vc_extend'), "param_name" => "content", "value" => __("<p>I am test text block. Click edit button to change this text.</p>", 'vc_extend'), "description" => __("Enter your content.", 'vc_extend') ), ) ) ); } /* Shortcode logic how it should be rendered */ public function renderMyBartag( $atts, $content = null ) { extract( shortcode_atts( array( 'foo' => 'something', 'color' => '#FF0000' ), $atts ) ); $content = wpb_js_remove_wpautop($content, true); // fix unclosed/unwanted paragraph tags in $content $output = "<div style='color:{$color};' data-foo='${foo}'>{$content}</div>"; return $output; } /* Load plugin css and javascript files which you may need on front end of your site */ public function loadCssAndJs() { wp_register_style( 'vc_extend_style', plugins_url('assets/vc_extend.css', __FILE__) ); wp_enqueue_style( 'vc_extend_style' ); // If you need any javascript files on front end, here is how you can load them. //wp_enqueue_script( 'vc_extend_js', plugins_url('assets/vc_extend.js', __FILE__), array('jquery') ); } /* Show notice if your plugin is activated but Visual Composer is not */ public function showVcVersionNotice() { $plugin_data = get_plugin_data(__FILE__); echo ' <div class="updated"> <p>'.sprintf(__('<strong>%s</strong> requires <strong><a href="http://bit.ly/vcomposer" target="_blank">Visual Composer</a></strong> plugin to be installed and activated on your site.', 'vc_extend'), $plugin_data['Name']).'</p> </div>'; } } // Finally initialize code new VCExtendAddonClass();