Custom widget for popular posts/latest posts/posts from custom post type

codestar-options.php

<?php if ( ! defined( 'ABSPATH' ) ) { die; }

function mydeals_theme_shortcode_options($options){
    $options = array(); 
}
add_filter('cs_shortcode_options', 'mydeals_theme_shortcode_options');

function mydeals_theme_customizer($options){
    $options = array(); 
}
add_filter('cs_customize_options', 'mydeals_theme_customizer');

// MyDeals Theme Options
function mydeals_option_settings($settings){
    $settings = array();
    $settings           = array(
        'menu_title'      => esc_html__('MyDeals Setting','mydeals'),
        'menu_type'       => 'theme',
        'menu_slug'       => esc_html__('mydeals-theme-options','mydeals'),
        'ajax_save'       => true,
        'show_reset_all'  => true,
        'framework_title' => esc_html__('MyDeals by Humayun Ahmed','mydeals'),
    );
    return $settings;
}
add_filter('cs_framework_settings', 'mydeals_option_settings');

// Deals Post Type and Page Meta Options
function mydeals_post_or_page_metabox($options){
  $options      = array(); 
  $options[]    = array(
    'id'        => 'mydeals_deal_options',
    'title'     => esc_html__('Deals Setting','mydeals'),
    'post_type' => 'deal',
    'context'   => 'normal',
    'priority'  => 'high',
    'sections'  => array(
    array(
      'name'  => 'mydeals_deal_options_meta',
      'icon'  => 'fa fa-cog',
      'fields' => array(
          array(
            'id'      => 'regular_price',
            'type'    => 'text',
            'title'   => esc_html__('Regular Deal Price', 'mydeals'),
            'desc'    => esc_html__('Add regular or previous price of deals. set 0 for leave blank.', 'mydeals'),
          ),
          array(
            'id'      => 'discount_price',
            'type'    => 'text',
            'title'   => esc_html__('Discount Deal Price', 'mydeals'),
            'desc'    => esc_html__('Add discount or current price of deals, set 0 for free products.', 'mydeals'),
          ),
          array(
            'id'      => 'deals_purchase_button_title',
            'type'    => 'text',
            'title'   => esc_html__('Deals Purchase Button Title', 'mydeals'),
            'desc'    => esc_html__('Change Deals Purchase Button Title.', 'mydeals'),
            'default' => esc_html__('Buy Now','mydeals'),
          ),
          array(
            'id'      => 'deals_purchase_link_type',
            'type'    => 'select',
            'title'   => esc_html__('Link Type of Deals','mydeals'),
            'options' => array(
                '1'   => esc_html__('Existing Page','mydeals'),
                '2'   => esc_html__('External Link','mydeals'),
            ),
            'default' => 2,
            'desc'    => esc_html__('Select types of link. Existing page for WordPress pages and External link for create custom link', 'mydeals'),				    
          ),
          array(
            'id'          => 'deals_link_to_page',
            'type'        => 'select',
            'title'       => esc_html__('Select Existing WordPress Pages','mydeals'),
            'options'     => 'page', 
            'dependency'  => array( 'deals_purchase_link_type', '==', '1' ),	
            'desc'        => esc_html__('Select existing WordPress pages that have already been created. It will be open same tab.', 'mydeals'),	    
          ),
          array(
            'id'          => 'deals_link_to_external',
            'type'        => 'text',
            'title'       => esc_html__('Type External URL','mydeals'),
            'dependency'  => array( 'deals_purchase_link_type', '==', '2' ),
            'default'     => esc_html__('#','mydeals'),
            'desc'        => esc_html__('Type custom deals URL. It will be open new tab.', 'mydeals'),	    
          ),
          array(
            'id'              => 'deals_discount_block',
            'type'            => 'group',
            'title'           => esc_html__('Discount Block','mydeals'),
            'desc'            => esc_html__('Type discount block here. Example: 100% Money Back Guarantee or Limited Time Only.', 'mydeals'),
            'button_title'    => 'Add New Block',
            'accordion_title' => esc_html__('Add New Discount Block','mydeals'),
            'fields'          => array( 
              array(
                'id'      => 'discount_block_title',
                'type'    => 'text',
                'title'   => esc_html__('Block Title','mydeals'),
                'default' => esc_html__('100% Money Back Guarantee','mydeals'),
              ),
              array(
                'id'      => 'discount_block_subtitle',
                'type'    => 'text',
                'title'   => esc_html__('Block Sub Title','mydeals'),
                'default' => esc_html__('(within 30 days of purchase)','mydeals'),
              ),
            ),
          ),
          array(
            'id'      => 'deals_contributor_name',
            'type'    => 'text',
            'title'   => esc_html__('Deals Provider Name', 'mydeals'),
            'desc'    => esc_html__('Type deals author name here.', 'mydeals'),
            'default' => esc_html__('Software Lifetime','mydeals'),
          ),
          array(
            'id'      => 'deals_contributor_link',
            'type'    => 'text',
            'title'   => esc_html__('Deals Provider Link', 'mydeals'),
            'desc'    => esc_html__('Type deals author URL here.', 'mydeals'),
            'default' => esc_html__('#','mydeals'),
          ),
        ), 
      ), 
    ),
  );
  return $options;
}
add_filter( 'cs_metabox_options', 'mydeals_post_or_page_metabox' );

