Web DevelopmentWordpress

Creating my first WordPress widget

Creating my first WordPress widget was a fun learning experiment. I wanted to build a simple widget that would embed a twitter feed as a news ticker.

This article gave me a lot to start and learn from: http://theme.fm/2011/06/tutorial-creating-a-twitter-widget-for-wordpress-91/

At the top of the following image you can see what it looks like when embedded into a page. It is the light gray bar at the top of the page. It uses the marquee jquery plugin available here:  http://aamirafridi.com/jquery/jquery-marquee-plugin

example

This is what the current widget config panel looks like. Very basic but it does integrate the color picker and most importantly… it works!

wp-panel

I didn’t want my widget to be stuck in standard widget boxes… thinking back I probably should have made it just a plugin. I added 2 entry boxes for jQuery insertBefore/insertAfter commands. This way it can mostly be placed anywhere in the DOM as it requires javascript to run anyways.