Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

How 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

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:

WordPress widget

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)

WordPress widget

… 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…

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (77 votes, average: 4.43 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 63 comments

  1. Graham Kaemmer

    on February 18, 2008 at 5:08 pm

    Just out of curiosity, what do you use to syntax highlight your scripts? Is it something that comes with wordpress?

  2. Emanuele Feronato

    on February 19, 2008 at 10:33 am

    It’s called syntax highlighter, google for wordpress syntax highlighter and you will find a lot

  3. Graham Kaemmer

    on February 19, 2008 at 3:30 pm

    Thanks

  4. Dmitry

    on February 19, 2008 at 4:59 pm

    Thank for for interesting widget ideas.

  5. Cahyo

    on February 24, 2008 at 2:07 am

    Thanks for the tutorial…

  6. EagleVision

    on February 26, 2008 at 4:27 pm

    LOVE IT! :D

  7. Jogos

    on March 9, 2008 at 3:49 pm

    I was looking for this type of articles. Now I have got some ideas about creating WordPress widget. Great!

  8. stratos

    on May 12, 2008 at 11:00 pm

    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!!

  9. Mister Chief

    on May 27, 2008 at 9:41 pm

    Just what I’m looking for. You seem to be able to code in all sorts of languages, your very skilled.

  10. bmattb

    on June 7, 2008 at 5:09 am

    thanks for the great tutorial!

  11. bobman

    on July 8, 2008 at 1:01 am

    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

  12. tektok

    on July 29, 2008 at 7:35 pm

    Nice, I like it. Keep up the good work.

  13. Plugin olarak widget yapmak. | WebListele

    on August 7, 2008 at 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/ […]

  14. c h u o n g n g u y e n » Blog Archive » Meta-Lite Widget: my first WordPress plugin

    on August 11, 2008 at 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 […]

  15. Joe

    on August 23, 2008 at 6:15 am

    Thanks for the tutorial. I wish the guys at WP would learn to write tutorials this simple and concise.

  16. Nishanthan S.

    on August 31, 2008 at 12:08 pm

    It was really simple to understand. Thanks for the good work. I’m going to start to write a widget now itself. :-)

  17. Steve

    on September 9, 2008 at 12:43 pm

    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.

  18. Travis

    on September 17, 2008 at 9:13 pm

    Thanks for a great tutorial for beginner plugin developers! Best “first step” resource I could find!

  19. The DarkStar

    on September 22, 2008 at 12:37 pm

    Penso che ora mi scrivero da solo un widget per il login con tanto di avatar e link utili, grazie dell’articolo ;)

  20. Create a Wordpress MochiAds Leaderboards Widget : Emanuele Feronato

    on October 17, 2008 at 1:40 pm

    […] continuing, I suggest you to read How to create a WordPress Widget if you don’t have experience with WP […]

  21. Yohanes

    on October 19, 2008 at 7:16 am

    Thank you for the lovely short tutorial.
    btw, where could i find the next part??

  22. Sanningen som jag ser den » Widget

    on November 5, 2008 at 1:45 am

    […] followed this easy tutorial to make it. It was speedily done, and I hope I can sleep […]

  23. Amy

    on January 5, 2009 at 12:21 am

    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?

  24. jmdelisle.com » Mon premier Widget.

    on January 16, 2009 at 9:26 pm

    […] http://www.emanueleferonato.com/2008/02/15/how-to-create-a-wordpress-widget/ Catégories: Non classé « URL rewriting : pourquoi, comment […]

  25. Cómo crear un widget de wordpress. | Entre Códigos

    on January 23, 2009 at 9:52 am

    […] Emanuele Feronato WordPress Widgets […]

  26. Illysmanx

    on January 26, 2009 at 6:33 pm

    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. :)

  27. The Cobra

    on February 7, 2009 at 8:52 pm

    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.

  28. Nik Daum

    on March 12, 2009 at 11:08 am

    Thanks so much for the basic code. It really helps me understand what’s going on.

  29. Glenn

    on March 15, 2009 at 7:20 pm

    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

  30. sasha854

    on April 19, 2009 at 7:43 am

    Жаль не мое…..

  31. mysoogal

    on May 7, 2009 at 11:00 pm

    hey can you create a ffmpeg upload widget ? im having hardtimes getting things going

  32. QuickInsider

    on May 8, 2009 at 4:08 pm

    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.

  33. eazeenet

    on May 10, 2009 at 5:37 pm

    Thanks for such a nice tutorial(simple and sweet).

  34. Daragh

    on May 16, 2009 at 2:34 pm

    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.

  35. Russell D'Souza

    on May 27, 2009 at 11:54 pm

    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.

  36. Manuel Avalos

    on May 28, 2009 at 8:22 pm

    Very very very good tutorial… tks!!!

  37. smsfame.com

    on June 19, 2009 at 9:19 am

    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?

  38. Sidebar Widgets | NSLog();

    on July 2, 2009 at 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 […]

  39. dijifx

    on August 16, 2009 at 8:11 pm

    Very nice just the basics! I am interested in learning and this tut didnt go overboard.

  40. David Naian

    on August 23, 2009 at 7:06 am

    Cool, thanks, it worked just on the first try!!! (WordPress newby)Bye

  41. How to create wordpress mu-affiliate-platform plugin? | Instant Affiliate Commissions

    on September 15, 2009 at 5:47 pm

    […] http://www.emanueleferonato.com/2008/02/15/how-to-create-a-wordpress-widget/References […]

  42. Published-Articles

    on September 16, 2009 at 12:53 pm

    Great tutorial! it’s a big help for sure.

    Thanks,
    Roger

  43. Como criar um Widget no WordPress « Galeria de scripts

    on September 21, 2009 at 3:06 pm

    […] Como criar um Widget no WordPress Publicado Setembro 21, 2009 WordPress CMS Deixar um Comentário Tags: criar, tutorial, widget, wordpress Tutorial de criação de widget básico. Link […]

  44. How to create wordpress mu-affiliate-platform plugin? | Wordpress Help

    on September 25, 2009 at 11:04 am

    […] http://www.emanueleferonato.com/2008/02/15/how-to-create-a-wordpress-widget/References : Click here to cancel […]

  45. How to make a Sidebar Widget « Knowing more about Wordpress

    on September 27, 2009 at 10:32 pm

    […] http://www.emanueleferonato.com/2008/02/15/how-to-create-a-wordpress-widget/ […]

  46. mohit

    on November 18, 2009 at 9:37 am

    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.

  47. Francesco

    on December 17, 2009 at 11:24 pm

    ciao,
    io nella sidebar ho due colonne..come ne aggiungo una con larghezza pari a quella totale tra le due?

  48. bharadwaj

    on January 11, 2010 at 11:16 am

    you are just amazing code junkie… thanks A-LOT for this post

  49. 11 Most Common Wordpress Posts | New 2 Wp

    on March 9, 2010 at 9:51 am

    […] Widgets JUSTIN TADLOCK LONE WOLF DESIGNS VALUMS EMANUEL EFERONATO XAVISYS WP […]

  50. Sorin

    on May 10, 2010 at 11:13 pm

    Grazie mille Emanuele. Ho imparato adesso di fare i widgets.

  51. frila

    on December 28, 2010 at 6:04 am

    thank you very much for this very helpful post

  52. Useful link from my bookmarks | Sandra Jakovljevic

    on January 23, 2011 at 11:35 am

    […] Everybody hi for this month I prepared for you some of interesting links for february 2008 and subjest is: wordpress (my favorit CMS) *WordPress Themes, Plugins, Hacks, Guides, and More at http://wphacks.com/ *Perishable Press, great wordpress resource at  http://perishablepress.com/press/category/wordpress/ * Interesting wordpress resources    http://www.cssleak.com/cat/news/wordpress * How to create a WordPress Widget http://www.emanueleferonato.com/2008/02/15/how-to-create-a-wordpress-widget/ […]

  53. Muskie

    on June 15, 2011 at 6:52 am

    Now I need to add admin options, such as CSS styling and passing in a URL…

  54. Arif

    on June 18, 2011 at 1:03 pm

    Great.. Thanks.

  55. Melissa

    on June 23, 2011 at 2:40 am

    Excellent Tutorial

  56. Salustiano Muniz

    on July 6, 2011 at 10:13 pm

    Simple yet useful. Thanks a lot!

  57. John

    on July 13, 2011 at 9:12 am

    I intuitively closed tabs to other sites regarding this topic and had an inkling that this would be the most helfpul. It was! You succinct explanation was very helpful. Thanks. Very quality. Nice diagram that showed pointing arrows of where each line if code transduced to the wordpress plugin menu. AWESOME!!!!!!!!!

  58. Alex Kolozsy

    on August 13, 2011 at 5:04 am

    How in the world do you get your WP-PostRatings to work? My stars always come out grainy. What is going on here?

  59. Cory

    on October 5, 2011 at 11:19 pm

    You can simplify this now by only using the wp_register_sidebar_widget() function. No need for the add_action anymore, depending on what your wanting.

    Good post

  60. Top 12 Most Commonly Posted Topic Types In WordPress Articles - codeManiac | codeManiac

    on April 16, 2012 at 5:15 pm

    […] Widgets Justin Tadlock Lone Wolf Designs Valums Emanuel Eferonato Xavisys WP […]

  61. Korisni linkovi za februar | Sandra Jakovljevic

    on September 23, 2012 at 8:57 am

    […] Everybody hi for this month I prepared for you some of interesting links for february 2008 and subjest is: wordpress (my favorit CMS) *WordPress Themes, Plugins, Hacks, Guides, and More at http://wphacks.com/ *Perishable Press, great wordpress resource at  http://perishablepress.com/press/category/wordpress/ * Interesting wordpress resources    http://www.cssleak.com/cat/news/wordpress * How to create a WordPress Widget http://www.emanueleferonato.com/2008/02/15/how-to-create-a-wordpress-widget/ […]

  62. 38 Hot Excellent WordPress Tutorials For Both Professionals And Beginners | Creative Verse

    on March 2, 2013 at 7:09 pm

    […] How to create a WordPress widget http://www.emanueleferonato.com/2008/02/15/how-to-create-a-wordpress-widget/ […]

  63. 38 Hot WP tuts for beginners & pro’s | WordPress Tutorials 101

    on May 18, 2013 at 8:27 pm

    […] How to create a WordPress widget http://www.emanueleferonato.com/2008/02/15/how-to-create-a-wordpress-widget/ […]

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×