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">
          <p>Rihana <span>Digital</span></p>
     <a href="project.html"></a>

So it looks like this: enter image description here

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 back-end now

This is the widget output currently: this is the widget output currently

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


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 = '';

<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>


    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)

        // 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 '<p><span>' . $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.

  • 2
    Possible duplicate of Create Image Uploader for Widget – Jacob Peattie Aug 22 '18 at 2:00
  • 1
    I believe the approach of using widgets for this is not a good idea. Widgets don't really scale, the interface isn't very practical for handling a large number. It would seem much better if each "project" in your site is some actual WordPress content – a Post, or a Jetpack Portfolio item. Then you can use the Featured image to upload the image. You can have a look at the code of Argent, to see an example (Portfolio template): argentdemo.wordpress.com/portfolio – Manu Aug 22 '18 at 6:30
  • So, you recommend to go with a custom post type? – Mirza Sisic Aug 22 '18 at 21:19
  • Yes, I would use either regular Posts, or a custom Portfolio post type. Depends if you want to use the Posts for something else, such as a blog. A smart option would be to use the Jetpack Portfolio post type, provided by the Jetpack plugin. This has the benefit that your content is compatible with many other themes. If 5 years later you want to switch to a new theme, you can do it easily... – Manu Aug 25 '18 at 20:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.