Words I Write

Ok, so a day or two ago I worked through the widget options and the first basic widget section, called the constructor. The middle section of the widget defines how WP handles updates to the widget. We are updating the instance of the widget we saved before.

Mine looks like this:

function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['text'] = strip_tags($new_instance['text']);
    $instance['link_url'] = strip_tags($new_instance['link_url']);
    $instance['link_text'] = strip_tags($new_instance['link_text']);
    return $instance;
    }

This part is actually pretty straightforward. This uses the inputs from the form we will build next to save info to a new widget instance. This is also how variables get passed to the constructor we built in the first sections.

The third section is the form that a user will see when they are using the widget on the back end, so this is where all of your options will be. If you have no options for your widget, then you should probably just put a nice little note here explaining what you widget does. For my widget I have 4 fields, the first is widget title, then the text to be displayed, and then the link text and URL. Like I said, this would be simple to output in the existing Text widget, but the goal is to remove any need to code anything so my clients can easily use this.

 function form($instance) {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '', 'link_url' => '', 'link_text' => '' ) );
    $title = strip_tags($instance['title']);
    $text = strip_tags($instance['text']);
    $link_url = strip_tags($instance['link_url']);
    $link_text = strip_tags($instance['link_text']);
    ?>
    <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('text'); ?>">Text: <textarea class="widefat" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>" type="text"><?php echo attribute_escape($text); ?></textarea></label></p>
    <p><label for="<?php echo $this->get_field_id('link_url'); ?>">Full URL of Link: <input class="widefat" id="<?php echo $this->get_field_id('link_url'); ?>" name="<?php echo $this->get_field_name('link_url'); ?>" type="text" value="<?php echo attribute_escape($link_url); ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('link_text'); ?>">Link Text: <input class="widefat" id="<?php echo $this->get_field_id('link_text'); ?>" name="<?php echo $this->get_field_name('link_text'); ?>" type="text" value="<?php echo attribute_escape($link_text); ?>" /></label></p>
    <?php
    }

So up top we are just setting our vars for this instance to nothing, then setting them to the input from the form we built underneath. I’m using the php strip_tags() function to remove any unwanted php or html that might booger up what I’m trying to do. That’s essentially it. The last thing we need to do is register our widget, which is done by register_widget('Promo_Tooth');.

Here’s the whole shabang.

 // Promo Widget (tooth icon) for displaying the promo box with limited options configurable by contributors

    class Promo_Tooth extends WP_Widget {
    function Promo_Tooth() {
    $widget_ops = array('classname' => 'toothPromo', 'description' => 'Displays promo box with tooth icon' );
    $this->WP_Widget('promo_tooth', 'Promo - Tooth Icon', $widget_ops);
    }
    function widget($args, $instance) {
    extract($args, EXTR_SKIP);
    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
    $text = empty($instance['text']) ? ' ' : apply_filters('widget_text', $instance['text']);
    $link_url = empty($instance['link_url']) ? ' ' : apply_filters('widget_link_url', $instance['link_url']);
    $link_text = empty($instance['link_text']) ? ' ' : apply_filters('widget_link_text', $instance['link_text']);
    if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
    echo '<img src="images/tooth.png">';
    echo '<p>' . $text . '</p>';
    echo '<a href="' . $link_url . '">';
    echo $link_text . ' &raquo;';
    echo '</a>';
    echo $after_widget;
    }
    function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['text'] = strip_tags($new_instance['text']);
    $instance['link_url'] = strip_tags($new_instance['link_url']);
    $instance['link_text'] = strip_tags($new_instance['link_text']);
    return $instance;
    }
    function form($instance) {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '', 'link_url' => '', 'link_text' => '' ) );
    $title = strip_tags($instance['title']);
    $text = strip_tags($instance['text']);
    $link_url = strip_tags($instance['link_url']);
    $link_text = strip_tags($instance['link_text']);
    ?>
    <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('text'); ?>">Text: <textarea class="widefat" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>" type="text"><?php echo attribute_escape($text); ?></textarea></label></p>
    <p><label for="<?php echo $this->get_field_id('link_url'); ?>">Full URL of Link: <input class="widefat" id="<?php echo $this->get_field_id('link_url'); ?>" name="<?php echo $this->get_field_name('link_url'); ?>" type="text" value="<?php echo attribute_escape($link_url); ?>" /></label></p>
    <p><label for="<?php echo $this->get_field_id('link_text'); ?>">Link Text: <input class="widefat" id="<?php echo $this->get_field_id('link_text'); ?>" name="<?php echo $this->get_field_name('link_text'); ?>" type="text" value="<?php echo attribute_escape($link_text); ?>" /></label></p>
    <?php
    }
    }
    register_widget('Promo_Tooth');

BOOM! Widget! The final product looks like this on the back end:

And with a dash of CSS, this is how it displays on the live site:

Right now I have three different widgets for three different icons. What I need to do is add a simple dropdown menu in a single widget to select which icon to display. Should be simple enough. All I will need to do is add the drop down to my menu, and add an icon var to my constructor and update sections.

Feel free to use or change this as you need. Just leave a comment and let me know if it worked for you.