This document provides code for building a boilerplate widget in WordPress. It includes a class called boilerplate_widget that extends the WP_Widget class. The class contains functions for constructing the widget, generating the form, updating settings, and displaying the widget. The code also includes an action to register the widget so that it can be added to site sidebars.

1. Building Your
First Widget
Chris Wilcoxson
slushman.com
Wo r d C a m p N a s h v i l l e 2 0 1 3

2. Who am I?

4. slushman

5. Mike Curb College of
Entertainment & Music Business

6. Photo Source: http://citylifechurch.org.uk

7. Plugin Name
Plugin URI
Description
Version
Author
Author URI
License

8. Plugin Name: Boilerplate Widget
Plugin URI: http://slushman.com/plugins/boilerplate-widget
Description: Boilerplate code to start building your widget.
Version: 0.1
Author: Slushman
Author URI: http://www.slushman.com
License: GPLv2

9. ***********************************************************************
Copyright (C) 2013 Slushman
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General License for more details.templates/classic.php
You should have received a copy of the GNU General License
along with this program. If not, see <http://www.gnu.org/licenses/>.
***********************************************************************

10. class boilerplate_widget
extends WP_Widget {

11. What is a class?

12. Instances

13. class boilerplate_widget
extends WP_Widget {

14. function __construct() {
$name = __( 'Slushman Boilerplate' );
$opts['description’] = __( 'Create your own widget using this
code.', 'slushman-boilerplate-widget' );
$opts[‘classname’] = ‘’;
$control = array( ‘width’ => ‘’, ‘height’ => ‘’ );
parent::__construct( false, $name, $opts, $control );
} // End of __construct function

16. function __construct() {
$name = __( 'Slushman Boilerplate' );
$opts['description'] = __( 'Create your own widget using
this code!.', 'slushman-boilerplate-widget' );
$opts[‘classname’] = ‘’;
$control = array( ‘width’ => ‘’, ‘height’ => ‘’ );
parent::__construct( false, $name, $opts, $control );
} // End of __construct function

17. function __construct() {
$name = __( 'Slushman Boilerplate' );
$opts['description'] = __( 'Create your own widget using
this code!.', 'slushman-boilerplate-widget' );
$opts[‘classname’] = ‘’;
$control = array( ‘width’ => ‘’, ‘height’ => ‘’ );
parent::__construct( false, $name, $opts, $control );
} // End of __construct function

18. function form( $instance ) {
$defaults['title'] = 'Boilerplate Widget';
$instance = wp_parse_args( (array) $instance, $defaults );

19. function form( $instance ) {
$defaults['title'] = 'Boilerplate Widget';
$instance = wp_parse_args( (array) $instance, $defaults );

20. $textfield = 'title’;
echo '<p><label for="’ . $this->get_field_id( $textfield ) . '">’ . __(
ucwords( $textfield ) ) . ': <input class="widefat” id="’ . $this-
>get_field_id( $textfield ) . '” name="’ . $this->get_field_name(
$textfield ) . '” type="text” value="’ . esc_attr( $instance[$textfield] )
. '" /></label>';
} // End of form function

21. $textfield = 'title’;

22. echo '<p>
<label for="’ .
$this->get_field_id( $textfield ) . '">’ .
__( ucwords( $textfield ) ) . ‘

23. <input class="widefat”
id="’ . $this->get_field_id( $textfield ) . '”
name="’ . $this->get_field_name( $textfield ) . ’”

24. type="text”
value="’ . esc_attr( $instance[$textfield] ) . '" />
</label>';
} // End of form function

26. function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function

27. function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function

28. function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function

29. function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function

30. function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function

31. function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function

32. function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
$title = ( !empty( $instance['title'] ) ? apply_filters( 'widget_title',
$instance['title'] ) : '' );
echo ( !empty( $title ) ? $before_title . $title . $after_title : '' );
echo '<div id="sidebar-me">';

33. function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
$title = ( !empty( $instance['title'] ) ? apply_filters( 'widget_title',
$instance['title'] ) : '' );
echo ( !empty( $title ) ? $before_title . $title . $after_title : '' );
echo '<div id="sidebar-me">';

34. function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
$title = ( !empty( $instance['title'] ) ? apply_filters( 'widget_title',
$instance['title'] ) : '' );
echo ( !empty( $title ) ? $before_title . $title . $after_title : '' );
echo '<div id="sidebar-me">';

35. function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
$title = ( !empty( $instance['title'] ) ? apply_filters( 'widget_title',
$instance['title'] ) : '' );
echo ( !empty( $title ) ? $before_title . $title . $after_title : '' );
echo '<div id="sidebar-me">';

36. function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
$title = ( !empty( $instance['title'] ) ? apply_filters( 'widget_title',
$instance['title'] ) : '' );
echo ( !empty( $title ) ? $before_title . $title . $after_title : '' );
echo '<div id="sidebar-me">';

37. function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
$title = ( !empty( $instance['title'] ) ? apply_filters( 'widget_title',
$instance['title'] ) : '' );
echo ( !empty( $title ) ? $before_title . $title . $after_title : '' );
echo '<div id="sidebar-me">';

38. ???

39. echo '</div><!-- End of #sidebar-me -->';
echo $after_widget;
} // End of widget function
} // End of boilerplate_widget class

40. add_action( 'widgets_init', 'slushman_boilerplate_widget_init' );
function slushman_boilerplate_widget_init() {
register_widget( 'boilerplate_widget' );
} // End of slushman_boilerplate_widget_init()

41. add_action( 'widgets_init', 'slushman_boilerplate_widget_init' );
function slushman_boilerplate_widget_init() {
register_widget( 'boilerplate_widget' );
} // End of slushman_boilerplate_widget_init()

42. add_action( 'widgets_init', 'slushman_boilerplate_widget_init' );
function slushman_boilerplate_widget_init() {
register_widget( 'boilerplate_widget' );
} // End of slushman_boilerplate_widget_init()

44. What’s in
Your widget?
Photo Source: http://poweredbyosteons.org/

45. Demo Widget

46. Questions?