How to make wpbakery addons plugin in wordpress

How to make wpbakery add-ons plugin in wordpress

Fist of all you have to need a create a folder of your wp plugins folder.

Like name "youtube-carousel"

Must be small character in a folder name.

2ndly create a file in your folder

Like 'index.php' or you can choose yourself. The stracture is 'wp-content/plugins/youtube-carousel/index.php'

Open 'index.php' and write this code.

<?php
/*
Plugin Name: Video Carousel By Shahin
Plugin URI: #
Description: Upload videos gallery with WPBakary
Version: 1.0
Author: Md. Shahinur Islam
Author URI: https://profiles.wordpress.org/shahinurislam
*/

Refresh plugins directory you can see your plugin.
 

Create This function like:

function video_carousel_integrateWithVC() {
 //card-sections
 vc_map(array(
    'name'   => esc_html__('Video Carousel', 'neymar'),
    'description' => esc_html__('Video Carousel Section', 'neymar'),
    'base'   => 'video_carousel_section',
    'category'  => esc_html__('Card-23', 'neymar'),
    'icon'   => get_template_directory_uri(). '/assets/images/icon.png',
    'params'        =>
        array(
            array(
                'type'             => 'param_group',
                'heading'        => esc_html__('Video Carousel', 'neymar'),
                'param_name'     => 'video_group_item',
                'group'            => esc_html__('Items', 'neymar'),
                // Note params is mapped inside param-group:
                'params'  =>
                    array(
                        array(
                        'type' => 'textfield',
                        'holder' => 'div',
                        'heading' => __( 'Youtube Title', 'js_composer' ),
                        'param_name' => 'youtube_url_title',
                        'value' => base64_encode( '' ),
                        'description' => __( 'youtube url title.', 'js_composer' ),
                
                       ),
                        array(
                        'type' => 'textfield',
                        'holder' => 'div',
                        'heading' => __( 'Youtube URL', 'js_composer' ),
                        'param_name' => 'youtube_url',
                        'value' => base64_encode( '' ),
                        'description' => __( 'youtube url.', 'js_composer' ),
                
                       ),
                       array(
                        "type"        => "attach_images",
                        "heading"     => esc_html__( "Thumbnail", "neymar" ),
                        "description" => esc_html__( "Add Image.", "neymar" ),
                        "param_name"  => "video_thumbnail_img",
                        "value"       => '',
                        ),
            
                )
               ),
)));
}
add_action( 'vc_before_init', 'video_carousel_integrateWithVC' );   


This function is make for addons on wpbakary.

You can make for front-end section. create a shortcode look like:

add_shortcode('video_carousel_section', 'video_carousel_sec');
function video_carousel_sec($attr, $content){
      extract(shortcode_atts(array(
       'youtube_url'     => '',
       'video_thumbnail_img'     => '',
       'video_group_item' => '',
       'youtube_url_title' => ''      
      ), $attr));
  ob_start(); ?>  
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.17/dist/css/splide.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.css'>   
    <style>   
    .page-width {
      max-width: 100%;
      margin: 0 auto;
    }

    .splide {
      max-width: 100%;
      margin: 0 auto;
    }
    .splide__slide img {
        max-width: 100%;
        border-radius: 15px;
    }
    .splide__arrow--prev {
      margin-left: -50px;
    }
    .splide__arrow--next {
      margin-right: -50px;
    }
    .splide__pagination {
      margin-bottom: -50px;
      border-radius: 10px;
      margin-right: 10px;
    }
    .splide__pagination__page.is-active {
        background: #f25726;
        width: 15px;
        border-radius: 10px;
        margin-right: 10px;
    }   
           
    .splide__slide .tv-siz .fa {
        position: absolute;
        margin: 0 auto;
        font-size: 6rem;
        color: #ffffff;
        background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
        background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: radial-gradient(ellipse at center,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        width: 100%;
        height:229px;
        text-align: center;
        padding-top: 17%;
        border-radius: 15px;
    }
           
        @media only screen and (max-width: 768px){   
        .splide__slide  {
        margin-right: 0.7rem;
        width: calc(((100% + 0.7rem) / 1) - 0.7rem);
        height: 23rem!important;
            }
        }
           
      .splide__slide p {
        text-align: left;
        padding-top: 13px;
        font-size: 18px;
        padding-left: 10px;
          color:#fff;
    }
    .splide__arrow {
        top: 35%!important;
    }
    </style>   
<!-- partial:index.partial.html -->
<div class="page-width">
    <section class="splide" aria-labelledby="carousel-heading">
        <div class="splide__track">
            <ul class="splide__list">
                <?php                        
                $analysis = vc_param_group_parse_atts($video_group_item);
                    if($analysis):                       
                        foreach($analysis as $analysis_value):
                ?>               
                <li class="splide__slide">
                    <a class="tv-siz" href="<?php echo esc_attr($analysis_value["youtube_url"]);?>" data-lity>
                        <?php
                        $analysis_img = wp_get_attachment_image_src($analysis_value['video_thumbnail_img'], 'full');
                        ?>
                        <i class="fa fa-play-circle"></i>
                        <img src="<?php echo esc_url($analysis_img[0]);?>" alt="Video Testimonial">
                    </a>
                    <p>
                        <?php echo esc_attr($analysis_value["youtube_url_title"]);?>
                    </p>
                </li>               
                <?php endforeach; endif;?>
            </ul>
        </div>
    </section>
</div>
<script src='https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.17/dist/js/splide.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js'>
</script>
<script>
var splide = new Splide(".splide", {
    autoplay: 6000,
    type: 'loop',
    perPage:4,
    gap: "2rem",
    breakpoints: {
        640: {
            perPage: 2,
            gap: ".7rem",
            height: "6rem"
        },
        480: {
            perPage: 1,
            gap: ".7rem",
            height: "6rem"
        }
    }
});
splide.mount();
</script>
<?php
  return ob_get_clean();
 } 

Finally Look like: