How to create Wordpress Widgets

<?php

    echo $before_widget;

    echo $before_title . $title . $after_title;

    echo $wptreehouse_profile->{'name'};

    echo $after_widget;

?>

<?php
/*
 *  Plugin Name: Official Treehouse Badges Plugin
 *  Plugin URI: http://wptreehouse.com/wptreehouse-badges-plugin/
 *  Description: Provides both widgets and shortcodes to help you display your Treehouse profile badges on your website.  The official Treehouse badges plugin.
 *  Version: 1.0
 *  Author: Zac Gordon
 *  Author URI: http://wp.zacgordon.com
 *  License: GPL2
 *
*/


/*
 *  Assign global variables
 *
*/


$plugin_url = WP_PLUGIN_URL . '/wptreehouse-badges';

$options = array();

$display_json = true;

/*
 *  Add a link to our plugin in the admin menu
 *  under 'Settings > Treehouse Badges'
 *
*/

function wptreehouse_badges_menu() {

    /*
     *  Save the add_options_page function with parameters
     *  add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);
     *
    */

    add_options_page(
        'Treehouse Badges',
        'Treehouse Badges',
        'manage_options',
        'wptreehouse-badges',
        'wp_treehouse_badges_options_page'
    );

}
add_action( 'admin_menu', 'wptreehouse_badges_menu' );


/*
 *  Create our main function for our plugin options page
 *
*/

function wp_treehouse_badges_options_page() {

    if( !current_user_can( 'manage_options' ) ) {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }


    // Pull in global variables
    global $plugin_url;
    global $options;
    global $display_json;

    if( isset( $_POST['wptreehouse_form_submitted'] ) ) {

        $hidden_field = esc_html( $_POST['wptreehouse_form_submitted'] );

        if( $hidden_field == 'Y' ) {

            $wptreehouse_username = esc_html( $_POST['wptreehouse_username'] );
            $wptreehouse_profile= wptreehouse_badges_get_profile($wptreehouse_username);
            $options['wptreehouse_username']    = $wptreehouse_username;
            $options['wptreehouse_profile'] = $wptreehouse_profile;
      $options['last_updated']          = time();

            update_option( 'wptreehouse_badges', $options );
        }

    }
    $options = get_option( 'wptreehouse_badges' );

    if( $options != '' ) {

        $wptreehouse_username = $options['wptreehouse_username'];
        $wptreehouse_profile = $options['wptreehouse_profile'];
    }

    // Require the main markup for the options page
    require( 'inc/options-page-wrapper.php' );

}

class Wptreehouse_Badges_Widget extends WP_Widget {

    function wptreehouse_badges_widget() {
        // Instantiate the parent object
        parent::__construct( false, 'Official Treehouse Badges Widget' );
    }

    function widget( $args, $instance ) {
        // Widget output
        extract ( $args );
        $title = apply_filters('widget_title', $instance['title']);

        $options = get_option('wptreehouse-badges');
        $wptreehouse_profile = $options['wptreehouse_profile'];

        require('inc/front-end.php');
    }

    function update( $new_instance, $old_instance ) {
        // Save widget options
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);

        return $instance;
    }

    function form( $instance ) {
        // Output admin widget options form

        $title = esc_attr($instance['title']);

        require('inc/widget-fields.php');
    }
}

function wptreehouse_badges_register_widgets() {
    register_widget( 'Wptreehouse_Badges_Widget' );
}

add_action( 'widgets_init', 'wptreehouse_badges_register_widgets' );

function wptreehouse_badges_get_profile($wptreehouse_username){
    $json_feed_url = 'http://teamtreehouse.com/' . $wptreehouse_username . '.json';
    $args = array('timeout' => 120);

    $json_feed = wp_remote_get( $json_feed_url, $args);

    $wptreehouse_profile = json_decode( $json_feed['body']);

    return $wptreehouse_profile;
}


function wptreehouse_badges_styles() {

    wp_enqueue_style( 'wptreehouse_badges_styles', plugins_url( 'wptreehouse-badges/wptreehouse-badges.css' ) );

}
add_action( 'admin_head', 'wptreehouse_badges_styles' );

?>

