building your first widget
DESCRIPTION
How to build your widget for WordPress, presented at WordCamp Nashville 2013 by Chris Wilcoxson of Slushman Design.TRANSCRIPT
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
Who am I?
slushman
Mike Curb College of Entertainment & Music Business
Photo Source: http://citylifechurch.org.uk
Plugin NamePlugin URIDescriptionVersionAuthorAuthor URILicense
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
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
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()
What’s inYour widget?
Photo Source: http://poweredbyosteons.org/
Demo Widget
Questions?