How to make visual composer Shortcode for your plugin

Visual composer is the most popular visual editor for WordPress. It have both Frontend and Backend editing option. Already more than 297,131 paid user using for their website and a huge number of Premium WordPress theme club using visual composer for their theme to make it more attractive to the customer.

I had search about Hot to Make visual composer Shortcode but did not able to find complete documentation. So I was thinking if I can share my development experience with all developers then ma be it will be very helpful.

In my tutorial I tried to explain very details about Ho to Make visual composer Shortcode from very scratch according to your need. Hope you will enjoy it.

For one of my plugin I tried to make visual composer short code so the user can use it with visual composer. Its really easy to implement with your plugin or theme. I am adding details tutorial how you can do that for your theme or plugin.

Make visual composer Shortcode :

Step One :

Make a folder named something like vc-shortcodes in your plugin directory. create a php file I am going to name it client-infobox.php , I am making a client information box short code for my next upcoming plugin.

Now required one the file with your plugin main file just like this way

// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );

function vc_before_init_actions() {
    // Require new custom Element
    require_once( PXLR_PLUGIN_DIR . '/vc_shortcodes/client-infobox.php');
    require_once( PXLR_PLUGIN_DIR . '/vc_shortcodes/client-infobox2.php');
}

 

Here PXLR_PLUGIN_DIR is just plugin directory , I had declared it as constant.

After that open client-infobox.php and declare class according to your short code name. I had declare as like bellow

class ClientInfoBox extends WPBakeryShortCode{}

My class ClientInfoBox Extend WPBakeryShortCode which is actually VC Class for Shortcode mapping. So by extending the WPBakery ShortCode class my class ClientInfoBox is getting all the method from WPBakeryShortCode.

Then just create a construct for the class you just declare.

function __construct()
{
    add_action('init', array($this, 'client_info_box_mapping'));
    add_shortcode('client_info_box', array($this, 'client_info_box_html'));
}

I had added action hook which registering the short code mapper actually which is the function stands for backend options. Then added short code for my client_info_box where actually I will write the output of my Shortcode.

So my class consists 3 part in my declaration which is
1. Shortcode init
2. Shortcode Mapper , which is actually Shortcode parameter where will be options.
3. Shortcode HTML , Where I will write the markup which will be visible.

If you want to Make visual composer Shortcode then you have have to do the following 3 part. Its very simple just follow the step I did for my plugin pxlr-clients.

So lets create the options so we can input settings and necessary field related to the layout HTML.

public function client_info_box_mapping()
    {

        $clients = array();

        $clients[ __( "Select Client", 'pxlr-client' ) ] = '';

        $query = new WP_Query( array(
            'post_type'      => 'clients',
            'posts_per_page' => - 1,
            'post_status'    => 'publish'
        ) );

        if ( $query->have_posts() ) :
            while ( $query->have_posts() ) :
                $query->the_post();
                $clients[ get_the_title() ] = get_the_id();
            endwhile;
        endif;

        wp_reset_postdata();

// Stop all if VC is not enabled
        if (!defined('WPB_VC_VERSION')) {
            return;
        }

// Map the block with vc_map()
        vc_map(
            array(
                'name' => __('Client Info Box', PXLR_PLUGIN_TEXTDOMAIN),
                'base' => 'client_info_box',
                'description' => __('Client Info Box', PXLR_PLUGIN_TEXTDOMAIN),
                'category' => __('Pxlr Clients', 'text-domain'),
                'icon' => get_template_directory_uri() . '/assets/img/vc-icon.png',
                'params' => array(

                    array(
                        "type"        => "dropdown",
                        "admin_label" => TRUE,
                        "class"       => "",
                        "value"       => $clients,
                        "heading"     => __( "Select Client", 'hippo-plugin' ),
                        "param_name"  => "client_id",
                        "description" => __( "Select client that would you like to display", PXLR_PLUGIN_TEXTDOMAIN)
                    ),

                    array(
                        "type"        => "textfield",
                        "admin_label" => TRUE,
                        "heading"     => __( "Client Logo Height and Width", 'hippo-plugin' ),
                        "param_name"  => "client_logo_size",
                        "description" => __( "Input Client Logo Height,Width without Pixel", PXLR_PLUGIN_TEXTDOMAIN)
                    ),
                ),
            )
        );

    }

In Backend there will be option to select individual post from my existing post type clients. So I had just declare an array $clients. I had made a query from my custom post type client and save all post title so I can declare it as select box option data.

make visual composer shortcode option
make visual composer shortcode option

After that I just checked is there VC enable or not , If not I just stop all operation so there will be no problem if anyone not having vc.

if (!defined('WPB_VC_VERSION')) {
return;
}

