parent::__construct(
'your-social-widget', 'Social Icons',
array('description' => __('Social Icon Links', 'text_domain'))
);
The next part of the widget involves the form you see from the widget menu. Your widget's data is stored as $instance throughout the class. Place this code in the form() function
$instance = wp_parse_args( (array) $instance, array( 'facebook' => '', 'twitter' => '', 'linkedin' => '', 'youtube' => '',
'pinterest' => '', 'foursquare' => '', 'gplus' => '') );
$fb = $instance['facebook'];
$tw = $instance['twitter'];
$li = $instance['linkedin'];
$yt = $instance['youtube'];
$pi = $instance['pinterest'];
$fs = $instance['foursqaure'];
$gp = $instance['gplus'];
?>
<div class="dooley-social-links">
<p><label for="<?php echo $this->get_field_id('facebook'); ?>">Facebook: <input class="widefat" id="<?php echo $this->get_field_id('facebook'); ?>" name="<?php echo $this->get_field_name('facebook'); ?>" type="text" value="<?php echo attribute_escape($fb); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('twitter'); ?>">Twitter: <input class="widefat" id="<?php echo $this->get_field_id('twitter'); ?>" name="<?php echo $this->get_field_name('twitter'); ?>" type="text" value="<?php echo attribute_escape($tw); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('linkedin'); ?>">LinkedIn: <input class="widefat" id="<?php echo $this->get_field_id('linkedin'); ?>" name="<?php echo $this->get_field_name('linkedin'); ?>" type="text" value="<?php echo attribute_escape($li); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('youtube'); ?>">YouTube: <input class="widefat" id="<?php echo $this->get_field_id('youtube'); ?>" name="<?php echo $this->get_field_name('youtube'); ?>" type="text" value="<?php echo attribute_escape($yt); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('pinterest'); ?>">Pinterest: <input class="widefat" id="<?php echo $this->get_field_id('pinterest'); ?>" name="<?php echo $this->get_field_name('pinterest'); ?>" type="text" value="<?php echo attribute_escape($pi); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('foursqaure'); ?>">Foursquare: <input class="widefat" id="<?php echo $this->get_field_id('foursqaure'); ?>" name="<?php echo $this->get_field_name('foursqaure'); ?>" type="text" value="<?php echo attribute_escape($fs); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('gplus'); ?>">Google+: <input class="widefat" id="<?php echo $this->get_field_id('gplus'); ?>" name="<?php echo $this->get_field_name('gplus'); ?>" type="text" value="<?php echo attribute_escape($gp); ?>" /></label></p>
</div>
<?php
And if you've developed with WordPress before, you know there is an update hook where you need to process updates. This code goes in the update() function
$instance = $old_instance;
$instance['facebook'] = $new_instance['facebook'];
$instance['twitter'] = $new_instance['twitter'];
$instance['linkedin'] = $new_instance['linkedin'];
$instance['youtube'] = $new_instance['youtube'];
$instance['pinterest'] = $new_instance['pinterest'];
$instance['foursquare'] = $new_instance['foursquare'];
$instance['gplus'] = $new_instance['gplus'];
return $instance;
Finally, the frontend of it all. Like I said, this is based off of a widget built into a theme, specifically a theme framework I am developing. This rough draft doesn't support the option to choose an icon size, so I just placed 64x64 in my images folder and defined the width and height until I implement that feature. Place this code in the widget() function.
if($instance['facebook']) {
?>
<a href="<?php echo $instance['facebook']; ?>" title="Check out our Facebook page" rel="" target="_blank"><img src="<?php dooley_images(); ?>/facebook.png" alt="Facebook" width="24" height="24" /></a>
<?php
}
if($instance['twitter']) {
?>
<a href="<?php echo $instance['twitter']; ?>" title="Read our tweets!" rel="" target="_blank"><img src="<?php dooley_images(); ?>/twitter.png" alt="Twitter" width="24" height="24" /></a>
<?php
}
if($instance['linkedin']) {
?>
<a href="<?php echo $instance['linkedin']; ?>" title="Find us on LinkedIn" rel="" target="_blank"><img src="<?php dooley_images(); ?>/linkedin.png" alt="LinkedIn" width="24" height="24" /></a>
<?php
}
if($instance['youtube']) {
?>
<a href="<?php echo $instance['youtube']; ?>" title="Check out our YouTube channel" rel="" target="_blank"><img src="<?php dooley_images(); ?>/youtube.png" alt="YouTube" width="24" height="24" /></a>
<?php
}
if($instance['pinterest']) {
?>
<a href="<?php echo $instance['pinterest']; ?>" title="Check out our Pinterest page" rel="" target="_blank"><img src="<?php dooley_images(); ?>/pinterest.png" alt="Pinterest" width="24" height="24" /></a>
<?php
}
if($instance['foursquare']) {
?>
<a href="<?php echo $instance['foursquare']; ?>" title="Check out our Foursquare page" rel="" target="_blank"><img src="<?php dooley_images(); ?>/foursquare.png" alt="Foursquare" width="24" height="24" /></a>
<?php
}
if($instance['gplus']) {
?>
<a href="<?php echo $instance['gplus']; ?>" title="Check out our Google+ page" rel="" target="_blank"><img src="<?php dooley_images(); ?>/gplus.png" alt="Google+" width="24" height="24" /></a>
<?php
}
Building widgets for WordPress is simple, hopefully this quick snippet is the boost some of you need to develop functionality for your WordPress themes or plugins. Like I said, this was quickly thrown together. I think the Foursquare field isn't saving, and I am sure the code could be simplified. But it is just a small piece of my WordPress theme framework I wanted to share.
Want more? Sign up for my weekly newsletter