REDO JSComposer Additional – plugin adding widget to WPBakery

In this article we will create a new widget for the previously created plugin, which you will learn about from the previous article: Creating your own plugin that adds a widget to the WPBakery plugin

Let’s assume that we would like to specify a view that will display in a certain way, anywhere on the page for a particular post type and with the fields selected. Additionally, the whole thing is to be compatible with WPBakery Page Puilder plugin. For this purpose we will use the REDO JSComposer Additional plugin created in the previous entry.

How to create a plugin adding a widget to WPBakery that displays selected Custom Posts ?

Let’s get down to business.

Go to the folder with our plugin – redo-jscomposer-additional – then go to the folder – widgets – and create a new .php file, which we will call custom-post-widget.php..

Now, as in the previous post, we are creating the basic framework of our widget. For this purpose we will use the previously created widget projects and copy what we need.

We leave a path to access the files ABSPATH, rename the inheriting class to WPBakeryShortCode_customPostWidget. Leave the $args table and query WP_Query and query vc_map(). Everything must be configured correctly.

Below is an empty skeleton of our widget configured to write our new plugin.

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}
class WPBakeryShortCode_customPostWidget extends WPBakeryShortCode
{

    protected function content()
    {

            $args = array(
                'post_type' => '',
                'posts_per_page' => -1,
                'orderby' => 'date'
            );

            $typ_posta = new WP_Query($args);

            ob_start(); ?>

                <!-- HTML DESIGN HERE -->
                
                    <?php while ($typ_posta->have_posts()) :  $typ_posta->the_post(); ?>
                    <!-- Wyświetlanie pól posta tutaj -->
                    <?php endwhile; ?>
            </div>
                <!-- HTML END DESIGN HERE -->
            <?php
            return ob_get_clean();
    }
}


    vc_map( array(
        "name" 			=> __( 'Custom Post Widget', 'custom_post_widget' ),
        "base" 			=> "custom_post_widget",
        "category" 		=> __('REDO JSComposer Additional'),
        "description" 	=> __('Display view for Custom Post Type'),
        "icon" => plugin_dir_url( __FILE__ ).'../images/eye-icon.png'
    ) );