Building Your First Widget

Chris Wilcoxson
Chris WilcoxsonWeb Developer at Slushman Media
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
Who am I?
Building Your First Widget
slushman
Mike Curb College of
Entertainment & Music Business
Photo Source: http://citylifechurch.org.uk
Plugin Name
Plugin URI
Description
Version
Author
Author URI
License
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
***********************************************************************
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/>.
***********************************************************************
class boilerplate_widget
extends WP_Widget {
What is a class?
Instances
class boilerplate_widget
extends WP_Widget {
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
Building Your First Widget
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
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
function form( $instance ) {
$defaults['title'] = 'Boilerplate Widget';
$instance = wp_parse_args( (array) $instance, $defaults );
function form( $instance ) {
$defaults['title'] = 'Boilerplate Widget';
$instance = wp_parse_args( (array) $instance, $defaults );
$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
$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
Building Your First Widget
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance;
} // End of update function
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">';
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">';
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">';
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">';
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">';
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">';
???
echo '</div><!-- End of #sidebar-me -->';
echo $after_widget;
} // End of widget function
} // End of boilerplate_widget class
add_action( 'widgets_init', 'slushman_boilerplate_widget_init' );
function slushman_boilerplate_widget_init() {
register_widget( 'boilerplate_widget' );
} // End of slushman_boilerplate_widget_init()
add_action( 'widgets_init', 'slushman_boilerplate_widget_init' );
function slushman_boilerplate_widget_init() {
register_widget( 'boilerplate_widget' );
} // End of slushman_boilerplate_widget_init()
add_action( 'widgets_init', 'slushman_boilerplate_widget_init' );
function slushman_boilerplate_widget_init() {
register_widget( 'boilerplate_widget' );
} // End of slushman_boilerplate_widget_init()
Building Your First Widget
What’s in
Your widget?
Photo Source: http://poweredbyosteons.org/
Demo Widget
Questions?
1 of 46

Recommended

Migrare da symfony 1 a Symfony2 by
 Migrare da symfony 1 a Symfony2  Migrare da symfony 1 a Symfony2
Migrare da symfony 1 a Symfony2 Massimiliano Arione
930 views23 slides
Get into the FLOW with Extbase by
Get into the FLOW with ExtbaseGet into the FLOW with Extbase
Get into the FLOW with ExtbaseJochen Rau
9.3K views114 slides
PHP Tips & Tricks by
PHP Tips & TricksPHP Tips & Tricks
PHP Tips & TricksRadek Benkel
8.4K views117 slides
London XQuery Meetup: Querying the World (Web Scraping) by
London XQuery Meetup: Querying the World (Web Scraping)London XQuery Meetup: Querying the World (Web Scraping)
London XQuery Meetup: Querying the World (Web Scraping)Dennis Knochenwefel
740 views18 slides
News of the Symfony2 World by
News of the Symfony2 WorldNews of the Symfony2 World
News of the Symfony2 WorldFabien Potencier
3.5K views38 slides
How Kris Writes Symfony Apps by
How Kris Writes Symfony AppsHow Kris Writes Symfony Apps
How Kris Writes Symfony AppsKris Wallsmith
17.1K views116 slides

More Related Content

What's hot

Perl5i by
Perl5iPerl5i
Perl5iMarcos Rebelo
510 views24 slides
Barcelona.pm Curs1211 sess01 by
Barcelona.pm Curs1211 sess01Barcelona.pm Curs1211 sess01
Barcelona.pm Curs1211 sess01Javier Arturo Rodríguez
536 views44 slides
Php unit the-mostunknownparts by
Php unit the-mostunknownpartsPhp unit the-mostunknownparts
Php unit the-mostunknownpartsBastian Feder
1.6K views33 slides
How kris-writes-symfony-apps-london by
How kris-writes-symfony-apps-londonHow kris-writes-symfony-apps-london
How kris-writes-symfony-apps-londonKris Wallsmith
3.7K views75 slides
R57.Php by
R57.PhpR57.Php
R57.Phpguest63876e
7.6K views43 slides
Nop2 by
Nop2Nop2
Nop2guestea6d59
14.9K views47 slides

What's hot(20)

Php unit the-mostunknownparts by Bastian Feder
Php unit the-mostunknownpartsPhp unit the-mostunknownparts
Php unit the-mostunknownparts
Bastian Feder1.6K views
How kris-writes-symfony-apps-london by Kris Wallsmith
How kris-writes-symfony-apps-londonHow kris-writes-symfony-apps-london
How kris-writes-symfony-apps-london
Kris Wallsmith3.7K views
WordPress Security: Be a Superhero - WordCamp Raleigh - May 2011 by John Ford
WordPress Security: Be a Superhero - WordCamp Raleigh - May 2011WordPress Security: Be a Superhero - WordCamp Raleigh - May 2011
WordPress Security: Be a Superhero - WordCamp Raleigh - May 2011
John Ford31.2K views
JQuery Basics by Alin Taranu
JQuery BasicsJQuery Basics
JQuery Basics
Alin Taranu1.9K views
Report: Avalanche 'very likely' to host outdoor game at Coors Field by fabulouspsychop39
Report: Avalanche 'very likely' to host outdoor game at Coors FieldReport: Avalanche 'very likely' to host outdoor game at Coors Field
Report: Avalanche 'very likely' to host outdoor game at Coors Field
fabulouspsychop39158 views
Php My Sql by mussawir20
Php My SqlPhp My Sql
Php My Sql
mussawir202.1K views
PythonでJWT生成からボット作成、投稿までやってみた by itoxdev
PythonでJWT生成からボット作成、投稿までやってみたPythonでJWT生成からボット作成、投稿までやってみた
PythonでJWT生成からボット作成、投稿までやってみた
itoxdev3.6K views
Hidden in plain site – joomla! hidden secrets for code monkeys by Nicholas Dionysopoulos
Hidden in plain site – joomla! hidden secrets for code monkeysHidden in plain site – joomla! hidden secrets for code monkeys
Hidden in plain site – joomla! hidden secrets for code monkeys

Viewers also liked

Child Theme Frameworks by
Child Theme FrameworksChild Theme Frameworks
Child Theme Frameworksryngrn
2.3K views48 slides
BuddyPress Presentation - WCPhilly by
BuddyPress Presentation - WCPhillyBuddyPress Presentation - WCPhilly
BuddyPress Presentation - WCPhillyTimothy F McKenna
2.1K views14 slides
WordCamp Nashville: Clean Code for WordPress by
WordCamp Nashville: Clean Code for WordPressWordCamp Nashville: Clean Code for WordPress
WordCamp Nashville: Clean Code for WordPressmtoppa
11.2K views32 slides
WordPress APIs by
WordPress APIsWordPress APIs
WordPress APIsJoseph Scott
2.3K views15 slides
Wordpress para seus Clientes by
Wordpress para seus ClientesWordpress para seus Clientes
Wordpress para seus ClientesThiago Simões (Ted k')
1.8K views58 slides
Make WordPress Fit: The Cinderella Shoe Approach to Custom Theming by
Make WordPress Fit: The Cinderella Shoe Approach to Custom ThemingMake WordPress Fit: The Cinderella Shoe Approach to Custom Theming
Make WordPress Fit: The Cinderella Shoe Approach to Custom ThemingIntrepidRealist
2.4K views29 slides

Viewers also liked(20)

Child Theme Frameworks by ryngrn
Child Theme FrameworksChild Theme Frameworks
Child Theme Frameworks
ryngrn2.3K views
WordCamp Nashville: Clean Code for WordPress by mtoppa
WordCamp Nashville: Clean Code for WordPressWordCamp Nashville: Clean Code for WordPress
WordCamp Nashville: Clean Code for WordPress
mtoppa11.2K views
Make WordPress Fit: The Cinderella Shoe Approach to Custom Theming by IntrepidRealist
Make WordPress Fit: The Cinderella Shoe Approach to Custom ThemingMake WordPress Fit: The Cinderella Shoe Approach to Custom Theming
Make WordPress Fit: The Cinderella Shoe Approach to Custom Theming
IntrepidRealist2.4K views
Breaking up (your code) is hard to do by Dan Beil
Breaking up (your code) is hard to doBreaking up (your code) is hard to do
Breaking up (your code) is hard to do
Dan Beil1.6K views
Money Making Blogs by Chris Lema
Money Making BlogsMoney Making Blogs
Money Making Blogs
Chris Lema3.7K views
Truly Dynamic Sidebars for WordPress by ednailor
Truly Dynamic Sidebars for WordPressTruly Dynamic Sidebars for WordPress
Truly Dynamic Sidebars for WordPress
ednailor2K views
Object Oriented Programming for WordPress Plugin Development by mtoppa
Object Oriented Programming for WordPress Plugin DevelopmentObject Oriented Programming for WordPress Plugin Development
Object Oriented Programming for WordPress Plugin Development
mtoppa15.2K views
Using Theme Frameworks for rapid development and sustainability by Joel Norris
Using Theme Frameworks for rapid development and sustainabilityUsing Theme Frameworks for rapid development and sustainability
Using Theme Frameworks for rapid development and sustainability
Joel Norris1.7K views
Building App Themes for WordPress by Colin Loretz
Building App Themes for WordPressBuilding App Themes for WordPress
Building App Themes for WordPress
Colin Loretz1.6K views
Progressively Enhancing WordPress Themes by Digitally
Progressively Enhancing WordPress ThemesProgressively Enhancing WordPress Themes
Progressively Enhancing WordPress Themes
Digitally2.3K views
WordPress per giornalisti freelance by GGDBologna
WordPress per giornalisti freelance  WordPress per giornalisti freelance
WordPress per giornalisti freelance
GGDBologna1.4K views
Stop Creating Data For Sake of Creating Data by George Ortiz
Stop Creating Data For Sake of Creating DataStop Creating Data For Sake of Creating Data
Stop Creating Data For Sake of Creating Data
George Ortiz1.8K views
Supporting Wordpress by masonjames
Supporting WordpressSupporting Wordpress
Supporting Wordpress
masonjames8.2K views
Future of wordpress in Nashville by Ah So Designs
Future of wordpress in NashvilleFuture of wordpress in Nashville
Future of wordpress in Nashville
Ah So Designs1.8K views

Similar to Building Your First Widget

Backbone js by
Backbone jsBackbone js
Backbone jsrstankov
1.4K views166 slides
Symfony2 Building on Alpha / Beta technology by
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologyDaniel Knell
750 views59 slides
Hooks WCSD12 by
Hooks WCSD12Hooks WCSD12
Hooks WCSD12Jeffrey Zinn
15.1K views83 slides
Codigo taller-plugins by
Codigo taller-pluginsCodigo taller-plugins
Codigo taller-pluginsRocío Valdivia
512 views4 slides
Doctrine For Beginners by
Doctrine For BeginnersDoctrine For Beginners
Doctrine For BeginnersJonathan Wage
1.5K views69 slides
Bag Of Tricks From Iusethis by
Bag Of Tricks From IusethisBag Of Tricks From Iusethis
Bag Of Tricks From IusethisMarcus Ramberg
6.4K views88 slides

Similar to Building Your First Widget(20)

Backbone js by rstankov
Backbone jsBackbone js
Backbone js
rstankov1.4K views
Symfony2 Building on Alpha / Beta technology by Daniel Knell
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technology
Daniel Knell750 views
Doctrine For Beginners by Jonathan Wage
Doctrine For BeginnersDoctrine For Beginners
Doctrine For Beginners
Jonathan Wage1.5K views
Bag Of Tricks From Iusethis by Marcus Ramberg
Bag Of Tricks From IusethisBag Of Tricks From Iusethis
Bag Of Tricks From Iusethis
Marcus Ramberg6.4K views
Aura Project for PHP by Hari K T
Aura Project for PHPAura Project for PHP
Aura Project for PHP
Hari K T6K views
Propel sfugmd by iKlaus
Propel sfugmdPropel sfugmd
Propel sfugmd
iKlaus464 views
Blog Hacks 2011 by Yusuke Wada
Blog Hacks 2011Blog Hacks 2011
Blog Hacks 2011
Yusuke Wada2.7K views
50 Laravel Tricks in 50 Minutes by Azim Kurtaliev
50 Laravel Tricks in 50 Minutes50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 Minutes
Azim Kurtaliev1.7K views
laravel tricks in 50minutes by Barang CK
laravel tricks in 50minuteslaravel tricks in 50minutes
laravel tricks in 50minutes
Barang CK393 views
Designing Opeation Oriented Web Applications / YAPC::Asia Tokyo 2011 by Masahiro Nagano
Designing Opeation Oriented Web Applications / YAPC::Asia Tokyo 2011Designing Opeation Oriented Web Applications / YAPC::Asia Tokyo 2011
Designing Opeation Oriented Web Applications / YAPC::Asia Tokyo 2011
Masahiro Nagano2.6K views
TypeScriptで書くAngularJS @ GDG神戸2014.8.23 by Okuno Kentaro
TypeScriptで書くAngularJS @ GDG神戸2014.8.23TypeScriptで書くAngularJS @ GDG神戸2014.8.23
TypeScriptで書くAngularJS @ GDG神戸2014.8.23
Okuno Kentaro15.3K views
Implicit parameters, when to use them (or not)! by Julien Truffaut
Implicit parameters, when to use them (or not)!Implicit parameters, when to use them (or not)!
Implicit parameters, when to use them (or not)!
Julien Truffaut294 views
WordPress Cuztom Helper by slicejack
WordPress Cuztom HelperWordPress Cuztom Helper
WordPress Cuztom Helper
slicejack1.2K views

Building Your First Widget

  • 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
  • 5. Mike Curb College of Entertainment & Music Business
  • 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/>. ***********************************************************************
  • 11. What is a class?
  • 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
  • 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/

Editor's Notes

  1. Introduce yourselfPastor’s kid – moved aroundCall Nashville home, coming up on 9 years in a row hereI’m also a musician and play with the Band The Vibe Dials.
  2. The three loves of my life: Anna, Ginger, and Asher
  3. I’ve been working with WordPress since 2007, starting as a blogger on WordPress.comand eventually learning to build sites with the downloadable version.I’ve been developing plugins for two years and I started with a widget for BuddyPress.I currently do development and design under the name Slushman. You can view my portfolio and contact me at slushman.comMy most popular plugin is ArtistDataPress, which allows musicians to style their ArtistData calendars to match their WP sites.
  4. During the day, I work at Belmont University as a computer technician and web admin for the Mike Curb College of Entertainment and Music Business. I’m also currently working towards a web development degree while I build sites, design themes, and code plugins for the CEMB sites.
  5. Let’s jump inHow many have already developed their widget?How many are starting development?If you’re planning to build your own widget, it should be written as a separate plugin. You have the advantage of removing the widget without affecting your theme or the WordPress core code.FYI – we’re going to take a look at some boilerplate code I’ve written for creating widgets. This file will be available for download from my website: slushman.com.When you create a plugin, there are a several things you’ll need at the top of your file.
  6. Plugin name – the name of your pluginPlugin URI – where you have info about this pluginDescription – a brief description of what your plugin doesVersion – the version of your pluginAuthor – who wrote thisAuthor URI – where can people contact youLicense – the rules about how people can use your work. Most WordPress plugins use GPL2
  7. Here’s an example from our Boilerplate Widget code.
  8. This is the full GPL2 notification. Adding at the top of your plugin is completely optional, but recommended.
  9. This would be the first line of code for your widget.For those who aren’t experienced developers, you’re probably wondering:
  10. A class is a set of instructions to build a specific type of object, in this case, it’s a set of instructions for building a widget within WordPress.Using a class allows us to keep our code completely separated from the other widgets, plugins, and WordPress. Plus, it’s the only way to build one in WordPress, without rebuilding large parts of WP.It also allows us to create multiple instances of our widgets.
  11. Instances are clones of our widget.Think of it this way: if everyone in here drove a Toyota Camry. But we wouldn’t be driving the exact same Camry, like literally the same car. We would each drive our own Camry. Each one can have different properties, power windows, white paint job, premium stereo, etc.
  12. boilerplate_widget is the name of our example classExtends:Inherits the methods and properties of another classIn this case, our widget inherits the methods and properties of the WP Widget class. All we need to do is define our widget’s unique properties and functions.So, there are five parts you have to have for your widget.
  13. First is the constructor for our widget. It tells WordPress two pieces of information:The name of the widgetThe description of the widgetYou can optionally include a classname in the $opts array.
  14. These are what you see when you look at the Widgets page to choose a widget.
  15. parent::__construct() refers to the WP_Widget classThis tells the WP_Widget class to create a new widget with this and description.False refers to an optional parameter for construct that allows you to specify the base of the your ID attributes for your widget. If you just use FALSE here, it uses part of the unique class name. This argument does need to be unique, so I’ve found its better to just let WordPress figure this out for you.
  16. There is a fourth argument that can be passed here, which sets the width and height of the widget, but height is currently not used.I’ve rarely seen a need for this last argument. If your widget is going to be wider than 250px, the width argument is required.
  17. The form() functioncreates the form you see on the widget pageThis function has one parameter, $instance, which contains the settings for that instance of the widget.
  18. $defaults is an array of the default settings for the widget.Next is wp_parse_args(), which takes the defaults and merges the defaults array with the $instance array. The $instance array takes precedence, so the settings you’ve set there override any settings in $default.We reassign this to the $instance variable to use for the rest of this function
  19. Basically, we’re creating the HTML for a field, but there are some specific WordPress bits we need to use instead of the standard HTML.Lets break this down into individual easier to read chunks so we can see what’s going here
  20. First, we’ll assign the $textfield variable the name of our field, which makes it easier to use. In this case, the field name is “title”.
  21. To start the input field, we wrap it in p tags, which just spaces them out nicely.Then, we create the label for the field.The “for” attribute on the label tag needs the field’s ID, which we get using the get_field_id() function.get_field_id() creates a unique ID for this field for this instance and it uses the field’s name, so we give it that using the $textfield variable. So it may end up being something like “title15” or something. It just needs something unique compared to every other widget title.Then, as the label for the field, we capitalize the $textfield variable for the actual field label using the PHP function ucwords(), which capitalizes the first letter of each word.This will give us the field name “Title” with a capital T.
  22. Next, starts the actual HTML input field. The widefat class here refers to the CSS and widefat comes from WordPress and makes the text field look like other text fields within WordPress.The ID for the input also comes from the get_field_id() function.Then we give the field a name and we use the get_field_name() function. This gives the field a name for this instance, which is unique from all other field names. It also uses the $textfield variable
  23. Next we assign the the type of input field, which is just “text”. This could also be email, url, tel for phone numbers, and a variety of other types. In our case thought, we’ll just stick with text.The value attribute comes from the $instance variable we created earlier with wp_parse_args.We wrap the value in the esc_attr() function helps prevent security issues when displaying data. We’ll talk more about security later.Finally, we end the input field, label, and function.
  24. Now, if we activated our widget, we would have one text field, labeled “Title”, with the default value of “Boilerplate Widget” in the field.However, if we tried to change that value, it would not save. We need to tell WP_Widget what to do when we change the title.
  25. We do that with the update() function.
  26. update() needs the new $instance, which are the values being submitted from the form() function and the old $instance, which are the values already saved.
  27. First, reassign $old_instance to $instance, which creates a new array of values to work with in the rest of the update function.
  28. Then we reassign that particular value with the new value. $instance is an array of values, which means it contains several values assigned with names.In our case, we only have “title”, so we save the new value from the form. If you had more than one field in your form, you’d have a statement for each field.
  29. But we sanitize the input first using the sanitize_text_field() function.Without sanitizing first, it is possible to write a statement that damages our database and submit it through the widget form.Since we’re using a text field, WordPress has this built-in function, sanitize_text_field, that removes line breaks, tabs, extra white spaces, strips tags and octets, and converts &lt; characters into HTML entities that can be saved safely in the database.
  30. Lastly, the new $instance is returned, which tells the WP_Widget class to save the new values.
  31. Then we come to the widget() function. This is the actual widget output you see on the sidebar.I’ve broken this function down into three parts to make it easier to see what’s going on here. What you see here is the top of the function.
  32. You’ll notice there are two parameters, $args and $instance.$instance is the same thing we’ve seen before. Its an array of values related to that particular instance of the widget.$args comes from the WP_Widget class and contains some HTML and bits for use in the widget.
  33. The first thing we do is create variables from all the items contained in $args using PHP’s extract function.Then we echo the $before_widget variable, which starts the HTML for the widget output.
  34. Next, we create the $title variable by checking if $instance has a value for the title, if so we check for any filters for the widget’s title and assign it. If there is no value for the instance title, the $title variable is just blank.This is useful when you want a widget, but don’t need to the title bar, so you just set the title field to blank.
  35. If there is a value for title, we output the before_title HTML, the title itself, then the after_title HTML.
  36. After that, we echo an HTML div that begins the wrapper for the widget content.The second section of the widget function is…
  37. This next part is the output of your widget. It will vary based on what your particular widget does.
  38. After your content, we echo the end of the content div, then the $after_widget HTML.Notice, we’re also ending the class too.But we still have one bit of code we’ll need for our widget to run in WordPress.
  39. This is the last code needed for a widget.
  40. add_action tells WordPress when you run this function, run this function too. In this case, when WordPress runs widgets_init(), run our function, slushman_boilerplate_widget_init(), too.By the way, that function name does need to be unique, since we’re not using within the class.
  41. In slushman_boilerplate_widget_init (), we register our widget, using the unique class name we created at the top.
  42. Now, when we activate our widget plugin, WordPress will add the Boilerplate widget to the list of widgets in the Widget admin.
  43. What kind of widget do you want to create then?What has no one else created that you want to create?
  44. Show off the Latest LOLcat widget
  45. Questions?