WpBakery shortcode for outputting records. WordPress OOP example

Let’s create our new class and name it class-myposts-wpbakery.php
We suggest you place the created file in the folder yourpluginname/inc/

File code:

<?php
class WPBakery_myPosts_Shortcodes { //create new class

    // protected $aleProperty_Template;

    function __construct(){ //create construct for class

        add_action('init',[$this,'create_shortcode']);
        
        add_shortcode('mypost_shortcode',[$this,'render_shortcode']); //register our shortcode
    }

    public function create_shortcode(){ //admin part
        if(function_exists('vc_map')){ //function for create fields. Available fields - https://kb.wpbakery.com/docs/inner-api/vc_map/
            vc_map(array(
                'name' => 'List Properties', //widget name
                'base' => 'mypost_shortcode', //shortcode id from function add_shortcode
                'description' => 'Best Shortcode', 
                'category' => 'Test category',
                'params' => array( //array of fields
                    array( //the name of our widget
                        'type' => 'textfield',
                        'heading' => 'Title',
                        'param_name' => 'title',//id
                        'value'=> '',//defaul value
                        'description' => 'Insert the title',
                    ),
                    array( //number of records to output
                        'type' => 'textfield',
                        'heading' => 'Count',
                        'param_name' => 'count',
                        'value'=> '',
                        'description' => 'Insert the count',
                    )
                ),
            ));


            vc_map(array(
                'name' => 'Filter',
                'base' => 'aleproperty_filter',
                'description' => 'Filter Shortcode',
                'category' => 'aleProperty',
                'params' => array(
                    
                    array(
                        'type' => 'textfield',
                        'heading' => 'Location',
                        'param_name' => 'location',
                        'description' => 'Paste 1 to show or 0 to hide',
                    ),
                    array(
                        'type' => 'textfield',
                        'heading' => 'Type',
                        'param_name' => 'type',
                        'description' => 'Paste 1 to show or 0 to hide',
                    ),
                    array(
                        'type' => 'textfield',
                        'heading' => 'Agent',
                        'param_name' => 'agent',
                        'description' => 'Paste 1 to show or 0 to hide',
                    )
                ),
            ));
        }
        
    }

    public function render_shortcode($atts,$content,$tag){ //frontend part
        $atts = (shortcode_atts(array(
            'title' => '', //extract data from base, output the default value
            'count' => '5'
        ),
        $atts));


        $args = array(
            'post_type' => 'posts',//post type, you can change
            'posts_per_page' => $atts['count'],
        );

        $properties = new WP_Query($args);


        echo '<div class="wrapper archive_property">';

        if ( $properties->have_posts() ) {

            // Load posts loop.
            while ( $properties->have_posts() ) {
                $properties->the_post(); 

               echo the_title();
            
            }
        }

        echo '</div>';

        //return $html;
    }
}

new WPBakery_myPosts_Shortcodes(); //create instance

In the main file of your template yourpluginname.php attach the file you created

require plugin_dir_path(__FILE__) . 'inc/class-myposts-wpbakery.php';