How to Create a Recent Posts Widget in WordPress with Code (Step-by-Step Guide)

function custom_recent_posts_widget() {
    register_widget( 'Custom_Recent_Posts_Widget' );
}
add_action( 'widgets_init', 'custom_recent_posts_widget' );

class Custom_Recent_Posts_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'custom_recent_posts_widget',
            __('Custom Recent Posts', 'text_domain'),
            array( 'description' => __( 'Displays recent blog posts.', 'text_domain' ) )
        );
    }

    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
        }

        $recent_posts = new WP_Query( array(
            'posts_per_page' => 5,
            'post_status'    => 'publish',
        ) );

        if ( $recent_posts->have_posts() ) {
            echo '<ul>';
            while ( $recent_posts->have_posts() ) {
                $recent_posts->the_post();
                echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            }
            echo '</ul>';
            wp_reset_postdata();
        }

        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Recent Posts', 'text_domain' );
        ?>
        <p>
            <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">
                <?php esc_attr_e( 'Title:', 'text_domain' ); ?>
            </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>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = sanitize_text_field( $new_instance['title'] );
        return $instance;
    }
}

.custom_recent_posts_widget ul {
  padding-left: 20px;
}

.custom_recent_posts_widget ul li {
  margin-bottom: 10px;
}