So we are making visual composer Shortcode so if there VC plugin not present then it will return without any operation.
After that I just declare VC map and there for dropdown field I had just give that $client variable where I stored all client post so it can be displayed as select box option so any one can select the client he want to show.

After that I had just declare the html part for the layout. Make sure there I collect all option value at $atts variable and then just display where I need it. Make sure all attributes value storing in array with your given param name as Key. So just call it according to your need.

public function client_info_box_html($atts)
    {

// Params extraction
        extract(
            shortcode_atts(
                array(
                    'client_id' => '',
                ),
                $atts
            )
        );

// Fill $html var with data
        ob_start(); ?>


<div class="client-infobox-wrap">

    <!-- Info box default -->
    <div class="client-infobox-default clearfix">

        <div class="col-md-6">
            <?php
            $post = get_post($atts['client_id']); //assuming $id has been initialized
            setup_postdata($post); ?>
            <div class="client-infobox-company-details text-left">
                <div class="client-infobox-image">
                    <?php
                    $thumbnail = get_the_post_thumbnail_url($post->ID);
                    $logo_size=explode(',',$atts['client_logo_size']);
                    ?>
                    <img src="<?php echo esc_url($thumbnail)?>" alt="Info Box Image" height="<?php echo $logo_size[0] ?>" width="<?php echo $logo_size[1] ?>">
                </div>

                <h2 class="client-infobox-title"><?php echo $post->post_title; ?></h2>

                <div class="client-infobox-text">
                    <p><?php echo get_post_meta( $atts['client_id'], 'pxlr-client-overview', TRUE ); ?></p>
                </div>

                <div class="client-infobox-button">
                    <a href="<?php echo get_permalink( $post->ID ) ?>" class="btn btn-primary btn-md">Case Study</a>
                </div>
            </div>

        </div>

        <div class="col-md-6">

            <div class="client-infobox-testimonials">
                <span><?php echo esc_attr(get_post_meta( $atts['client_id'], 'pxlr-feed-back-statement', TRUE ))?></span>
                <div class="client-infobox-author-details text-right">

                    <?php

                    $contact_person_group=get_post_meta($post->ID,'pxlr-contact-person-group');
                    if(!empty($contact_person_group)){
                        $single_contactPerson_group=$contact_person_group[0][0]; ?>

                        <span><?php echo esc_attr($single_contactPerson_group['pxlr-contact-person-name']) ?></span>
                        <p><?php echo esc_attr($single_contactPerson_group['pxlr-contact-person-department']) ?></p>
                        <p><?php echo $post->post_title; ?></p>

                        <?php } ?>
                </div>
            </div>

            <div class="client-infobox-achievement">
                <ul class="list-inline text-center">
                    <li>
                        <span class="achievement-count"><?php echo esc_attr(get_post_meta( $atts['client_id'], 'pxlr-number-of-employees', TRUE ))?></span>
                        <span class="text-uppercase">Employee</span>
                    </li>

                    <?php

                    $custom_field_group=get_post_meta($post->ID,'pxlr-client-custom-data');
                    $i=0;

                    for($i=0;$i<=3;$i++){
                        $custom_field='';
                    }


                    ?>

                    <li>
                        <span class="achievement-count"><?php echo $custom_field_group[0][0]['pxlr-custom-field-value'] ?></span>
                        <span class="text-uppercase"><?php echo $custom_field_group[0][0]['pxlr-custom-field-title'] ?></span>
                    </li>
                    <li>
                        <span class="achievement-count"><?php echo $custom_field_group[0][1]['pxlr-custom-field-value'] ?></span>
                        <span class="text-uppercase"><?php echo $custom_field_group[0][1]['pxlr-custom-field-title'] ?></span>
                    </li>
                    <li>
                        <span class="achievement-count"><?php echo $custom_field_group[0][2]['pxlr-custom-field-value'] ?></span>
                        <span class="text-uppercase"><?php echo $custom_field_group[0][2]['pxlr-custom-field-title'] ?></span>
                    </li>
                </ul>
            </div>

        </div>

    </div>
    <?php wp_reset_postdata(); ?>
</div>

<?php

        return ob_get_clean();

    }

} // End Element Class

If you want to make visual composer Shortcode View which will be visible at frontend then you must have to write your html part with the attribute value. Just make sure about the markup and layout.

make visual composer shortcode frontend
make visual composer shortcode frontend

After that just declare your class as like bellow

// Element Class Init
new ClientInfoBox();

make sure to replace post type otherwise it will give you error. I had made it according to my need. Just replace post type and others according to your need.
If you want to  make visual composer Shortcode with great option panel then you should check all available field of visual-composer here.
If you like to know about How to change Background image for your WordPress website I will recommended you the following article.

Leave a Reply