about-widgets.php

<?php

add_action('widgets_init','register_themeum_about_widget');

function register_themeum_about_widget()
{
    register_widget('Themeum_About_Widget');
}

class Themeum_About_Widget extends WP_Widget{

    public function __construct() {
        parent::__construct( 'Themeum_About_Widget', esc_html__("Themeum About Us Widgets",'personalblog'), array('description' => esc_html__("This About Us Widgets",'personalblog')) );
    }


    /*-------------------------------------------------------
     *              Front-end display of widget
     *-------------------------------------------------------*/

    public function widget( $args, $instance ) {
        extract( $args );

        # Our variables from the widget settings.
        $title = apply_filters('widget_title', $instance['title'] );

        echo $before_widget;

        if($instance['about_img1']) {
            echo '<img src="'. esc_url(get_site_url()) . $instance['about_img1'].'" class="img-responsive" alt="'.esc_html__('image','personalblog').'">';
        }

        if ( $title ) {
            echo $before_title . $title . $after_title;
        }

        if( isset($instance['about_text']) && $instance['about_text'] ) {
            echo '<div class="about-desc">'.$instance['about_text'].'</div>';
        }

        ?>

        <?php

        echo $after_widget;
    }


    /*-------------------------------------------------------
     *              Sanitize data, save and retrive
     *-------------------------------------------------------*/

    public function update( $new_instance, $old_instance ) {
        $instance = $old_instance;

        # Strip tags from title and name to remove HTML
        $instance['title']              = strip_tags( $new_instance['title'] );
        $instance['about_img1']         = $new_instance['about_img1'];
        $instance['about_text']         = $new_instance['about_text'];

        return $instance;
    }


    /*-------------------------------------------------------
     *              Back-End display of widget
     *-------------------------------------------------------*/

    public function form( $instance )
    {

        $defaults = array(
                'title'             => '',
                'about_img1'        => '',
                'about_text'        => '',
            );

        $instance = wp_parse_args( (array) $instance, $defaults );
       ?>

        <p>
            <label for="<?php echo esc_attr($this->get_field_id( 'about_img1' )); ?>"><?php esc_html_e( 'About Image URL', 'personalblog' ); ?></label>

            <input type="hidden" id="<?php echo $this->get_field_id('about_img1');?>" name="<?php echo $this->get_field_name('about_img1');?>" class="<?php echo $this->get_field_id('about_img1');?>" value="<?php echo $instance['about_img1']; ?>"/>
            <button id="<?php echo $this->get_field_id('about_img1');?>" class="custom-upload button" data-url="<?php echo esc_url(get_site_url()); ?>"><?php echo esc_html__('Upload image','personalblog'); ?></button>
            <img class="<?php echo $this->get_field_id('about_img1');?>" src="<?php echo esc_url(get_site_url()) . $instance['about_img1']; ?> "/>
        </p>

        <p>
            <label for="<?php echo esc_attr($this->get_field_id( 'title' )); ?>"><?php _e('Title :', 'personalblog'); ?></label>
            <input id="<?php echo esc_attr($this->get_field_id( 'title' )); ?>" name="<?php echo esc_attr($this->get_field_name( 'title' )); ?>" value="<?php echo esc_attr($instance['title']); ?>" style="width:100%;" />
        </p>

        <p>
            <label for="<?php echo esc_attr($this->get_field_id( 'about_text' )); ?>"><?php esc_html_e('About Text :', 'personalblog'); ?></label>
            <textarea class="widefat" id="<?php echo esc_attr($this->get_field_id('about_text'));?>" name="<?php echo esc_attr($this->get_field_name('about_text')); ?>" style="height:150px;"><?php echo esc_attr($instance['about_text']); ?></textarea>
        </p>


    <?php
    }
}

// .widget_themeum_about_widget img {
//     width: 146px;
//     height: 146px;
//     border-radius: 50%;
//     display: inline-block;
// }

// .widget_themeum_about_widget {
//     text-align: center;
// }