Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Your First Widget

1,994 views

Published on

How to build your widget for WordPress, presented at WordCamp Nashville 2013 by Chris Wilcoxson of Slushman Design.

  • Be the first to comment

  • Be the first to like this

Building Your First Widget

  1. 1. Building YourFirst WidgetChris Wilcoxsonslushman.comWo r d C a m p N a s h v i l l e 2 0 1 3
  2. 2. Who am I?
  3. 3. slushman
  4. 4. Mike Curb College ofEntertainment & Music Business
  5. 5. Photo Source: http://citylifechurch.org.uk
  6. 6. Plugin NamePlugin URIDescriptionVersionAuthorAuthor URILicense
  7. 7. Plugin Name: Boilerplate WidgetPlugin URI: http://slushman.com/plugins/boilerplate-widgetDescription: Boilerplate code to start building your widget.Version: 0.1Author: SlushmanAuthor URI: http://www.slushman.comLicense: GPLv2
  8. 8. ***********************************************************************Copyright (C) 2013 SlushmanThis program is free software: you can redistribute it and/or modifyit under the terms of the GNU General License as published bythe 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 ofMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See theGNU General License for more details.templates/classic.phpYou should have received a copy of the GNU General Licensealong with this program. If not, see <http://www.gnu.org/licenses/>.***********************************************************************
  9. 9. class boilerplate_widgetextends WP_Widget {
  10. 10. What is a class?
  11. 11. Instances
  12. 12. class boilerplate_widgetextends WP_Widget {
  13. 13. function __construct() {$name = __( Slushman Boilerplate );$opts[description’] = __( Create your own widget using thiscode., slushman-boilerplate-widget );$opts[‘classname’] = ‘’;$control = array( ‘width’ => ‘’, ‘height’ => ‘’ );parent::__construct( false, $name, $opts, $control );} // End of __construct function
  14. 14. function __construct() {$name = __( Slushman Boilerplate );$opts[description] = __( Create your own widget usingthis code!., slushman-boilerplate-widget );$opts[‘classname’] = ‘’;$control = array( ‘width’ => ‘’, ‘height’ => ‘’ );parent::__construct( false, $name, $opts, $control );} // End of __construct function
  15. 15. function __construct() {$name = __( Slushman Boilerplate );$opts[description] = __( Create your own widget usingthis code!., slushman-boilerplate-widget );$opts[‘classname’] = ‘’;$control = array( ‘width’ => ‘’, ‘height’ => ‘’ );parent::__construct( false, $name, $opts, $control );} // End of __construct function
  16. 16. function form( $instance ) {$defaults[title] = Boilerplate Widget;$instance = wp_parse_args( (array) $instance, $defaults );
  17. 17. function form( $instance ) {$defaults[title] = Boilerplate Widget;$instance = wp_parse_args( (array) $instance, $defaults );
  18. 18. $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
  19. 19. $textfield = title’;
  20. 20. echo <p><label for="’ .$this->get_field_id( $textfield ) . ">’ .__( ucwords( $textfield ) ) . ‘
  21. 21. <input class="widefat”id="’ . $this->get_field_id( $textfield ) . ”name="’ . $this->get_field_name( $textfield ) . ’”
  22. 22. type="text”value="’ . esc_attr( $instance[$textfield] ) . " /></label>;} // End of form function
  23. 23. function update( $new_instance, $old_instance ) {$instance = $old_instance;$instance[title] = sanitize_text_field( $new_instance[title] );return $instance;} // End of update function
  24. 24. function update( $new_instance, $old_instance ) {$instance = $old_instance;$instance[title] = sanitize_text_field( $new_instance[title] );return $instance;} // End of update function
  25. 25. function update( $new_instance, $old_instance ) {$instance = $old_instance;$instance[title] = sanitize_text_field( $new_instance[title] );return $instance;} // End of update function
  26. 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. 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. 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. 29. 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">;
  30. 30. 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">;
  31. 31. 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">;
  32. 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. 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. 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. 35. ???
  36. 36. echo </div><!-- End of #sidebar-me -->;echo $after_widget;} // End of widget function} // End of boilerplate_widget class
  37. 37. add_action( widgets_init, slushman_boilerplate_widget_init );function slushman_boilerplate_widget_init() {register_widget( boilerplate_widget );} // End of slushman_boilerplate_widget_init()
  38. 38. add_action( widgets_init, slushman_boilerplate_widget_init );function slushman_boilerplate_widget_init() {register_widget( boilerplate_widget );} // End of slushman_boilerplate_widget_init()
  39. 39. add_action( widgets_init, slushman_boilerplate_widget_init );function slushman_boilerplate_widget_init() {register_widget( boilerplate_widget );} // End of slushman_boilerplate_widget_init()
  40. 40. What’s inYour widget?Photo Source: http://poweredbyosteons.org/
  41. 41. Demo Widget
  42. 42. Questions?

×