Custom Widget Code

I would copy the WordPress codex for registering a 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' );

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' );
?>

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

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

Here is how my widgets look now that I’ve got all three of them in the admin section:
https://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:
https://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…)

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.

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.

Ok, here are my pastebin links (much thanks for that suggestion!)

functions.php
https://pastebin.com/f4jTXPU5

______________________________________

My custom plugin page to create these 3 widgets
https://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
https://pastebin.com/WdUBFGiU

_____________________________________

The adaptation that produces the WSOD on the custom page template:

https://pastebin.com/1PJzyv6f

OK, so in words, here is what I see:

1. You register three sidebars: donation_left, donation_mid and donation_right. https://pastebin.com/f4jTXPU5

2. You register one widget: fuller_of_openstrap_donation_page_one. https://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. https://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). https://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.

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:

https://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:

https://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.

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?

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.

I think it’s because you are stripping tags with strip_tags when you’re saving your data in the database, which means when you print it out later, they’re not there anymore.

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

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.