Browsing Tag

Visual Composer

Wordpress Developer

How to use Autocomplete param type in Visual Composer

December 19, 2017

The parameter Autocomplete suggests for you: post, page, custom post type, categories, custom taxonomies by your keywords.
So you can select which one you need easily. By default, you usually use in Post Grid Shortcode, Post Masonry Shortcode
Autocomplete in Visual Composer Post Grid Shortcode Autocomplete in Post Masonry Shortcode

And if you want to use this Autocomplete param type in your shortcode, please follow some steps below:

1. Create Function to gell post result by suggested keyword or post id:

function felis_blog_post_autocomplete_suggester( $query) {
global $wpdb;
$post_id = (int) $query;
$post_results = $wpdb->get_results( $wpdb->prepare( "SELECT a.ID AS id, a.post_title AS title FROM {$wpdb->posts} AS a
WHERE a.post_type = 'post' AND a.post_status != 'trash' AND ( a.ID = '%d' OR a.post_title LIKE '%%%s%%' )", $post_id > 0 ? $post_id : - 1, stripslashes( $query ), stripslashes( $query ) ), ARRAY_A );
$results = array();
if ( is_array( $post_results ) && ! empty( $post_results ) ) {
foreach ( $post_results as $value ) {
$data = array();
$data['value'] = $value['id'];
$data['label'] = $value['title'];
$results[] = $data;
return $results;

2. Add function in step 1 to vc_autocomplete posts_callback filter:

add_filter( 'vc_autocomplete_felis_content_slider_2_posts_callback', 'felis_blog_post_autocomplete_suggester', 10, 1 );

felis_content_slider_2 is your shortcode base name.

3. Create function render result in step 1:

function felis_post_autocomplete_suggester_render( $query ) {
$query = trim( $query['value'] );

    // get value from requested
if ( ! empty( $query ) ) {
$post_object = get_post( (int) $query );
if ( is_object( $post_object ) ) {
$post_title = $post_object->post_title;
$post_id = $post_object->ID;
$data = array();
$data['value'] = $post_id;
$data['label'] = $post_title;
return ! empty( $data ) ? $data : false;
return false;
return false;

4. Add function in step 3 to vc autocomplete posts render:

add_filter( 'vc_autocomplete_felis_content_slider_2_posts_render', 'felis_post_autocomplete_suggester_render', 10, 1 );

felis_content_slider_2 is your shortcode base name.

In conclusion, you can use Autocomplete param type in your shortcode like this:
Autocomplete in Felis Content Slider 2 Shortcode

WordPress Tips

Visual Composer conflict with Skrollr lib of theme

May 21, 2017

If your theme uses Skrollr library, there is a chance that it will break the parallax effect of Visual Composer’ (VC) row element. The reason is that VC also uses Skrollr.  Because this library only inits once, when VC Row tries to init Skrollr, it returns the previous object inited by your theme (VC’s JS is loaded after your theme’s JS file).

In addition, VC row uses JS to add “data-” properties to parallax row, so the previous Skrollr object cannot detect these properties. As a result, VC parallax row does not work.

To fix this, you will need to trigger the Row Behavior function of VC again so Skrollr can understand “data-” properties of parallax row again

$(document).on(‘vc_js’, function(){

The “vc_js” event is trigger after all VC functions have been called.

Let me know if this solution works for you.