1

I need to create a simple widget that has a text input field.

I need the widget to create the markup below...

<div class="textwidget">
    <div class="avatar"> 
        <div class="avatartext"> 
            <p>CONTENTS OF THE TEXT INPUT HERE</p>
        </div> 
    <div class="avatarimage"></div> 
</div> 

I've started the process of stubbing out the widget with the code below. I'm just not shure how to code the my_avatar() function...

function my_avatar()
{
//Widget markup goes here. How to pull the widget text entry?

}

register_activation_hook(__FILE__, 'my_avatar');

class My_Widget_Avatar extends WP_Widget {
    function My_Widget_Avatar() {
        $widget_ops = array( 'classname' => 'widget_avatar', 'description' => __( "My Avatar Widget" ) );
        $this->WP_Widget('my_avatar', __('My Avatar'), $widget_ops);
    }
}

add_action('widgets_init', create_function('', "register_widget('My_Widget_Avatar');"));

1 Answer 1

4

Complete code:

class My_Widget_Avatar extends WP_Widget {
    function My_Widget_Avatar() {
        $widget_ops = array( 'classname' => 'widget_avatar', 'description' => __( "My Avatar Widget" ) );
        $this->WP_Widget('my_avatar', __('My Avatar'), $widget_ops);
    }

    function widget( $args, $instance ) {
        extract($args);
        $text = apply_filters( 'widget_text', $instance['text'], $instance );
        echo $before_widget;
        ?>
            <div class="textwidget">
                <div class="avatar"> 
                    <div class="avatartext">
                        <p><?php echo $text; ?></p>
                    </div>
                </div>
                <div class="avatarimage"></div> 
            </div> 
        <?php
        echo $after_widget;
    }

    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        if ( current_user_can('unfiltered_html') )
            $instance['text'] =  $new_instance['text'];
        else
            $instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) ); // wp_filter_post_kses() expects slashed
        return $instance;
    }

    function form( $instance ) {
        $instance = wp_parse_args( (array) $instance, array( 'text' => '' ) );
        $text = format_to_edit($instance['text']);
?>

        <textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>
<?php
    }
}


function lbi_widgets_init() {
    register_widget( 'My_Widget_Avatar' );
}
add_action( 'widgets_init', 'lbi_widgets_init' );
3
  • Wow, thanks Sorich. Great job. Only problem I found is that the container div (widget_avatar) is missing its closing div tag. Where should I add that in your code?
    – Scott B
    Commented Sep 30, 2010 at 13:45
  • sorich, how would I change your code if I don't want to offer a Title entry?
    – Scott B
    Commented Sep 30, 2010 at 13:55
  • I edited my answer and removed the Title entry. I also added the missing div (it is missing in the output markup you provided).
    – sorich87
    Commented Sep 30, 2010 at 14:13

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.