This entry is part 2 of 5 in the Working with Widgets Series
Widgets are utilized by tons of WordPress themes and plugins as a way to display customized content in various locations, and they’re relatively easy to create, as long as you have the appropriate resources. The code below will give you everything you need to make extensive and advanced widgets that can do anything you want.
I am not going to explain what everything does, but it is not difficult to figure out. You can copy the code below into your functions.php or plugin file; it will register a simple widget that accepts a “title” and “message” options.
<?php /** * Example Widget Class */ class example_widget extends WP_Widget { /** constructor -- name this the same as the class above */ function example_widget() { parent::WP_Widget(false, $name = 'Example Text Widget'); } /** @see WP_Widget::widget -- do not rename this */ function widget($args, $instance) { extract( $args ); $title = apply_filters('widget_title', $instance['title']); $message = $instance['message']; ?> <?php echo $before_widget; ?> <?php if ( $title ) echo $before_title . $title . $after_title; ?> <ul> <li><?php echo $message; ?></li> </ul> <?php echo $after_widget; ?> <?php } /** @see WP_Widget::update -- do not rename this */ function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title'] = strip_tags($new_instance['title']); $instance['message'] = strip_tags($new_instance['message']); return $instance; } /** @see WP_Widget::form -- do not rename this */ function form($instance) { $title = esc_attr($instance['title']); $message = esc_attr($instance['message']); ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></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('message'); ?>"><?php _e('Simple Message'); ?></label> <input class="widefat" id="<?php echo $this->get_field_id('message'); ?>" name="<?php echo $this->get_field_name('message'); ?>" type="text" value="<?php echo $message; ?>" /> </p> <?php } } // end class example_widget add_action('widgets_init', create_function('', 'return register_widget("example_widget");')); ?> |
To expand on this simple widget, just duplicate and rename the fields, then modify their field types as necessary.
I will explain this code in detail, and provide examples of more advanced widgets in upcoming posts.
Thanks SO MUCH for providing such excellent resources !!
– you are my hero of the week 🙂
🙂
I’ll second the motion on the floor by Chip.
Today is my lucky day, as I’ve discovered Pippin’s site, purchased an excellent Custom Content Types plugin, and now find even more to learn within his resources.
The only thing that perplexes me is how I could have gone on so long without have come across your work/offerings/sharing Pippin.
You’ve now a new evangelist mate. Thanks.
@Michael – thanks! I hope you continue to find useful resources here. Don’t forget to follow me @pippinsplugins and @pippinspages if you want to stay up to date
You’re welcome. Besides the RSS grab I just entered into NetNewsWire, I’ll add you to my follows as well [scurries off to twitdom..]Done[/end surrying]
Pingback: Simple Recent Posts Widget | Pippin's Plugins
Pingback: List Categories Widget Plugin and Tutorial | Pippin's Plugins
What is the global posttypes line (line 31)? It doesn’t appear to be used, nor is it a WP global variable (like wpdb) that I can see…?
Ah! Good catch. That is left over from one of my widget plugins that I copied this code from. I’ll remove it now.
Nowadays WordPress requires a comment block at the top of your plugin to work. Put this at the top of the code and it will work as of WordPress 3.4.1:
/**
* @package Example
* @version 1.0
*/
/*
Plugin Name: Example widget
Plugin URI:
Description: Example widget
Author: littleguy
Version: 1.0
Author URI: http://example.com
*/
Yes, that is very true, but this code was not meant to be a plugin 🙂 Though of course you are more than welcome to place it in a plugin.
This is great, thank you!
will u plz explain how to give default values to “Text” & “Simple Message” fields i.e if user drags this widget in sidebar there are already some default values in these fields(like “Type your text here” in “Simple message field”)…Thank You
Great help… Thanks
Hi
I have tried this code out and although it does work, there is a small issue with the form.
When you first go to the Widgits page, the plugin is displayed properly but if you click on the save button the categories in the drop down menu remove themselves from the drop down menu and display themselves underneath.
Regards
Robert Austin
Could you show me a screenshot?
Where should I post the screenshot?
Regards
Robert Austin
I have worked out what is happening but I don’t know why.
This is the output for the select statement when the page loads:
category
post_tag
post_format
type
When Save is clicked this code changes to:
category
post_tag
post_format
type
The tag has moved to the end of the first line rather than after the options.
I am using FireFox but tested this in Google Chrome and in Chrome, after clicking save, the drop-down menu is just empty.
Regards
Robert Austin
Excellent post, direct and to the point. This is just what I needed to get started.
Thanks!
I’m trying to implement this example. However, I’m using the Clean Retina theme, which already has a lot of existing functions in functions.php. The existing functions are not organized in a class, unlike this example.
My question is how to integrate the two?
I would recommend setting this up as a separate plugin.
Thanks, that helps. New at this……. nice example.
Thanks! You gave me just the right amount of information to get my widget plugin up and running and live on the site. All it does is display my daily tip as a widget in the sidebar, but that’s all it needs to do. For now. I have plans..
I may also “generalise” it and release it, as no other plugin I’ve seen actually does the same thing..
You should remove closing php tag, you shouldn’t use them unless you have text content inside said file.
Hi!
this is great, but i can’t get shortcodes to work with it
any thought?
Excellent love it