Creating a new widget that saves and outputs HTML

Hi everyone,

I’ve created a new widget which I’ve based on the default Roots vCard widget, but I have a requirement to allow user’s to use a textarea field to input data.

I’ve got this far, and it works, but one more requirement is the ability to pass through HTML, so I can add bold, italics and links in the textarea and for it to parse on the front end.

My code so far is:

  /**
 * Gift Card Paypal Payment
 */
class Gift_Card_Paypal_Payment_Widget extends WP_Widget {
  private $fields = array(
    'title'                     => 'Title (to override default)',
    'payment_email'             => 'Paypal Email',
    'payment_instructions'      => 'Payment Instructions',
    'conditions_of_use'         => 'Conditions of Use',
  );

  function __construct() {
    $widget_ops = array('classname' => 'widget_gift_card_paypal_payment', 'description' => __('Allow people to buy gift cards through Paypal', 'roots'));

    $this->WP_Widget('widget_gift_card_paypal_payment', __('Formby: Gift Card Paypal Purchase', 'roots'), $widget_ops);
    $this->alt_option_name = 'widget_gift_card_paypal_payment';

    add_action('save_post', array(&$this, 'flush_widget_cache'));
    add_action('deleted_post', array(&$this, 'flush_widget_cache'));
    add_action('switch_theme', array(&$this, 'flush_widget_cache'));
  }

  function widget($args, $instance) {
    $cache = wp_cache_get('widget_gift_card_paypal_payment', 'widget');

    if (!is_array($cache)) {
      $cache = array();
    }

    if (!isset($args['widget_id'])) {
      $args['widget_id'] = null;
    }

    if (isset($cache[$args['widget_id']])) {
      echo $cache[$args['widget_id']];
      return;
    }

    ob_start();
    extract($args, EXTR_SKIP);

    $title = apply_filters('widget_title', empty($instance['title']) ? __('Purchase Gift Card', 'roots') : $instance['title'], $instance, $this->id_base);

    foreach($this->fields as $name => $label) {
      if (!isset($instance[$name])) { $instance[$name] = ''; }
    }

    echo $before_widget;

    if ($title) {
      echo $before_title, $title, $after_title;
    }
  ?>



  

    <div class="paypal-payment">
      <p class="payment-instructions"><?php echo $instance['payment_instructions']; ?></p>
      <?php 
      echo do_shortcode(' [paypal_form live="false" email="' . $instance['payment_email'] . '" currency="GBP" button_image="" description="GIFT CARDS"] '); ?>

      <h4>Conditions of Use</h4>
      <p class="conditions-of-use"><?php echo htmlspecialchars_decode($instance['conditions_of_use']); ?></p>
    </div>





    
  <?php
    echo $after_widget;

    $cache[$args['widget_id']] = ob_get_flush();
    wp_cache_set('widget_gift_card_paypal_payment', $cache, 'widget');
  }

  function update($new_instance, $old_instance) {
    $instance = array_map('strip_tags', $new_instance);

    $this->flush_widget_cache();

    $alloptions = wp_cache_get('alloptions', 'options');

    if (isset($alloptions['widget_gift_card_paypal_payment'])) {
      delete_option('widget_gift_card_paypal_payment');
    }

    return $instance;
  }

  function flush_widget_cache() {
    wp_cache_delete('widget_gift_card_paypal_payment', 'widget');
  }

  function form($instance) { ?>

    <p>
      <label for="<?php echo esc_attr($this->get_field_id("title")); ?>"><?php _e("Show Title?", 'roots'); ?></label>
      <input type="checkbox" class="is-title" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" <?php if( $instance['title'] == "on") echo "checked=\"true\""; ?> />
    </p>
    <p>
      <label for="<?php echo esc_attr($this->get_field_id("title")); ?>"><?php _e("Title", 'roots'); ?></label>
      <input id="<?php echo $this->get_field_id('title'); ?>" class="widefat" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
    </p>
    <p>
      <label for="<?php echo esc_attr($this->get_field_id("payment_email")); ?>"><?php _e("Payment Email", 'roots'); ?></label>
      <input id="<?php echo $this->get_field_id('payment_email'); ?>" class="widefat" name="<?php echo $this->get_field_name('payment_email'); ?>" value="<?php echo $instance['payment_email']; ?>" />
    </p>
    <p>
      <label for="<?php echo esc_attr($this->get_field_id("payment_instructions")); ?>"><?php _e("Payment Instructions", 'roots'); ?></label>
      <input id="<?php echo $this->get_field_id('payment_instructions'); ?>" class="widefat" name="<?php echo $this->get_field_name('payment_instructions'); ?>" value="<?php echo $instance['payment_instructions']; ?>" />
    </p>
    <p>
      <label for="<?php echo esc_attr($this->get_field_id("conditions_of_use")); ?>"><?php _e("Conditions of Use", 'roots'); ?></label>
      <textarea id="<?php echo $this->get_field_id('conditions_of_use'); ?>" class="widefat" name="<?php echo $this->get_field_name('conditions_of_use'); ?>" rows="8"><?php echo $instance['conditions_of_use']; ?></textarea>
    </p>
  <?php
  }
}

I’m not the best developer, but I’ve seen functions like: http://www.php.net//manual/en/function.htmlspecialchars-decode.php that I’ve tried (whether I’m doing it correctly or not) to output the value, but if I do a var_dump of the textarea content, I think it’s not saving the HTML values (ie it’s stripping them out on save) - again, I can’t be sure.

If you have any experience with this and can help it would help me finish this project, and I would greatly appreciate it.

Thanks