This is Part 2 of The Complete Guide To Writing a WordPress Widget Series.
The process of creating WordPress widgets is relatively straightforward regardless of what functionality you’re building. That is to say that thanks to the WordPress API, there’s a standard way to put together a widget
But before jumping into writing code, it’s important to understand how to navigate and to use the available resources for WordPress-based development.
In this post, we’ll take a quick look at the WordPress Codex and then put together some skeleton code that we’ll use throughout the remainder of this series to create our plugin.
1. The WordPress Codex
The WordPress Codex is an incredibly rich source of documentation for all things WordPress.
Regardless of if you’re just getting started with a new WordPress installation or if you’ve been developing projects on top of the application, this particular site is worth bookmarking as you will likely be referring to it often.
Although the Codex covers an incredible amount of information, we’re primarily concerned with the Widget API.
Though I highly recommend reading through that page at some point, we’re primarily concerned with the section on Building Widgets.
2. A Foundation For Widget Development
According to the Widget API, there is a default configuration that serves as the common foundation for developing all WordPress widgets.
In the first post in this series, we created an empty file that will eventually contain the code for the widget. Let’s open the file and stub out the following code. We’ll take a look at each function after the code snippet:
[cc lang=”php”]
[/cc]
Of course, this is pretty barebones, right? Either way, that’s all that’s needed. Here’s a description of each of the above functions:
- Tweet_It kicks off the process of the actual widget. Eventually, we’ll setup JavaScript, CSS, and localization calls into the WordPress system here.
- Form has all code necessary to display the administration panel
- Update contains all logic necessary to update the widget. It’s called once a user modifies values and then clicks Save.
- Widget contains the code responsible for displaying the widget on the front-end of the blog. That is, the part of the site that visitors see.
Whenever I’m working on a project like this, I like to document each function and provide as much clarity in the code as possible. So, for now, let’s add some comments to each of the functions:
[cc lang=”php”]
[/cc]
Finally, we need to go ahead and add the author information and a copy of the GPL license to the top of the plugin. Fill out the fields however you’d like. Mine looks like this:
[cc lang=”php”]
/*
Plugin Name: Tweet It
Description: A simple widget for tweeting out a message about the site that the user is on.
Version: 1.0
Author: 8BIT
Author URI: http://8bit.io
License:
Copyright 2011 8BIT
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License, version 2, as
published by the Free Software Foundation.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
[/cc]
The final version of the file should look like this:
[cc lang=”php”]
[/cc]
You can grab a copy of the file here. Drop this in your plugins directory, if needed.
At this point, we’ve got all we need to begin working on the first iteration of the plugin. In the next post, we’ll do that.
Kyle Reed says
I do not know why, but I just love the wordpress codex. You are right, it is full of some amazing resources
Tom McFarlin says
Yep – solid resource, for sure.