custom-widgets.css

/* Colors */
:root {
  --primary-color: #f05328;
  --secondary-color: #906694;
  --text-color: #393939;
  --text-color-soft: #999;
  --color-black: #000;
  --color-white: #fff;
  --border-color: #dedede;
  --border-color-soft: #f2f6ff;
  --border-color-light: #f3f3f3;
}


/* Popular Deals Widget */
.deals-widget-wrapper {
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  background: var(--color-white);
  border: 1px solid var(--border-color);
}
.deals-widget-wrapper .deals-widget-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.deals-widget-wrapper .deals-widget-title {
  font-size: 14px;
  color: var(--secondary-color);
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.deals-widget-wrapper .deals-widget-title .show-more-btn {
  color: var(--primary-color);
}
.deals-widget-wrapper .deals-widget-title .show-more-btn:hover {
  text-decoration: underline;
}
.deals-widget-wrapper .deals-widget-content .single-deals-block {
  margin-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color-light);
  overflow: hidden;
}
.deals-widget-wrapper .deals-widget-content .single-deals-block:last-child {
  border: 0;
  padding-bottom: 0;
}
.deals-widget-wrapper .deals-widget-content .single-deals-block a {
  display: block;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.deals-widget-wrapper .deals-widget-content .single-deals-block img {
  float: left;
  width: 70px;
  height: auto;
  margin-right: 10px;
  height: 63px;
  border-radius: 5px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left top;
  object-position: left top;
}
.deals-widget-wrapper .deals-widget-content .single-deals-block .deals-content {
  display: block;
  margin-left: 80px;
  margin-right: 30px;
}
.deals-widget-wrapper
  .deals-widget-content
  .single-deals-block
  .deals-price-wrap {
  float: right;
  font-size: 16px;
  margin-left: 5px;
  color: var(--primary-color);
  text-align: right;
  font-weight: 700;
}
.deals-widget-wrapper
  .deals-widget-content
  .single-deals-block
  .deals-price-wrap
  .deals-price-reg {
  font-size: 12px;
  display: block;
  color: var(--text-color-soft);
  text-decoration: line-through;
  font-weight: 400;
}
.deals-widget-wrapper
  .deals-widget-content
  .single-deals-block
  .deals-content
  .deals-title {
  color: var(--text-color);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  display: block;
}
.deals-widget-wrapper
  .deals-widget-content
  .single-deals-block
  .deals-content
  .deals-author {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-color-soft);
}
.deals-widget-wrapper
  .deals-widget-content
  .single-deals-block
  a:hover
  .deals-title {
  text-decoration: underline;
}

custom-widgets.php

<?php 
// Custom Widget for Popular Posts or Latest Posts

class Popular_Deals extends WP_Widget {
	function __construct() {
		parent::__construct(
			'popular-deals',  // Base ID
			'Popular Deals',  // Name
			array( 'description' => __( 'Show popular deals here' ), ) 
		);
		add_action( 'widgets_init', function() {
			register_widget( 'Popular_Deals' );
		});
  	}

	// public $arg = array(
	// 	'before_title'  => '<h4 class="deals-widget-title">',
	// 	'after_title'   => '</h4>',
	// 	'before_widget' => '<div class="deals-widget-wrapper">',
	// 	'after_widget'  => '</div>'
    // );

