1- Creamos la carpeta de nuestro proyecto en wp-content/plugins, en este ejemplo nuestro plugin se llamara ejemplo.
2- Generamos un archivo dentro de la nueva carpeta /ejemlo/ y lo llamaremos ejemplo.php (el nombre no tiene porqué ser el mismo del widget).
3- Añadiremos la cabecera donde estará la información relativa al widget:
/* oPlugin Name: Ejemplo Widget! oPlugin URI: http://www.oskratch.com/ oDescription: Sistema para bla bla bla... oVersion: 1.0 oAuthor: Òscar Periche oAuthor URI: http://www.oskratch.com/ oLicense: GPL2 o*/
4- Añadiremos el código básico y en los siguientes puntos pondré un ejemplo de cada una de las funciones que contiene:
class wp_ejemplo extends WP_Widget {
o// constructor
ofunction wp_ejemplo() {
o/* ... */
o}
o// widget form creation
ofunction form($instance) {
o/* ... */
o}
o// widget update
ofunction update($new_instance, $old_instance) {
o/* ... */
o}
o// widget display
ofunction widget($args, $instance) {
o/* ... */
o}
}
// register widget
add_action('widgets_init', create_function('', 'return register_widget("wp_ejemplo");'));
5- Función constructora (The Constructor)
function wp_my_plugin() {
parent::WP_Widget(false, $name = __('Ejemplo widget!', 'wp_widget_plugin') );
}
6- La función form()
// widget form creation
function form($instance) {
// Check values
if( $instance) {
$title = esc_attr($instance['title']);
$text = esc_attr($instance['text']);
$textarea = esc_textarea($instance['textarea']);
} else {
$title = '';
$text = '';
$textarea = '';
}
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Widget Title', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('text'); ?>"><?php _e('Text:', 'wp_widget_plugin'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>" type="text" value="<?php echo $text; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Textarea:', 'wp_widget_plugin'); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>"><?php echo $textarea; ?></textarea>
</p>
<?php
}
7- La update function()
// update widget
function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance['title'] = strip_tags($new_instance['title']);
$instance['text'] = strip_tags($new_instance['text']);
$instance['textarea'] = strip_tags($new_instance['textarea']);
return $instance;
}
8- La función widget() que se encarga de mostrar nuestro widget
// display widget
function widget($args, $instance) {
extract( $args );
// these are the widget options
$title = apply_filters('widget_title', $instance['title']);
$text = $instance['text'];
$textarea = $instance['textarea'];
echo $before_widget;
// Display the widget
echo '<div class="widget-text wp_widget_plugin_box">';
// Check if title is set
if ( $title ) {
echo $before_title . $title . $after_title;
}
// Check if text is set
if( $text ) {
echo '<p class="wp_widget_plugin_text">'.$text.'</p>';
}
// Check if textarea is set
if( $textarea ) {
echo '<p class="wp_widget_plugin_textarea">'.$textarea.'</p>';
}
echo '</div>';
echo $after_widget;
}
