Help With Custom Image and Text Widget

I recently got into making a custom WordPress theme and I've learned a lot along the way, but I've hit a roadblock with making a custom widget.This is the basic output HTML I'd like my widget to output:

div class="work-column"
   img src="images/hero.jpg" class="ui image"
     div class="info"
          pRihana spanDigital/span/p
     /div
     a href="project.html"/a
/div 

So it looks like this:

I got some of it down I got the basics of the widget form in the back-end, by looking into a quite a few tutorial, but most of them relate text widgets. Basically I have to admit I don't know how to add image upload and a make it so that the image links to something.

This is the widget back-end now:

This is the widget output currently:

Here's the widget code I've been messing around with:

?php

class my_plugin extends WP_Widget
{

    // constructor
    public function my_plugin()
    {
        parent::WP_Widget(false, $name = __('My Image Widget', 'wp_widget_plugin'));

    }

// widget form creation
    public function form($instance)
    {

// Check values
        if ($instance) {
            $textarea = $instance['textarea'];
        } else {
            $textarea = '';
        }
        ?

p
label for="?php echo $this-get_field_id('textarea'); ?"?php _e('Description:', 'wp_widget_plugin');?/label
textarea class="widefat" id="?php echo $this-get_field_id('textarea'); ?" name="?php echo $this-get_field_name('textarea'); ?" rows="1" cols="1" ?php echo $textarea; ?/textarea
/p

?php
}

    public function update($new_instance, $old_instance)
    {
        $instance = $old_instance;
        // Fields
        $instance['textarea'] = strip_tags($new_instance['textarea']);
        return $instance;
    }

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

        // these are the widget options
        $textarea = $instance['textarea'];
        echo $before_widget;

        // Display the widget

        // Check if textarea is set
        echo 'div class="info"';
        if ($textarea) {
            echo 'pspan' . $textarea . '/span/p';
        }
        echo '/div';
        echo $after_widget;
    }
}

// register widget
add_action('widgets_init', create_function('', 'return register_widget("my_plugin");'));
?

As a WordPress newbie, I'd be very grateful if someone could give me some pointers, thanks.

Topic widget-text images widgets links Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.