	public function widget( $arg, $instance ) {
        echo $arg['before_widget'];

		// Query for post type
		$args = array(  
			'post_type' => 'deal',
			'post_status' => 'publish',
			'posts_per_page'   => $instance['count'],
			'tax_query' => array(
				array(
					'taxonomy'         => 'deal_cat', 
					'field'            => 'slug', 
					'terms'            => 'popular-deals',
				)
			), 
		);
		$query = new WP_Query( $args );

		if ( ! empty( $instance['title'] ) ) {
            echo $arg['before_title'] ?>
		
			<?php echo apply_filters( 'widget_title', $instance['title'] ) ?>
			<a href="<?php echo esc_html__( $instance['see_all_link'], 'mydeals' ); ?>" class="show-more-btn"><?php echo esc_html__( $instance['see_all'], 'mydeals' ); ?></a> 
			
			<?php echo $arg['after_title'];
        }
		
        echo '<div class="deals-widget-content">';

			while($query->have_posts()) {
				$query->the_post(); 
				
				$idd = get_the_ID();
				if (get_post_meta( $idd,'mydeals_deal_options',true)) {
					$deals_meta = get_post_meta( $idd,'mydeals_deal_options',true);
				}else{
					$deals_meta = array();
				}
				if (array_key_exists('discount_price', $deals_meta)) {
					$discount_price = $deals_meta['discount_price'];
				}else{
					$discount_price = '';
				}
				if (array_key_exists('regular_price', $deals_meta)) {
					$regular_price = $deals_meta['regular_price'];
				}else{
					$regular_price = '';
				}
				
				$idd = get_the_ID();
				if (get_post_meta( $idd,'mydeals_deal_options',true)) {
					$deals_meta = get_post_meta( $idd,'mydeals_deal_options',true);
				}else{
					$deals_meta = array();
				}
				
				?>
				<div class="single-deals-block">
					<a href="<?php the_permalink(); ?>">
						<?php if( has_post_thumbnail() ) : ?>
						<div class="deals-thumb">
							<?php the_post_thumbnail('thumbnail'); ?>
						</div>
						<?php else : ?>
						<div class="deals-thumb">
							<img src="<?php bloginfo('template_directory'); ?>/assets/img/blog-placeholder.png" alt="<?php the_title(); ?>" />
						</div>
						<?php endif; ?>
						<span class="deals-price-wrap">
							<span>$<?php echo esc_html($discount_price); ?></span>
							<?php if(!empty($regular_price)) : ?>
								<span class="deals-price-reg">$<?php echo esc_html($regular_price); ?></span>
							<?php endif; ?>
						</span>
						<span class="deals-content">
							<?php the_title( '<span class="deals-title">','</span>' ); ?>
						</span>	
					</a>
				</div>
			<?php 
			}
			
        echo '</div>';
        echo $arg['after_widget'];
    }

	 public function form( $instance ) {
   
        $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( '', 'mydeals' );
        $count = ! empty( $instance['count'] ) ? $instance['count'] : esc_html__( '', 'mydeals' );
        $see_all = ! empty( $instance['see_all'] ) ? $instance['see_all'] : esc_html__( '', 'mydeals' );
        $see_all_link = ! empty( $instance['see_all_link'] ) ? $instance['see_all_link'] : esc_html__( '', 'mydeals' );
        // $order = ! empty( $instance['order'] ) ? $instance['order'] : esc_html__( '', 'mydeals' );
        ?>
        
        <!-- Posts title label -->
        <p> 
          <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php echo esc_html__( 'Deals Title:', 'mydeals' ); ?></label>
          <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>

        <!-- Posts count label -->
        <p>
          <label for="<?php echo esc_attr( $this->get_field_id( 'count' ) ); ?>"><?php echo esc_html__( 'Deals Count:', 'mydeals' ); ?></label>
          <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'count' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'count' ) ); ?>" type="text" value="<?php echo esc_attr( $count ); ?>">
        </p>

        <!-- See all posts button text label -->
        <p>
          <label for="<?php echo esc_attr( $this->get_field_id( 'see_all' ) ); ?>"><?php echo esc_html__( 'See All Button Label:', 'mydeals' ); ?></label>
          <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'see_all' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'see_all' ) ); ?>" type="text" value="<?php echo esc_attr( $see_all ); ?>">
        </p>

        <!-- See all posts button link label -->
        <p>
          <label for="<?php echo esc_attr( $this->get_field_id( 'see_all_link' ) ); ?>"><?php echo esc_html__( 'See All Button Link:', 'mydeals' ); ?></label>
          <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'see_all_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'see_all_link' ) ); ?>" type="text" value="<?php echo esc_attr( $see_all_link ); ?>">
        </p>

        <!-- Posts order select dropdown label -->
        <!-- 
        <p>
          <label for="<?php //echo esc_attr( $this->get_field_id( 'order' ) ); ?>"><?php //echo esc_html__( 'Order', 'mydeals' ); ?></label>
          <select class="widefat" type="text" name="<?php //echo esc_attr( $this->get_field_name( 'order' ) ); ?>" id="<?php //echo esc_attr( $this->get_field_id( 'order' ) ); ?>">
            <option value="'DESC'<?php //echo ($order=='DESC') ? 'selected' : ''; ?>">DESC</option>
            <option value="'ASC'<?php //echo ($order=='ASC') ? 'selected' : ''; ?>">ASC</option>
          </select>
        </p> 
        -->
        
        <?php
    }
}
$popular_deals = new Popular_Deals();

register-widgets.php

<?php 
function mydeals_widget_areas() {
    register_sidebar( array(
            'name'          => esc_html__( 'Deals Sidebar', 'mydeals' ),
            'id'            => 'deals-sidebar',
            'description'   => esc_html__( 'Add deals widgets here.', 'mydeals' ),
            'before_widget' => '<div id="%1$s" class="deals-widget-wrapper widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h4 class="deals-widget-title">',
            'after_title'   => '</h4>',
        ) 
    );
}
add_action('widgets_init', 'mydeals_widget_areas');

Output is here...

Custom Widget is here...