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

Caroline Forslund
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 Points

Widget won't appear on my site

I can drag my widget to the sidebar widget area, write in the title and save it. But it won't show up in the sidebar when I display the site. I've watched the tutorial over and over but I still can't figure out what I'm doing wrong...

Hi Caroline,

Could you post your code for the page that has the widget area please?

Also, which widget are you adding?

Thanks

-Rich

Caroline Forslund
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 Points

My code:

wpgithub-statistics.php file

<?php
/*
 * Plugin Name: GitHub Statistics Plugin
 * Plugin URI: http://ajdoo.se/wpgithub-statistics-wordpress-plugin
 * Description: Helps you to display statistics from GitHub
 * Version: 1.0
 * Author: Caroline Forslund
 * Author URI: http://www.carolineforslund.se
 * Licence: GPL2
*/

/*
 * Add a link to the plugin admin menu
 * under 'Settings > GitHub Statistics'
*/

function wpgithub_statistics_menu(){

    /* Use the add_options_page_function
     * add_options_page( $page_title, $menu_title, $capability, $menu-slug, $function 
    */
    add_options_page(
        'GitHub Statistics Plugin',
        'GitHub Statistics',
        'manage_options',
        'wpgithub-statistics',
        'wpgithub_statistics_options_page'
    );
}
add_action( 'admin_menu', 'wpgithub_statistics_menu' );

function wpgithub_statistics_options_page() {
    if( !current_user_can( 'manage_options' ) ) {
        wp_die( 'You do not have sufficient permission to access this page.' );
    }
    echo '<p>Welcome to GitHub Statistics plugin page!</p>';
}
 // WIDGET -------------------------------------------------------------

class Wpgithub_Statistics_Widget extends WP_Widget {

    function wpgithub_statistics_widget() {
        // Instantiate the parent object
        parent::__construct( false, 'GitHub Statistics Widget' );
    }

    function widget( $args, $instance ) {
        // Widget output
        extract( $args );
        $title = apply_filter( 'widget_title', $instance['title'] ); //Let the user choose title of the Widget
        require( 'inc/front-end.php' );
    }
    function update( $new_instance, $old_instance ) {
        // Save widget options
        $instance = $old_instance;
        $instance['title'] = strip_tags( $new_instance['title'] ); //strip_tags function prevent HTML from displaying up in the form
        return $instance; //the new instance replace the old instance
    }

    function form( $instance ) {
        // Output admin widget options form
        $title = esc_attr( $instance['title'] ); //Poll in the instance and allow us to get the entered title
        require( 'inc/widget-fields.php' );
    }
}
function wpgithub_statistics_register_widget s() {
    register_widget( 'Wpgithub_Statistics_Widget' );
}
add_action( 'widgets_init', 'wpgithub_statistics_register_widgets' );
?>

inc/widget-fields.php

<p>
    <label>Title</label>
    <input class="widefat" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>

inc/front-end.php

<?php
    echo $before_widget;
    echo $before_title . $title . $after_title;
    echo '<p>What I want to show in the Widget</p>';
    echo $after_widget;
?>
Caroline Forslund
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 Points

This is a individual school project and I have no one to ask about Wordpress plugins. So thats why I'm following these tutorials but try to adjust it for my own idea. Any kind of help/input is very appreciated. :)

Hi Caroline,

Sorry for the delay. A few quick questions:

  • Do you receive any errors?
  • Have you tried with WP_DEBUG set to TRUE?
  • Does the widget stay in the widget area in the back end and just not show up in the front end?

-Rich

Caroline Forslund
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 Points
  • No
  • No (Don't know anything about that)
  • No, I see now it disappear from the sidebar if I reload the widget page. I had two different windows open (front end and back end) so I didn't realize that until now when you said that.

Hi Caroline,

I can't see anything in your code that stands out as being incorrect I'm afraid.

It sounds as though it's not saving when a widget is dragged to the widget area though if that helps to narrow it down at all.

-Rich

Caroline Forslund
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 Points

Now I realized I had a blank space in a function. So now they save in the widget sidebar but still don't show front end. Can it be something with the url inc/filename.php for the required files?

2 Answers

TJ Egan
TJ Egan
14,420 Points

Make sure your Sidebar Widget is currently set to display on that page. Do other widgets show up?

Caroline Forslund
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 Points

Yes, I've added another widget to the sidebar with the exact same display settings and that one shows. I also used the inspect element to double check and it's nothing there.