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']];

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

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


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

    if (isset($alloptions['widget_gift_card_paypal_payment'])) {

    return $instance;

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

  function form($instance) { ?>

      <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\""; ?> />
      <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']; ?>" />
      <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']; ?>" />
      <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']; ?>" />
      <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>

I’m not the best developer, but I’ve seen functions like: 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.