Widgets are a cool new feature built into wordpress version 2.2, and allow you to drag mini plugins into your widget-enabled theme’s sidebars.
They have all kinds of uses, searches, polls, you name it.
This article will show you how to create a customisable Recent post widget for yourself.
Step 1 - Creating the file
First create a file called myRecentPosts_widget.php, you can call it what you like really, as long as you know what it is. Open it up in your favorite text/code editor.
Lets start by adding the ‘php’ tag and some information about the author:
1 2 3 4 5 6 7 8 | <?php /* Plugin Name: My Recent Posts widget Description: Adds a sidebar widget to display posts from a specified category Author: Mike Jolley, jolley_small@tesco.net Version: 1.0 Author URI: http://blue-anvil.com */ |
Done that? Well done, lets move on.
Step 2 - The widget function begin
Next we need to add the widgets functionality. Lets add the start of our function: the init function, which will wrap all our plugin functionality. We will also add a little code to make sure widgets are enabled (and the widget functions exist), to avoid errors:
1 2 3 4 | function widget_myRecentPosts_init() { if ( !function_exists('register_sidebar_widget') ) return; |
Now we can start adding our widgets functionality, the next code creates our function and gets variable values (some of these we will set later).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function widget_myRecentPosts($args) { // "$args is an array of strings that help widgets to conform to // the active theme: before_widget, before_title, after_widget, // and after_title are the array keys." - These are set up by the theme extract($args); // These are our own options $options = get_option('widget_myRecentPosts'); $title = $options['title']; // Title in sidebar for widget $show = $options['show']; // # of Posts we are showing $excerpt = $options['ex']; // Showing the excerpt or not $exclude = $options['exclude']; // Categories to exclude if ($show<1) $show = 1; if ($exclude=="") $exclude = "0"; |
The next piece of code will start outputting to the screen, using the default $args, and our widget title.
1 2 | // Output echo $before_widget . $before_title . $title . $after_title; |
Step 3 - The Posts Query
The next code starts pulling results from the database using queries. This is more complex, so don’t worry if it confuses you!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // GET POSTS global $wpdb; $sql = 'select DISTINCT * from '.$wpdb->posts.' INNER JOIN (select * from '.$wpdb->post2cat.' INNER JOIN '.$wpdb->categories .' ON '.$wpdb->post2cat.'.category_id = '.$wpdb->categories .'.cat_ID) as A ON '.$wpdb->posts.'.ID = A.post_ID WHERE (A.cat_ID NOT IN ('.$exclude.')) AND '.$wpdb->posts.'.post_status="publish" AND '.$wpdb->posts.'.post_type="post" GROUP BY ID ORDER BY '.$wpdb->posts.'.post_date DESC LIMIT 0,'.$show.';'; $posts = $wpdb->get_results($sql); |
The above query gets all posts that are published, not excluded (from one of our options), and orders them by date, limiting the number queried to another of our options.
The next piece of code checks if we had any results, and starts looping to output them in the sidebar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | // start list echo '<ul>'; // were there any posts found? if (!empty($posts)) { // posts were found, loop through them foreach ($posts as $post) { // format a date for the posts $post->post_date = date("F j, Y",strtotime($post->post_date)); // if we want to display an excerpt, get it/generate it if no excerpt found if ($ex) { if (empty($post->post_excerpt)) { $post->post_excerpt = explode(" ",strrev(substr(strip_tags($post->post_content), 0, 100)),2); $post->post_excerpt = strrev($post->post_excerpt[1]); $post->post_excerpt.= " [...]"; } } //output to screen echo '<li> <a class="post" rel="bookmark" href="'.get_permalink($post->ID).'"><span class="inner"> <strong class="title lifestyle">'.$post->post_date.' - '.$post->post_title.'</strong>'; if ($ex) echo '<br />'.strip_tags($post->post_excerpt); echo '</span></a></li>'; } } else echo "<li>No recent Posts</li>"; // end list echo '</ul>'; |
That was a lot, but its commented so read through to get a better understanding of how the rows are outputted. To finish our function we just close the function (and output the closing element of the widget).
1 2 3 | // echo widget closing tag echo $after_widget; } |
Step 4 - Creating the settings
Widgets make it easy to create a small settings dialog for your widget, our widget is going to get settings for:
- Widget title
- posts to show
- whether or not to show excerpt
- Categories to exclude from the list
Lets get started. We declare our settings function, and load the variables.
1 2 3 4 5 6 7 8 | // Settings form function widget_myRecentPosts_control() { // Get options $options = get_option('widget_myRecentPosts'); // options exist? if not set defaults if ( !is_array($options) ) $options = array('title'=>'Recent Posts', 'show'=>'5', 'excerpt'=>'1','exclude'=>''); |
Next we check if the settings form has been posted, updating the settings if it has.
1 2 3 4 5 6 7 8 9 10 | // form posted? if ( $_POST['recentArticles-submit'] ) { // Remember to sanitize and format use input appropriately. $options['title'] = strip_tags(stripslashes($_POST['recentArticles-title'])); $options['show'] = strip_tags(stripslashes($_POST['recentArticles-show'])); $options['excerpt'] = strip_tags(stripslashes($_POST['recentArticles-excerpt'])); $options['exclude'] = strip_tags(stripslashes($_POST['recentArticles-exclude'])); update_option('widget_myRecentPosts', $options); } |
So we have handled posted options, now we need a form! Lets get the options to show in the form by default.
1 2 3 4 5 | // Get options for form fields to show $title = htmlspecialchars($options['title'], ENT_QUOTES); $show = htmlspecialchars($options['show'], ENT_QUOTES); $excerpt = htmlspecialchars($options['excerpt'], ENT_QUOTES); $exclude = htmlspecialchars($options['exclude'], ENT_QUOTES); |
Now we can happily display the form. Notice we only need to write the fields, the widgets engine handles the form code!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // The form fields echo '<p style="text-align:right;"> <label for="myRecentPosts-title">' . __('Title:') . ' <input style="width: 200px;" id="myRecentPosts-title" name="myRecentPosts-title" type="text" value="'.$title.'" /> </label></p>'; echo '<p style="text-align:right;"> <label for="myRecentPosts-show">' . __('Show:') . ' <input style="width: 200px;" id="myRecentPosts-show" name="myRecentPosts-show" type="text" value="'.$show.'" /> </label></p>'; echo '<p style="text-align:right;"> <label for="myRecentPosts-excerpt">' . __('Show excerpt:') . ' <input style="width: 200px;" id="myRecentPosts-excerpt" name="myRecentPosts-excerpt" type="text" value="'.$excerpt.'" /> </label></p>'; echo '<p>Enter the categories to exclude below, this must be a comma separated list of category id\'s!</p>'; echo '<p style="text-align:right;"> <label for="myRecentPosts-exclude">' . __('Exclude:') . ' <input style="width: 200px;" id="myRecentPosts-exclude" name="myRecentPosts-exclude" type="text" value="'.$exclude.'" /> </label></p>'; echo '<input type="hidden" id="myRecentPosts-submit" name="myRecentPosts-submit" value="1" />'; } |
And thats that for settings!
Step 5 - Register the widgets
The last piece of code registers the widget for use. After that were done.
1 2 3 4 5 6 7 8 9 10 11 | // Register widget for use register_sidebar_widget(array('My Recent Posts', 'widgets'), 'widget_myRecentPosts'); // Register settings for use, 300x100 pixel form register_widget_control(array('My Recent Posts', 'widgets'), 'widget_myRecentPosts_control', 300, 200); } // Run code and init add_action('widgets_init', 'widget_myRecentPosts_init'); ?> |
Widget armed
Now its finished, upload to plugins directory, activate it, then go to the widgets control panel (under the presentation tab of the wordpress admin) and drag it into one of your sidebar widget sections.

Click the little form icon on the widget to bring up the settings form

In action it looks like this:

Lazy mans corner
For a full code listing, click here
Download it all zipped up below.
Downloaded a total of 1255 times
Enjoy
I hope my little tutorial on widget creation was of a great help
Found this post useful? Why not buy me a coffee!












22 - alias says:
how to plug this code anywhere in the page i don’t like widgets personally is there a ?
Comment made on October 16, 2007 at 3:14 pm
23 - Alex says:
Hey Mike,
since the plugin is not compatible with WP 2.3 are you planning to upgrade the plugin? It would be very sad if it’s not usable in the future
Thanks
Alex
Comment made on October 23, 2007 at 4:24 pm
24 - Ellen says:
I’m interested in adding to this widget an indication of how many comments a post has received… i.e,
Debugging (Tuesday, Sep 18)
Why doesn’t everyone just get a Mac? (7 comments)
but am not sure what code to add to the widget or where to add it.
Comment made on November 4, 2007 at 6:25 pm
25 - Justin says:
Thanks for putting together a great plugin, Mike. I made a few changes to suit my own needs, and in the process updated it to work with 2.3.
@Alex - To make this widget 2.3 ready, you can just replace the wpdb calls with something like:
global $post;
$posts = get_posts(’numberposts=’.$show.’&category=’ . $category . ‘&exclude=’ . $exclude);
Comment made on November 11, 2007 at 7:07 pm
26 - Carlo says:
Hello. Im’ sorry but your link
http://blue-anvil.com/downloads/myRecentPosts.php.txt
returns
“A file permissions error has occurred. Please check the permissions on the script and the directory it is in and try again.”
Comment made on November 29, 2007 at 12:02 pm
27 - WordPress Twitter widget | seanys.com says:
[...] Thanks go to Mike Jolley for his handy widget tutorial. [...]
Pingback made on December 18, 2007 at 4:53 pm
28 - nazieb dotcom » My First WP Widget: Expandable Links List says:
[...] http://blue-anvil.com/archives/create-a-wordpress-recent-posts-widget http://lonewolf-online.net/computers/knowledgebase/wordpress-how-to-create-widgets/ [...]
Pingback made on December 31, 2007 at 10:14 am
29 - WordPress Plugins Database » Plugin Details » My Recent Posts widget says:
[...] Visit [...]
Pingback made on February 1, 2008 at 7:49 am
30 - Fareeha says:
Excellent! I have modified the functionality to create another widget. I was actually confused at some points. You have clarify my confusion. Thanks a lot.
Comment made on June 8, 2008 at 8:17 am
31 - Marlon Maulsby says:
nice tutorial, how would i allow multiple instances of this widget?
Comment made on July 21, 2008 at 2:54 am