Be my fan on FacebookHow to create a WordPress Widget
I think it's time to learn how to create a WordPress Widget. WordPress (WP from now on) is the most used blogging platform, and I want to help everybody to code their favorite widgets.
From the official site (where you can find a lot of widgets): WordPress Widgets (WPW) is like a plugin, but designed to provide a simple way to arrange the various elements of your sidebar content (known as "widgets") without having to change any code.
From a geeky point of view, a widget is a php file. Fullstop. Being a php file, you can make whatever you want. You "just" need to master php and follow some guidelines given by WP guys.
To make the simplest widget ever, you have to know only two WP functions:
The first is register_sidebar_widget($name, $function): adds your widget in the widget admin panel. You simply have to change $name with the name of your widget and $function with the function that your widget will execute.
The second one is add_action($event, $function): $event tells what event your $function should be associated with.
Ok, now let's write some php
-
<?php
-
/*
-
Plugin Name: Triqui
-
Plugin URI: http://www.emanueleferonato.com/
-
Description: Test widget
-
Author: Emanuele Feronato
-
Version: 1
-
Author URI: http://www.emanueleferonato.com/
-
*/
-
-
function triqui_widget() {
-
echo"<h2>Triqui widget</h2>I love <a href = \"http://www.emanueleferonato.com\">Emanuele Feronato</a>";
-
}
-
-
function init_triqui(){
-
register_sidebar_widget("Triqui", "triqui_widget");
-
}
-
-
add_action("plugins_loaded", "init_triqui");
-
-
?>
Lines 2-9: This commented code is needed to show WP users who made the plugin, what does the plugin do, where to download updates, and so on. Look at this picture:
It represents your plugin management page, and you can see how your information is displayed according to what you write in lines 2-9
Line 11: Beginning of the widget itself
Line 12: The widget... just writing the title (between h2 tags) and a link to my blog
Line 15: Function to initialize the widget
Line 16: As explained before, I am registering the sidebar widget calling it Triqui, and want it to execute the triqui_widget function, the one at lines 11-13
Line 19: When the plugins are loaded, I want init_triqui to be executed. Doing this way, once plugins are loaded, I register the sidebar widget that will display the link at my blog.
And that's all.
Now you have to save your file with a php extension (for example triqui.php) and upload it in your wp-content/plugins directory you will find in your WP installation.
Then you will find your Triqui plugin in your plugin management page and once you activate it you will find the Triqui widget in your Sidebar Arrangement page (Presentation -> Widgets in your admin panel)
... and... that's it... now drag your widget into your sidebar and you will display my link in your blog.
This was the very first widget... but soon I will teach you how to develop more complex and interactive widgets, and, why not, widgets that could you earn some money.
Meanwhile, why don't you display my widget for a day or two? If you do it...
(30 votes, average: 4.53 out of 5)
Loading ...You will be pleasantly surprised by WordPress Themes provided by Template Monster. All of them are of professional design and high quality.
38 Responses to “How to create a WordPress Widget”
Leave a Reply
Trackbacks
-
Plugin olarak widget yapmak. | WebListele on
August 7th, 2008 3:48 pm
[...] Biraz araştırma yapınca plugin ve beraberinde widget yapmanın sanıldığından daha kolay olduğunu gördüm. Öncelikle yararlandığım kaynağı göstermeliyim ki merak edenler kaynağından bakabilirler. http://www.emanueleferonato.com/2008/02/15/how-to-create-a-wordpress-widget/ [...]
-
c h u o n g n g u y e n » Blog Archive » Meta-Lite Widget: my first WordPress plugin on
August 11th, 2008 4:12 am
[...] on tutorials from Widgetizing Plugins, Lisa Stewart, Emanuele Feronato, and especially Hrw website; here is my first plugin for WordPress: Meta-Lite Widget for your [...]
-
Create a Wordpress MochiAds Leaderboards Widget : Emanuele Feronato on
October 17th, 2008 1:40 pm
[...] continuing, I suggest you to read How to create a WordPress Widget if you don’t have experience with WP [...]
-
Sanningen som jag ser den » Widget on
November 5th, 2008 1:45 am
[...] followed this easy tutorial to make it. It was speedily done, and I hope I can sleep [...]
-
jmdelisle.com » Mon premier Widget. on
January 16th, 2009 9:26 pm
[...] http://www.emanueleferonato.com/2008/02/15/how-to-create-a-wordpress-widget/ Catégories: Non classé « URL rewriting : pourquoi, comment [...]
-
Cómo crear un widget de wordpress. | Entre Códigos on
January 23rd, 2009 9:52 am
[...] Emanuele Feronato Wordpress Widgets [...]
-
Sidebar Widgets | NSLog(); on
July 2nd, 2009 12:58 am
[...] how to make a sidebar widget? A quick Google search pointed me here, here, here, here, and of course here. Did I miss [...]
Posts
- Rick Triqui: my first PlayCrafter game
- Prototype of a Flash game like Meeblings
- Games for the game developers!
- The art of debugging
- How to embed a text file in Flash
- Create a Flash game in minutes with PlayCrafter
- Upgrade your Flash CS4 to 10.0.2
- Play Mazeroll, my latest Box2D game
- Triqui MochiAds Arcade plugin for WordPress Released!!
- The MochiAds funnel
- Flash game creation tutorial - part 1
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Create a flash draw game like Line Rider or others - part 1
- Create a Flash Racing Game Tutorial
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash artillery game - step 1
- Create a flash draw game like Line Rider or others - part 5
- Flash game creation tutorial – part 5.2 (4.9 out of 5)
- Flash game creation tutorial – part 3 (4.86 out of 5)
- Creation of a platform game with Flash – step 2 (4.84 out of 5)
- Create a survival horror game in Flash tutorial – part 1 (4.82 out of 5)
- Create a flash artillery game – step 1 (4.82 out of 5)
- Create a Flash Racing Game Tutorial (4.8 out of 5)
- Create a flash artillery game – step 2 (4.75 out of 5)
- New tile based platform engine – part 6 – ladders (4.74 out of 5)
- Flash game creation tutorial – part 2 (4.73 out of 5)
- The experiment – one year later (4.7 out of 5)
Just out of curiosity, what do you use to syntax highlight your scripts? Is it something that comes with wordpress?
It’s called syntax highlighter, google for wordpress syntax highlighter and you will find a lot
Thanks
Thank for for interesting widget ideas.
Thanks for the tutorial…
LOVE IT! :D
I was looking for this type of articles. Now I have got some ideas about creating WordPress widget. Great!
man nice tutorial. stress out somewhere that the comments are usefull! :D it took me 15 minutes to figure out what was going on… nice one man!!
Just what I’m looking for. You seem to be able to code in all sorts of languages, your very skilled.
thanks for the great tutorial!
Thank you for this tutorial, but one concern:
I’ve done exactly what you said, but when I activate the plugin and add it to a sidebar in WP 2.5.1, I then get a blank screen following a save of my new settings.
Refreshing the page or using the back button let’s me see the admin side of things again, but everytime I change a setting (essentially submitting a form), I get a blank screen…any ideas why?
Thanks
Nice, I like it. Keep up the good work.
Thanks for the tutorial. I wish the guys at WP would learn to write tutorials this simple and concise.
It was really simple to understand. Thanks for the good work. I’m going to start to write a widget now itself. :-)
Great article thanks. I have used it to code up my own widget that I use to display the latest uploads I do through ShoZu in the sidebar of my wordpress web site.
Thanks for a great tutorial for beginner plugin developers! Best “first step” resource I could find!
Penso che ora mi scrivero da solo un widget per il login con tanto di avatar e link utili, grazie dell’articolo ;)
Thank you for the lovely short tutorial.
btw, where could i find the next part??
Cool.. but what about newbies like me? You don’t clarify as to where to paste this code? I can edit what you’ve wrote to fit my needs but how to I create a new php file and such?
Thanks for the short tutorial! It’d be lovely if you expanded it, with steps on adding small items like a text box or string like in ‘text box widget, one of the defaults.
Your explanation was a helpful thing. :)
Amy,
I think you just need a basic text editor. On my mac I personally used Aquamacs Emacs, which is great b/c it has a syntax system that works with several languages.
With a basic editor, just save it as .php, or if it auto adds .txt, just rename it to .php.
Thanks so much for the basic code. It really helps me understand what’s going on.
You might be interested to know that now you can create a little widget like this in a few minutes. Also the widget you create will be fully themeable.
Check out the little tool I built to create widgets at widgetifyr.com
Жаль не мое…..
hey can you create a ffmpeg upload widget ? im having hardtimes getting things going
Hi Emanuele,
Great tutorial, I will certainly follow-up with the continuation of this tutorial to be able to create Plugins/Widget that will conform to my specific needs.
Thanks again.
Thanks for such a nice tutorial(simple and sweet).
I’ve been trying this code on WP 2.7.1 and am getting the following error:
Warning: Cannot modify header information – headers already sent by (output started at [myhost]/plugins/daragh.php:31)
Does this work with WP 2.7.1? It does show up correctly in Admin -> Widgets and appears to work fine up until I add it to the sidebar and click save – which is where I see the above message.
Oddly enough – it does actually *work* on the page itself, just don’t know why I’m getting the error.
Hi Daragh, I think your problem might be because your php tag doesn’t start on the first line. Make sure you delete blank space before your php tag
I am not sure how to make a file available for download. I found creating widgets is much easier for Blogger and Typepad. For Wordpress, what is the code I would need to make my file downloaded from my server.
Very very very good tutorial… tks!!!
I want to create a widget to send sms, for blog. but I want to give this feature only to registered user, how to get registration data? how I check user is loged in or not?