1

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>
     </div>
     <a href="project.html"></a>
</div> 

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:

<?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 '<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.

4
  • 2
    Possible duplicate of Create Image Uploader for Widget Commented Aug 22, 2018 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
    Commented Aug 22, 2018 at 6:30
  • So, you recommend to go with a custom post type? Commented Aug 22, 2018 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
    Commented Aug 25, 2018 at 20:48

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.