CrazyLeaf Editorial Widgets in WordPress are small components that one can write which from the admin area of wordpress lets the admin to drag and drop a widget on any of the registered widgetize area of the theme. Then the widget will perform its function echo its output on the area where it is dragged and dropped.
All the registered widgets are seen in the widgets menu in the admin section as shown below.
Creating widgets in wordpress
Creating widgets in WordPress is very simple. We are now going to create a widget in WordPress which will display a few newest posts posted in WordPress.
Here is the code of the widget which you can put in the functions.php file of your theme :
class trywidget extends WP_Widget {
function trywidget() {
// widget actual processes
$widget_ops = array('classname' => 'trywidget', 'description' => 'description for trywidget' );
$this->WP_Widget('trywidget', 'trywidget', $widget_ops);
}
function form($instance) {
// outputs the options form on admin
$defaults = array( 'title' => __('Latest posts'), 'count' => 0 );
$instance = wp_parse_args( (array) $instance, $defaults );
$count = isset($instance['count']) ? $instance['count'] :0;
?>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" />
<label for="<?php echo $this->get_field_id( 'count' ); ?>"></label>
<input id="<?php echo $this->get_field_id( 'count' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'count' ); ?>" value="<?php echo $instance['count']; ?>" />
}
function update($new_instance, $old_instance) {
// processes widget options to be saved
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['count'] = !empty($new_instance['count']) ? $new_instance['count'] : 0;
return $instance;
}
function widget($args, $instance) {
// outputs the content of the widget
extract( $args );
$title = apply_filters('widget_title', $instance['title'] );
$count = $instance['count'] ? $instance['count'] : '0';
echo $before_widget;
if ( $title )
echo $before_title . $title . $after_title;
echo '
<ul>';
query_posts('showposts='.$count);
while ( have_posts() ) : the_post(); ?>
<li><a title="Permanent Link to <?php the_title_attribute(); ?>" rel="bookmark" href="<?php the_permalink() ?>"></a></li>
echo '</ul>
';
echo $after_widget;
}
}
register_widget('trywidget');
To create a widget you have to create a class which extends the base class WP_Widget.
Constructor
function trywidget() {
// widget actual processes
$widget_ops = array('classname' => 'trywidget', 'description' => 'description for trywidget' );
$this->WP_Widget('trywidget', 'trywidget', $widget_ops);
}
In the constructor we give id and the name which are unique to this widget . With these values we can also pass some other option for our widget like in our example we are passing the description of the widget which will be displayed.
Getting the widget options displayed in the admin section
function form($instance) {
// outputs the options form on admin
$defaults = array( 'title' => __('Latest posts'), 'count' => 0 );
$instance = wp_parse_args( (array) $instance, $defaults );
$count = isset($instance['count']) ? $instance['count'] :0;
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" />
</p>
<p>
<label for="<?php echo $this->get_field_id( 'count' ); ?>"><?php _e( 'Number of post:' ); ?></label>
<input id="<?php echo $this->get_field_id( 'count' ); ?>" name="<?php echo $this->get_field_name( 'count' ); ?>" value="<?php echo $instance['count']; ?>" class="widefat" />
</p>
<?php
}
To display the options in the admin you have to override the function function form($instance) in you widget class . In this function we have created two fields as options to the widget. One is the title and second is how many newest posts should be displayed by your widget. Once you have written this function and drag and drop your widget on one of the widgetize area you should be able to see your form as shown below.
Updating the options of your widget
function update($new_instance, $old_instance) {
// processes widget options to be saved
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['count'] = !empty($new_instance['count']) ? $new_instance['count'] : 0;
return $instance;
}
To update the options of your widget once save is clicked on the widget shown above we have to override the function function update($new_instance, $old_instance).
In this we have to add the values $intance variable and the options will be saved automatically.
Actual functionality of the widget
function widget($args, $instance) {
// outputs the content of the widget
extract( $args );
$title = apply_filters('widget_title', $instance['title'] );
$count = $instance['count'] ? $instance['count'] : '0';
echo $before_widget;
if ( $title )
echo $before_title . $title . $after_title;
echo '
<ul>';
query_posts('showposts='.$count);
while ( have_posts() ) : the_post(); ?>
<li><a title="Permanent Link to <?php the_title_attribute(); ?>" rel="bookmark" href="<?php the_permalink() ?>"></a></li>
echo '</ul>
';
echo $after_widget;
}
We have to add the actual functionality of the widget in the function function widget($args, $instance) . Here we are first removing the options for the widget which were saved. We remove the title option and display it . Then we get the count and then using the WordPress api query_posts we get the newest posts and then echo them.
Once this is done the widget is ready. Then we have to register the widget with the WordPress system using the api register_widget(‘trywidget’); .
Now the widget is ready and after it is dragged and dropped on a widgetize area in the admin the output of the widget can be seen in the front end.
Conclusion
Widgets are very powerful components of the wordpress systems. Now creating widgets with the wordpress api has become very simple. This has made developing widgets for wordpress fast and very easy.
Loading…