Title: Custom Widget Code
Last modified: August 22, 2016

---

# Custom Widget Code

 *  Resolved [sandyfischler](https://wordpress.org/support/users/sandyfischler/)
 * (@sandyfischler)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-widget-code/)
 * I’ve got multiple tabs open with tutorials for creating a custom WP widget and
   I’m confused since they are all saying slighting different things.
 * I’ve created my plugin and it shows up in the plugin list (good so far).
 * Where I’m challenged is in adding the code to actually create the widget and 
   what order things go in since each tutorial is doing it differently and I’d like
   to start out with Best Practices.
 * This where I am so far and I’m already stuck because I have questions….
 *     ```
       <?php
       /*
       Plugin Name: Fuller Donation Widgets
       Description: Donation channel widgets
       Author: Sandy Fischler
       Version: 1
       */
       /* Start Adding Functions Below this Line */
   
       class fuller_of_openstrap_donation_page_one extends WP_Widget {
           function fuller_of_openstrap_donation_page_one() {
               parent::__construct(false, $name = __('Fuller Donation Widget One', 'fuller_of_openstrap_donation_page_one') );
           }
       ```
   
 * Questions:
 * 1) Do I state the class first or register the widget first? I see it done both
   ways. One tutorial starts out with register widget and another has it much lower
   in the code.
 * 2) In the WP codex they use **parent::__construct**, in one tutorial they use**
   parent::WP_Widget** which is correct?
 * Thanks!

Viewing 15 replies - 1 through 15 (of 19 total)

