Building Your First Widget
-
Upload
chris-wilcoxson -
Category
Documents
-
view
1.219 -
download
5
description
Transcript of Building Your First Widget
![Page 1: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/1.jpg)
Building YourFirst Widget
Chris Wilcoxson
slushman.com
Wo rd C a m p N a s h v i l l e 2 0 1 3
![Page 2: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/2.jpg)
Who am I?
![Page 3: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/3.jpg)
![Page 4: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/4.jpg)
slushman
![Page 5: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/5.jpg)
Mike Curb College of Entertainment & Music Business
![Page 6: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/6.jpg)
Photo Source: http://citylifechurch.org.uk
![Page 7: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/7.jpg)
Plugin NamePlugin URIDescriptionVersionAuthorAuthor URILicense
![Page 8: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/8.jpg)
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
![Page 9: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/9.jpg)
***********************************************************************
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/>.
***********************************************************************
![Page 10: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/10.jpg)
class boilerplate_widget extends WP_Widget {
![Page 11: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/11.jpg)
What is a class?
![Page 12: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/12.jpg)
Instances
![Page 13: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/13.jpg)
class boilerplate_widget extends WP_Widget {
![Page 14: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/14.jpg)
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
![Page 15: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/15.jpg)
![Page 16: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/16.jpg)
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
![Page 17: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/17.jpg)
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
![Page 18: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/18.jpg)
function form( $instance ) {
$defaults['title'] = 'Boilerplate Widget';
$instance = wp_parse_args( (array) $instance, $defaults );
![Page 19: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/19.jpg)
function form( $instance ) {
$defaults['title'] = 'Boilerplate Widget';
$instance = wp_parse_args( (array) $instance, $defaults );
![Page 20: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/20.jpg)
$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
![Page 21: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/21.jpg)
$textfield = 'title’;
![Page 22: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/22.jpg)
echo '<p>
<label for="’ .
$this->get_field_id( $textfield ) . '">’ .
__( ucwords( $textfield ) ) . ‘
![Page 23: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/23.jpg)
<input class="widefat”
id="’ . $this->get_field_id( $textfield ) . '”
name="’ . $this->get_field_name( $textfield ) . ’”
![Page 24: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/24.jpg)
type="text”
value="’ . esc_attr( $instance[$textfield] ) . '" />
</label>';
} // End of form function
![Page 25: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/25.jpg)
![Page 26: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/26.jpg)
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance; } // End of update function
![Page 27: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/27.jpg)
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance; } // End of update function
![Page 28: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/28.jpg)
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance; } // End of update function
![Page 29: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/29.jpg)
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance; } // End of update function
![Page 30: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/30.jpg)
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance; } // End of update function
![Page 31: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/31.jpg)
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
return $instance; } // End of update function
![Page 32: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/32.jpg)
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">';
![Page 33: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/33.jpg)
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">';
![Page 34: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/34.jpg)
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">';
![Page 35: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/35.jpg)
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">';
![Page 36: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/36.jpg)
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">';
![Page 37: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/37.jpg)
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">';
![Page 38: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/38.jpg)
???
![Page 39: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/39.jpg)
echo '</div><!-- End of #sidebar-me -->'; echo $after_widget; } // End of widget function
} // End of boilerplate_widget class
![Page 40: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/40.jpg)
add_action( 'widgets_init', 'slushman_boilerplate_widget_init' );
function slushman_boilerplate_widget_init() {
register_widget( 'boilerplate_widget' );
} // End of slushman_boilerplate_widget_init()
![Page 41: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/41.jpg)
add_action( 'widgets_init', 'slushman_boilerplate_widget_init' );
function slushman_boilerplate_widget_init() {
register_widget( 'boilerplate_widget' );
} // End of slushman_boilerplate_widget_init()
![Page 42: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/42.jpg)
add_action( 'widgets_init', 'slushman_boilerplate_widget_init' );
function slushman_boilerplate_widget_init() {
register_widget( 'boilerplate_widget' );
} // End of slushman_boilerplate_widget_init()
![Page 43: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/43.jpg)
![Page 44: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/44.jpg)
What’s inYour widget?
Photo Source: http://poweredbyosteons.org/
![Page 45: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/45.jpg)
Demo Widget
![Page 46: Building Your First Widget](https://reader033.fdocuments.net/reader033/viewer/2022061209/548b1c9eb47959304d8b47a5/html5/thumbnails/46.jpg)
Questions?