Follow these steps to create a new widget and add it to the Widgets section:

1. Open the wp-content/themes/twentytwentychild folder of your WordPress installation and open the functions.php file.
2. Add the following code at the end to define the basic structure of a widget:

class WP_Widget_Product_Pages extends WP_Widget {
 public function __construct() {
 $widget_ops = array(
 'classname' => 'widget_product_pages',
 'description' => __( 'Pages with Product Landing Page Template.' 
 ),
 );
 parent::__construct( 'product-pages', __( 'Product Pages' ), 
 $widget_ops );
 }
 public function form( $instance ) {
 // Code in Step 3 should be added in the next line

 }
 public function widget( $args, $instance ) { 
 // Code in Step 4 should be added in the next line

 }
 public function update( $new_instance, $old_instance ) { 
 // Code in Step 5 should be added in the next line

 } 
}

3. Add the following code inside the form function to display the settings for the widget:

$title = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
$number = isset( $instance['number'] ) ? absint( $instance['number'] ) : 5;
?>

<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo $title; ?>" /></p>

<p><label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e( 'Number of posts to show:' ); ?></label>
<input class="tiny-text" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="number" step="1" min="1" value="<?php echo $number; ?>" size="3" /></p>

<?php

4. Add the following code inside the widget function to display the output of the widget in the frontend of the site:

$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Product Pages' );
$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;

$query = new WP_Query(
 array(
 'posts_per_page' => $number,
 'post_status' => 'publish',
 'post_type' => 'page',
 'meta_key' => '_wp_page_template',
 'meta_value' => 'product.php'
 ) );
if ( ! $query->have_posts() ) {
 return;
}
?>

<?php echo $args['before_widget']; ?>
<?php
if ( $title ) {
 echo $args['before_title'] . $title . $args['after_title'];
}
?>

<ul>
 <?php foreach ( $query->posts as $product_page ) : ?>
 <?php
 $post_title = get_the_title( $product_page->ID );
 $title = ( ! empty( $post_title ) ) ? $post_title : __( '(no  
  title)' );
 ?>
 <li>
 <a href="<?php the_permalink( $product_page->ID ); ?>"><?php echo 
  $title; ?></a>
 </li>
 <?php endforeach; ?>
</ul>

<?php
echo $args['after_widget'];

5. Add the following code inside the update function to save/update the widget settings to the database:

$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
$instance['number'] = (int) $new_instance['number'];
return $instance;

Now, the widget has been created in the functions.php file of the theme in order to display a list of pages with product.php as the page template. However, we need to register it before we can use it.

Follow these steps to register and display the widget:

1. Add the following code to the end of the functions.php file of the Twenty Twenty child theme:

function wpccp_chapter3_register_widgets() {
  register_widget( 'WP_Widget_Product_Pages' );
}
add_action( 'widgets_init', 'wpccp_chapter3_register_widgets' );

2. Log in to the WordPress Dashboard as an administrator.
3. Click the Appearance menu.
4. Click the Widgets option.

5. Find the Product Pages widget in the Available Widgets section, as shown in the following screenshot:

6. Drag the widget and drop it onto the start of the Footer #2 widget area.

Now, we can view the home page of the site and see the Product Pages widget in the footer as shown in the following screenshot.

The widget displays a list of pages that used product.php as the page template.