Creating a Wordpress widget - how to do it?

Question

PHP

Hello!
I want to add new widgets to the widgets already in WP.
You need two widgets:

1. Widget for displaying the latest posts with a thumbnail and a quote of the post;
   
2. Widget for displaying small news with a picture.
   

I decided to create these widgets based on the widgets available in WP, these are the last posts output widgets and the text widget. It turned out to make it so that the recent posts widget would display not only the title of the posts, but also their thumbnails and a quote. I want to make it so that the user himself could set the length of the quote. It turned out to create a text field with the value of the quote length by default. So, the problem is that when I enter a different number than the default number, it changes, but when I try to save the changes, the number becomes the default again.
Here is the appearance of the widget on the site and in the admin panel:

Here is the widget code:

<?php
 
class My_Recent_Posts extends WP_Widget {
 
    public function __construct() {
        $widget_ops = array(
            'description' => "Последние записи с миниатюрой и цитатой."
        );
        parent::__construct( 'recent-posts', 'Последние записи с миниатюрой', $widget_ops );
        $this->alt_option_name = 'widget_recent_entries';
    }
 
    // Отоброжение виджета на сайте
    public function widget( $args, $instance ) {
        if ( !isset( $args['widget_id'] ) ) {
            $args['widget_id'] = $this->id;
        }
 
        $title = (!empty( $instance['title'] ) ) ? $instance['title'] : '';
 
        /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
        $title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
 
        $number = (!empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
        if ( !$number )
            $number = 5;
        $show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;
        // Длина поста
        $post_length = (!empty( $instance['post_length'] ) ) ? absint( $instance['post_length'] ) : 200;
 
        // Выбор последних постов
        $r = new WP_Query( apply_filters( 'widget_posts_args', array(
                    'posts_per_page' => $number,
                    'no_found_rows' => true,
                    'post_status' => 'publish',
                    'ignore_sticky_posts' => true
                ) ) );
 
        if ( $r->have_posts() ) :
            ?>
            <?php echo $args['before_widget']; ?>
            <?php
            if ( $title ) {
                echo $args['before_title'] . $title . $args['after_title'];
            }
            ?>
            <ul class="divided">
                <?php while ( $r->have_posts() ) : $r->the_post(); ?>
                    <li>
                        <article class="box highlight">
                            <header>
                                <h3><a href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a></h3>
                                <a href="<?php the_permalink(); ?>" class="image left"><?php the_post_thumbnail( 'strongly-min' ); ?></a>
                                <p><?php
                                    // Вывод поста
                                    echo mb_substr( strip_tags( get_the_content() ), 0, $post_length );
                                    ?>
                                </p>
                                <?php if ( $show_date ) : ?>
                                    <span class="post-date"><?php echo get_the_date(); ?></span>
                <?php endif; ?>
                                <ul class="actions">
                                    <li><a href="<?php the_permalink(); ?>" class="button icon fa-file">Читать далее...</a></li>
                                </ul>
 
                        </article>
                    </li>
            <?php endwhile; ?>
            </ul>
            <?php echo $args['after_widget']; ?>
            <?php
            // Reset the global $the_post as this query will have stomped on it
            wp_reset_postdata();
 
        endif;
    }
 
    // Обновление данных
    public function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['title'] = sanitize_text_field( $new_instance['title'] );
        $instance['number'] = (int) $new_instance['number'];
        // Обновление значения длины поста
        $instance['post_length'] = (int) $new_instance['post_length'];
        $instance['show_date'] = isset( $new_instance['show_date'] ) ? (bool) $new_instance['show_date'] : false;
        return $instance;
    }
 
    // Отображение виджета в админке
    public function form( $instance ) {
        $title = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
        $number = isset( $instance['number'] ) ? absint( $instance['number'] ) : 5;
        $post_length = isset( $instance['post_length'] ) ? absint( $instance['post_length'] ) : 200;
        $show_date = isset( $instance['show_date'] ) ? (bool) $instance['show_date'] : false;
        ?>
        <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>
 
        <p><input class="checkbox" type="checkbox"<?php checked( $show_date ); ?> id="<?php echo $this->get_field_id( 'show_date' ); ?>" name="<?php echo $this->get_field_name( 'show_date' ); ?>" />
            <label for="<?php echo $this->get_field_id( 'show_date' ); ?>"><?php _e( 'Display post date?' ); ?></label></p>
 
        <!--Текстовое поле для ввода длины поста-->
        <p><label for="<?php echo $this->get_field_id( 'post_length' ); ?>"><?php _e( 'Длина поста:' ); ?></label>
            <input class="" id="<?php echo $this->get_field_id( 'post_length' ); ?>" name="<?php echo $this->get_field_name( 'post_length' ); ?>" type="number" step="1" min="1" value="<?php echo $post_length; ?>" size="3" /></p>
        <?php
    }
 
}
 
function top_posts_widget() {
    register_widget( 'My_Recent_Posts' );
}
 
add_action( 'widgets_init', 'top_posts_widget' );

How to be and what to do? Where is the mistake? Tell me please.
For the second widget.
How to add a button to a text widget that will open a media file selection window from the WP library? I want to add small news/notes with a picture. What would be displayed on the site is almost the same as the last posts with a thumbnail and a quote, only without the button "Read more ..."

Answer 1

well, the code is of course poorly readable, but as I saw the html there is not the topic in the php code, I can write to the variable or <