Custom widget breaking widget section in admin menu

Question

I am building a child theme at http://habitat.erniehigh.com for a client. I need to add custom widget that shows recent posts by category. I have built similar widgets elsewhere using basically the same code.

    class habitat_posts extends WP_Widget {
  function habitat_posts(){
$widget_ops = array(
'description' => 'Allows you to display a list of recent posts within a particular category.');
$this->WP_Widget('fromcat-widget', 'Recent posts from a Category', $widget_ops);
}
 function form($instance) {
//widgetform in backend
$name = $instance['title'];
$numberposts = $instance['numberposts'];
$catid = $instance['catid'];
$rss = $instance['rss'];
?>
 <?php   }  // end of the instance
 function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
    $instance['catid'] = $new_instance['catid'];
    $instance['numberposts'] = $new_instance['numberposts'];
    $instance['title'] = $new_instance['title'];
    $instance['rss'] = $new_instance['rss'];
    return $instance;
    } // end the updated
   function widget( $args, $instance ) {
       extract($args, EXTR_SKIP);
         $title = $instance['title'];
         $catid = $instance['catid'];
          $numberposts = $instance['numberposts'];
                  $posts = get_posts('numberposts='.$numberposts.'&category='.$catid);
                   $out = '<ul>';
              foreach($posts as $post) {
              $out .= '<li><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>';
                 }
          $out .= '</ul>';
         echo $before_widget;
         echo $before_title.$title.$after_title;
          echo $out;
          echo $after_widget;
          } // end of widget function
      }  // end the whole process ready to register
         register_widget('habitat_posts');

When I try to use it on the child theme here everything goes OK except the Widget area in the backend is a jumbled up mess. The new widget is visible and the form fields for creating a new instance are visible and I can drag it to a sidebar but that is all.

Thanks for any suggestions or help Ernie

Answer 1

I don't know what's going wrong with your code... I know that, if you follow the Codex example, you'll be in the right path.

The following is a merge of your sample code with the Codex's. The function form() is missing the fields numberposts, catid and rss, and you have to write this part.
And, when you have it working, you could post the code here as an answer so the community will have a fully working example.

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

class Fromcat_Widget extends WP_Widget {

    /**
     * Register widget with WordPress.
     */
    public function __construct() {
        parent::__construct(
            'fromcat_widget', // Base ID
            'Recent posts from a Category', // Name
            array( 'description' => __( 'Allows you to display a list of recent posts within a particular category.', 'text_domain' ), ) // Args
        );
    }

    /**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget( $args, $instance ) {
        extract( $args );
        /*
        $title = apply_filters( 'widget_title', $instance['title'] );
        */
        $title = $instance['title'];
        $catid = $instance['catid'];
        $numberposts = $instance['numberposts'];
        $posts = get_posts('numberposts='.$numberposts.'&category='.$catid);
        $out = '<ul>';
        foreach($posts as $post) {
            $out .= '<li><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>';
        }
        $out .= '</ul>';


        echo $before_widget;
        if ( ! empty( $title ) )
            echo $before_title . $title . $after_title;
        echo $out;
        echo $after_widget;
    }

    /**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        $instance = array();

        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['numberposts'] = strip_tags( $new_instance['numberposts'] );
        $instance['catid'] = strip_tags( $new_instance['catid'] );
        $instance['rss'] = strip_tags( $new_instance['rss'] );

        return $instance;
    }

    /**
     * Back-end widget form.
     *
     * @see WP_Widget::form()
     *
     * @param array $instance Previously saved values from database.
     */
    public function form( $instance ) {
        $title = $instance['title'];
        $numberposts = $instance['numberposts'];
        $catid = $instance['catid'];
        $rss = $instance['rss'];
        /*
        if ( isset( $instance[ 'title' ] ) ) {
            $title = $instance[ 'title' ];
        }
        else {
            $title = __( 'New title', 'text_domain' );
        }*/
        ?>
        <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
        <?php 
    }

}