Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress How to Build a WordPress Plugin Building WordPress Widgets, and Shortcodes How to Create WordPress Widgets

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

How to create Wordpress Widgets

Hi,

In following along with the tutorial I was able to get the Official Treehouse Badges widget to show up in my admin, however when I drag the widget over into my sidebar and refresh/visit the site I get this message that appears under the title My Treehouse Badges:

Notice: Trying to get property of non-object in /..../....../..../..../wp-content/plugins/wptreehouse-badges/inc/front-end.php on line 7

Why is this appearing and how can I fix it?

Thanks in advance to anyone who can assist:-)

1 Answer

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 Points

Thanks for your effort and input James, but unfortunately I don't see anything at any of these links that address the issue that I'm having.

Here is my code for front-end.php, then wp-treehouse-badges.php, and then options-page.php:

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

Update: I kept following along with the course and eventually caved into copy/pasting all of the code from another (future) video and now everything appears to be working, which is great, but I'm not certain that I understand why:-)