1 [2](https://wordpress.org/support/topic/custom-widget-code/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/custom-widget-code/page/2/?output_format=md)

 *  [Ryan Sechrest](https://wordpress.org/support/users/sovereign/)
 * (@sovereign)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632450)
 * I would copy the [WordPress codex for registering a widget](http://codex.wordpress.org/Function_Reference/register_widget)
   and follow that order:
 *     ```
       class MyNewWidget extends WP_Widget {
   
       	function MyNewWidget() {
       		// Instantiate the parent object
       		parent::__construct( false, 'My New Widget Title' );
       	}
   
       	function widget( $args, $instance ) {
       		// Widget output
       	}
   
       	function update( $new_instance, $old_instance ) {
       		// Save widget options
       	}
   
       	function form( $instance ) {
       		// Output admin widget options form
       	}
       }
   
       function myplugin_register_widgets() {
       	register_widget( 'MyNewWidget' );
       }
   
       add_action( 'widgets_init', 'myplugin_register_widgets' );
       ```
   
 *  Thread Starter [sandyfischler](https://wordpress.org/support/users/sandyfischler/)
 * (@sandyfischler)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632455)
 * Excellent! Thank you. I’ve gotten my widget to successfully show up in the widget
   list and do what is intended.
 * My indentation is a little messy (newbies, sheesh!) but here is how it comes 
   out:
 *     ```
       <?php
       /*
       Plugin Name: Fuller Donation Widgets
       Description: Donation channel widgets
       Author: Sandy Fischler
       Version: 1
       */
       /* Start Adding Functions Below this Line */
   
       class fuller_of_openstrap_donation_page_one extends WP_Widget {
           function fuller_of_openstrap_donation_page_one() {
       		// Instantiate the parent object
       		parent::__construct( false, 'Fuller Donation Widget 1' );
           }
   
           function widget( $args, $instance ) {
       		// Widget output
   
       	extract( $args );
               // these are the widget options
               $title = apply_filters('widget_title', $instance['title']);
               $text = $instance['text'];
               $textarea = $instance['textarea'];
               echo $before_widget;
               // Display the widget
               echo '<div class="widget-text wp_widget_plugin_box">';
   
               // Check if title is set
                if ( $title ) {
                echo $before_title . $title . $after_title;
               }
   
               // Check if text is set
               if( $text ) {
               echo '<p class="wp_widget_plugin_text">'.$text.'</p>';
               }
                // Check if textarea is set
               if( $textarea ) {
               echo '<p class="wp_widget_plugin_textarea">'.$textarea.'</p>';
                }
               echo '</div>';
               echo $after_widget;
           }
   
           function update( $new_instance, $old_instance ) {
               // Save widget options
                    $instance = $old_instance;
               // Fields
               $instance['title'] = strip_tags($new_instance['title']);
               $instance['text'] = strip_tags($new_instance['text']);
               $instance['textarea'] = strip_tags($new_instance['textarea']);
               return $instance;
           }
   
           function form( $instance ) {
       	// Output admin widget options form
           if( $instance) {
               $title = esc_attr($instance['title']);
               $text = esc_attr($instance['text']);
               $textarea = esc_textarea($instance['textarea']);
           } else {
               $title = '';
               $text = '';
               $textarea = '';
           }
           ?>
   
           <p>
           <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Widget Title', 'wp_widget_plugin'); ?></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 $title; ?>" />
           </p>
   
           <p>
           <label for="<?php echo $this->get_field_id('text'); ?>"><?php _e('Text:', 'wp_widget_plugin'); ?></label>
           <input class="widefat" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>" type="text" value="<?php echo $text; ?>" />
           </p>
   
           <p>
           <label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Textarea:', 'wp_widget_plugin'); ?></label>
           <textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea; ?></textarea>
           </p>
           <?php
           }
       }
   
       function myplugin_register_widgets() {
           register_widget( 'fuller_of_openstrap_donation_page_one' );
       }
   
       add_action( 'widgets_init', 'myplugin_register_widgets' );
   
       /* Stop Adding Functions Below this Line */
       ?>
       ```
   
 * Now, my next issue is that I need to register the areas where I want it to appear.
   This widget (will be widgetS) are going to appear on a page in the content section
   just below the main page content but before the footer. I’ve added this code 
   as specified in the Codex but my widgetized area is not showing up.
 *     ```
       <?php
       //* Start the engine
       include_once( get_template_directory() . '/lib/init.php'):
   
       <?php
       /**
        * Register our sidebars and widgetized areas.
        *
        */
       function arphabet_widgets_init() {
   
       	register_sidebar( array(
       		'name' => 'Donation Page Widget One',
       		'id' => 'donation_left_1',
       		'before_widget' => '<div>',
       		'after_widget' => '</div>',
       		'before_title' => '<h2 class="rounded">',
       		'after_title' => '</h2>',
       	) );
       }
       add_action( 'widgets_init', 'arphabet_widgets_init' );
       ?>
       ```
   
 *  Thread Starter [sandyfischler](https://wordpress.org/support/users/sandyfischler/)
 * (@sandyfischler)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632457)
 * Sorry, I found my mistake and can’t delete that older post.
 * Excellent! Thank you. I’ve gotten my widget to successfully show up in the widget
   list and do what is intended. I’ve got the widgetized area registered on my functions.
   php and showing up.
 * Something is funky in my code because when I drag my widget over to the widgetized
   area it starts to create the form but then it disappears. I have to save the 
   widget, then the form will appear and I can enter data.
 * My indentation is a little messy (newbies, sheesh!) but here is how it comes 
   out:
 *     ```
       <?php
       /*
       Plugin Name: Fuller Donation Widgets
       Description: Donation channel widgets
       Author: Sandy Fischler
       Version: 1
       */
       /* Start Adding Functions Below this Line */
   
       class fuller_of_openstrap_donation_page_one extends WP_Widget {
           function fuller_of_openstrap_donation_page_one() {
       		// Instantiate the parent object
       		parent::__construct( false, 'Fuller Donation Widget 1' );
           }
   
           function widget( $args, $instance ) {
       		// Widget output
   
       	extract( $args );
               // these are the widget options
               $title = apply_filters('widget_title', $instance['title']);
               $text = $instance['text'];
               $textarea = $instance['textarea'];
               echo $before_widget;
               // Display the widget
               echo '<div class="widget-text wp_widget_plugin_box">';
   
               // Check if title is set
                if ( $title ) {
                echo $before_title . $title . $after_title;
               }
   
               // Check if text is set
               if( $text ) {
               echo '<p class="wp_widget_plugin_text">'.$text.'</p>';
               }
                // Check if textarea is set
               if( $textarea ) {
               echo '<p class="wp_widget_plugin_textarea">'.$textarea.'</p>';
                }
               echo '</div>';
               echo $after_widget;
           }
   
           function update( $new_instance, $old_instance ) {
               // Save widget options
                    $instance = $old_instance;
               // Fields
               $instance['title'] = strip_tags($new_instance['title']);
               $instance['text'] = strip_tags($new_instance['text']);
               $instance['textarea'] = strip_tags($new_instance['textarea']);
               return $instance;
           }
   
           function form( $instance ) {
       	// Output admin widget options form
           if( $instance) {
               $title = esc_attr($instance['title']);
               $text = esc_attr($instance['text']);
               $textarea = esc_textarea($instance['textarea']);
           } else {
               $title = '';
               $text = '';
               $textarea = '';
           }
           ?>
   
           <p>
           <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Widget Title', 'wp_widget_plugin'); ?></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 $title; ?>" />
           </p>
   
           <p>
           <label for="<?php echo $this->get_field_id('text'); ?>"><?php _e('Text:', 'wp_widget_plugin'); ?></label>
           <input class="widefat" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>" type="text" value="<?php echo $text; ?>" />
           </p>
   
           <p>
           <label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Textarea:', 'wp_widget_plugin'); ?></label>
           <textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea; ?></textarea>
           </p>
           <?php
           }
       }
   
       function myplugin_register_widgets() {
           register_widget( 'fuller_of_openstrap_donation_page_one' );
       }
   
       add_action( 'widgets_init', 'myplugin_register_widgets' );
   
       /* Stop Adding Functions Below this Line */
       ?>
       ```
   
 *  [Ryan Sechrest](https://wordpress.org/support/users/sovereign/)
 * (@sovereign)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632495)
 * I copied your code into a new WordPress installation, saw your widget (Fuller
   Donation Widget1), expanded the Content Sidebar, dragged it over into that sidebar,
   the widget expanded and displayed three fields (Widget title, Text, and Textarea),
   I entered some content and saved the widget.
 * Can you try it in another browser, just to see if that makes a difference? Also,
   if you can, upload a screenshot of the empty widget– there may be a clue as to
   what happened. Lastly, are you running the latest version of WordPress (4.1)?
 *  Thread Starter [sandyfischler](https://wordpress.org/support/users/sandyfischler/)
 * (@sandyfischler)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632551)
 * Here is how my widgets look now that I’ve got all three of them in the admin 
   section:
    [http://www.tenthmusecreative.com/hosted-images/fuller-widgets.JPG](http://www.tenthmusecreative.com/hosted-images/fuller-widgets.JPG)
 * The two new ones did the same thing as the first, I dragged over my widget but
   it doesn’t show any fields until I save and re-open the widget.
 * Not a big deal, but I’d like to learn to do things correctly.
 * My new frustration is getting my widgets to display properly.
 * I have the first one showing up (it’s the “test” at the bottom” but when I duplicate
   my code I get the white screen of death.
 * Here is the page:
    [http://fullercenterlosangeles.org/donate/](http://fullercenterlosangeles.org/donate/)
 *     ```
       <div class="col-md-<?php echo $divclass; ?>">
                       <?php if ( is_active_sidebar( 'donation_left' ) ) : ?>
                           <div id="primary-sidebar" class="fuller_of_openstrap_donation_page_one="complementary">
                               <?php dynamic_sidebar( 'donation_left' ); ?>
                           </div><!-- #primary-sidebar -->
                       <?php endif; ?>
                   </div>
       ```
   
 * In theory, I should be able to just duplicate this with donation_mid and donation_right
   and then start styling it?
 * (also I can’t pull up the admin parts of the site in Firefox for some reason,
   something about not supplying ownership information…)
 *  [Ryan Sechrest](https://wordpress.org/support/users/sovereign/)
 * (@sovereign)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632565)
 * Can you share the code of how you created all three widgets together and the 
   sidebar? There might be a naming conflict of some sort.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632570)
 * As Ryan suggested, sharing you code would be helpful. It’d be best if you used
   pastebin.com and provided a link here. Please select PHP syntax highlighting 
   at pastebin when you post the code, it makes finding errors much easier.
 * Anytime you get the WSOD, there is an error somewhere, it can be very simple.
   Knowing what that error is is very helpful. It should be in your error logs. 
   Alternately, define WP_DEBUG as true on wp-config.php, then reload the page. 
   Errors will now show up in your browser instead of just the WSOD.
 * Thanks.
 *  Thread Starter [sandyfischler](https://wordpress.org/support/users/sandyfischler/)
 * (@sandyfischler)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632579)
 * Ok, here are my pastebin links (much thanks for that suggestion!)
 * functions.php
    [http://pastebin.com/f4jTXPU5](http://pastebin.com/f4jTXPU5)
 * ______________________________________
 * My custom plugin page to create these 3 widgets
    [http://pastebin.com/f54PWvqt](http://pastebin.com/f54PWvqt)
 * _______________________________________
 * custom page template for donations (I took this code from the front page of my
   theme and plugged it in to the donations page). This is the page that is currently
   working. Since this is a static page I can probably delete the sections referencing
   posts but baby steps…
 * donation-content-sidebar.php
    [http://pastebin.com/WdUBFGiU](http://pastebin.com/WdUBFGiU)
 * _____________________________________
 * The adaptation that produces the WSOD on the custom page template:
 * [http://pastebin.com/1PJzyv6f](http://pastebin.com/1PJzyv6f)
 *  [Ryan Sechrest](https://wordpress.org/support/users/sovereign/)
 * (@sovereign)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632580)
 * OK, so in words, here is what I see:
 * 1. You register three sidebars: `donation_left`, `donation_mid` and `donation_right`.
   [http://pastebin.com/f4jTXPU5](http://pastebin.com/f4jTXPU5)
 * 2. You register one widget: `fuller_of_openstrap_donation_page_one`. [http://pastebin.com/f54PWvqt](http://pastebin.com/f54PWvqt)
 * 3. You reference three sidebars in the page template: `donation_left`, `fuller_of_openstrap_donation_page_two`
   and `fuller_of_openstrap_donation_page_three`. [http://pastebin.com/WdUBFGiU](http://pastebin.com/WdUBFGiU)
 * A couple things:
 * In your WSOD template, you tried to reference the correct sidebars, but there
   is a `<?php endif; ?>` missing for `donation_mid` and `donation_right` (just 
   like line 32). [http://pastebin.com/1PJzyv6f](http://pastebin.com/1PJzyv6f)
 * I noticed you’re pulling in the three sidebars back to back. Are you going to
   use these sidebars somewhere else on the site, too? If not, maybe one sidebar
   would be sufficient, because you could add three widgets to it and then lay them
   out exactly as you have with the three sidebars.
 *  Thread Starter [sandyfischler](https://wordpress.org/support/users/sandyfischler/)
 * (@sandyfischler)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632581)
 * No, these are only going to be used on this one page. I was trying to follow 
   the way the theme set up the sidebars on the front page. They registered 4 of
   them that are only used on the front page in their functions.php. I followed 
   the example as shown here in the original theme:
 * [http://pastebin.com/Y57Wprfw](http://pastebin.com/Y57Wprfw)
 * My goal was to create the same set up on the donations page for my 3 donation
   channels as the front page has for marketing text.
 * On the front page of the theme I copied out the section relating to the front
   page widgets and dropped it into my custom page template, this is the original
   theme file for the front page:
 * [http://pastebin.com/QCJwaikM](http://pastebin.com/QCJwaikM)
 * There may be a simpler and better way to do this, I thought it would be a good
   way to learn how to make custom widgets and expand my capabilities. Eventually
   we will have up to 6 different donation channels and setting them up in a grid
   as widgets looked to me to be a nice way to keep a clean layout..but I could 
   be wrong.
 *  [Ryan Sechrest](https://wordpress.org/support/users/sovereign/)
 * (@sovereign)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632582)
 * > I was trying to follow the way the theme set up the sidebars on the front page.
   > They registered 4 of them that are only used on the front page in their functions.
   > php.
 * You can definitely do that; it’s perfectly OK. It just sounded like you would
   be registering one sidebar for each widget. If that were the case, if you just
   have one sidebar, you can add as many widgets as you like and can make them flow
   nicely in a grid.
 * Did the WSOD get resolved by adding the closing `endif;` statement?
 *  Thread Starter [sandyfischler](https://wordpress.org/support/users/sandyfischler/)
 * (@sandyfischler)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632591)
 * Yes, I’ve resolved my WSOD! Thank you!
 * I’m confused now that my buttoms aren’t showing up when I paste in the code for
   them, should I have created a different type of field for that code other than
   textarea?
 * The Just Give code is this but it doesn’t create the donate button or the link
   when I paste it into the textarea box.
 *     ```
       <a href="https://npo.justgive.org/nonprofits/donate.jsp?ein=47-1793242">
       <img src="https://npo.justgive.org/images/np_btn_donate_now.jpg">
       </a>
       ```
   
 * The PayPal and Amazon Smile button codes don’t show either.
 *  [Ryan Sechrest](https://wordpress.org/support/users/sovereign/)
 * (@sovereign)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632592)
 * I think it’s because you are stripping tags with [`strip_tags`](http://php.net/manual/en/function.strip-tags.php)
   when you’re saving your data in the database, which means when you print it out
   later, they’re not there anymore.
 *  Thread Starter [sandyfischler](https://wordpress.org/support/users/sandyfischler/)
 * (@sandyfischler)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632593)
 * I removed the strip_tags from the textarea field and that did the trick.
 * Now, I have yet another new funky problem. My other user logs into the admin 
   of our WP install for this site and he gets the WSOD. I have no problem, everything
   shows for me. We are both admins.
 * I turned on debug and this is the error message he gets:
 * Warning: Cannot modify header information – headers already sent by (output started
   at /home/fullercenterlosa/public_html/wp-content/themes/fullercenteropenstrap/
   functions.php:47) in/home/fullercenterlosa/public_html/wp-includes/pluggable.
   php on line 1178l
 *  [Ryan Sechrest](https://wordpress.org/support/users/sovereign/)
 * (@sovereign)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/custom-widget-code/#post-5632594)
 * I don’t know why one would get something the other isn’t, unless it’s the browser
   cache, but generally that error occurs when you have a character, like whitespace,
   after the closing `?>` tag in one of your PHP files. In this case, it appears
   to be in the `functions.php` file.

Viewing 15 replies - 1 through 15 (of 19 total)

1 [2](https://wordpress.org/support/topic/custom-widget-code/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/custom-widget-code/page/2/?output_format=md)

The topic ‘Custom Widget Code’ is closed to new replies.

## Tags

 * [widgets](https://wordpress.org/support/topic-tag/widgets/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 19 replies
 * 4 participants
 * Last reply from: [Wildcard](https://wordpress.org/support/users/thenewguy_14/)
 * Last activity: [10 years, 11 months ago](https://wordpress.org/support/topic/custom-widget-code/page/2/#post-5632738)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics