WordPress is one of the most powerful, and popular, ways to publish a blog or website on the Internet. One of the things that makes WordPress so powerful is its extensibility – that is, the relative ease with which someone can make their standard WordPress installation accomplish certain additional tasks simply by installing discrete packages of code. One common way to extend WordPress is through the use of a “widget.”

Making WordPress Widgets

Widgets give a WordPress administrator the ability to display certain types of information or even run certain types of small self-contained programs in predefined areas of a page’s sidebar. (Note, of course, that a WordPress sidebar can be at the bottom of your theme, as well as on either side of your pages.)

Planned Functionality

The first step to making your own WordPress widgets is to identify exactly what you want your widget to do. Identifying your goals will serve two purposes. First, you’ll be able to search WordPress’ widget directory (available at http://wordpress.org/extend/) to verify that there aren’t any existing widgets that you can use. Second, assuming that you can’t simply download an existing widget to satisfy your requirements, having a complete list of what you want your widget to do will make it easier to make it yourself.

Initial Code

It’s beyond the scope of this article to include the actual code for any new widget, but just about any framework can either be found by doing a quick Internet search, or by looking at the code from an existing widget. Load the beginning code into your favorite text editor (Notepad++ is a great option if you don’t currently have a favorite) and identify the portions of the .php code that you’ll need to update or create.

The WordPress Loop

To the extent that you want your new widget to display information from any of your posts, such as by highlighting one (or a pre-defined number) of your posts – perhaps the title, a summary or even the preview picture, you will need to become more comfortable with the WordPress “Loop.” The Loop runs through your posts and selects those that you identify by various filters. You can read more about the Loop at http://codex.wordpress.org/The_Loop.


Don’t forget to style your new widget so that it looks consistent with the rest of your site. Since your widget will be in .php and .html, you can simply extend your existing style sheets to the widget output using the ids and classes you’ve identified within the widget.

Remember that a given theme must support widgets before you can activate your new widget on your WordPress site – or you must modify your current theme to support them. In any case, be sure to test your widget thoroughly, with different browsers if possible, as soon as you make it live on your site so that you can catch any unexpected behavior or stylistic issues before your site visitors experience them.

Categories : Web Development, WordPress
Tags : Widgets

author's photo

Author : Blue Cloud

Just a normal software developer who love to write code. Developing professional software since 1999. After working in the software industry for many years, I've started my own website to share knowledges and experiences.

blog comments powered by Disqus