<div class="wrap">

    <div id="icon-options-general" class="icon32"></div>
    <h2>The Official Treehouse Badges Plugin</h2>

    <div id="poststuff">

        <div id="post-body" class="metabox-holder columns-2">

            <!-- main content -->
            <div id="post-body-content">

                <div class="meta-box-sortables ui-sortable">

                    <?php if( !isset( $wptreehouse_username ) || $wptreehouse_username == '' ): ?>

                    <div class="postbox">

                        <h3><span>Let's Get Started!</span></h3>
                        <div class="inside">

                            <form name="wptreehouse_username_form" method="post" action="">

                                <input type="hidden" name="wptreehouse_form_submitted" value="Y">

                                <table class="form-table">
                                        <tr>
                                            <td>
                                                <label for="wptreehouse_username">Treehouse username</label>
                                            </td>
                                            <td>
                                                <input name="wptreehouse_username" id="wptreehouse_username" type="text" value="" class="regular-text" />
                                            </td>
                                        </tr>
                                    </table>

                                <p>
                                    <input class="button-primary" type="submit" name="wptreehouse_username_submit" value="Save" />
                                </p>

                            </form>


                        </div> <!-- .inside -->

                    </div> <!-- .postbox -->



                <?php else: ?>
           <?php if( $display_json == true ); ?>
                    <div class="postbox">

                        <h3><span>JSON Feed</span></h3>
                        <div class="inside">

                            <p>Below are your most 20 most recent badges.</p>

                            <ul class="wptreehouse-badges">
                                <?php for( $i = 0; $i < 20; $i++ ): ?>
                                <li>
                                    <ul>
                                        <li>
                                            <img width="120px" src="<?php echo $wptreehouse_profile->{'badges'}[$i]->{'icon_url'};?>">
                                        </li>
                                        <li class="wptreehouse-badge-name">
                                            <a href="<?php echo $wptreehouse_profile->{'badges'}[$i]->{'url'};?>"><?php echo $wptreehouse_profile->{'badges'}[$i]->{'name'};?></a>
                                        </li>
                                        <?php if(!empty($wptreehouse_profile->{'badges'}[$i]->{'courses'})): ?>
                                        <li class="wptreehouse-project-name">
                                            <a href="<?php echo $wptreehouse_profile->{'badges'}[$i]->{'courses'}[0]->{'url'};?>">
                                                <?php echo $wptreehouse_profile->{'badges'}[$i]->{'courses'}[0]->{'title'};?>
                                            </a>
                                        </li>

                                    <?php endif; ?>
                                    </ul>
                                </li>
                                <?php endfor; ?>

                            </ul>


                        </div> <!-- .inside -->

                    </div> <!-- .postbox -->

                <?php endif; ?>

                </div> <!-- .meta-box-sortables .ui-sortable -->

            </div> <!-- post-body-content -->

            <!-- sidebar -->
            <div id="postbox-container-1" class="postbox-container">

                <div class="meta-box-sortables">

                    <?php if( isset( $wptreehouse_username ) && $wptreehouse_username != '' ): ?>


                    <div class="postbox">

                        <h3><span><?php echo $wptreehouse_profile->{'name'}; ?>'s profile</span></h3>
                        <div class="inside">

                            <p><img width="100%" class="wptreehouse-gravatar" src="<?php echo $wptreehouse_profile->{'gravatar_url'}; ?>"></p>

                            <ul class="wptreehouse-badges-and-points">

                                <li>Badges: <strong><?php echo count($wptreehouse_profile->{'badges'} ); ?></strong></li>
                                <li>Points: <strong><?php echo $wptreehouse_profile->{'points'}->{'total'}; ?></strong></li>

                            </ul>

                            <form name="wptreehouse_username_form" method="post" action="">

                                <input type="hidden" name="wptreehouse_form_submitted" value="Y">

                                    <p>
                                                <label for="wptreehouse_username">Username</label>
                                        </p>
                                        <p>
                         <input name="wptreehouse_username" id="wptreehouse_username" type="text" value="<?php echo $wptreehouse_username; ?>"  />
                         <input class="button-primary" type="submit" name="wptreehouse_username_submit" value="Update" />
                                        </p>





                            </form>




                        </div> <!-- .inside -->


                    </div> <!-- .postbox -->

                    <div class="postbox">

                           <h3><span>Mike the Frog's Profile</span></h3>
                           <div class="inside">
                                 <p><?php echo $wptreehouse_profile->{'name'}; ?></p>
                                 <p><?php echo $wptreehouse_profile->{'profile_url'}; ?></p>
                             <p><?php echo $wptreehouse_profile->{'badges'}[1]->{'courses'}[0]->{'title'}; ?></p>
                    <pre><code>
                                        <?php var_dump( $wptreehouse_profile); ?>
                                    </pre></code>
                            </div>

                    </div>

            <?php endif; ?>
                </div> <!-- .meta-box-sortables -->

            </div> <!-- #postbox-container-1 .postbox-container -->

        </div> <!-- #post-body .metabox-holder .columns-2 -->

        <br class="clear">
    </div> <!-- #poststuff -->

</div> <!-- .wrap -->