This is Part 1 of The Complete Guide To Writing a WordPress Widget Series.
As with most programming projects, it’s important to actually come up with a plan for development before actually jumping into coding.
Planning The Widget
We’re going to be building a widget that will introduce a new button on the sidebar – or any widgetized area – that will allow users to to Tweet out a message that they are on your site.
Additionally, we’re going to provide a few administration options that allow the message to be customized. The widget will support tweeting out…
- The title of your blog and its description
- The title of the current post and a link back to it.
- A custom message that you define in the admin panel
This will provide a good foundation for future widget development as it will encompass a variety of common practices used to build widgets including communication with third-party services such as Twitter.
For purposes of this series, let’s call it Tweet It (creative, right? :)).
Getting Started with Tweet It
With the above plan in place, we can go ahead and start planning what we’re going to need for the project:
- Obviously, we’re going to need a directory in our WordPress plugins directory out of which we can do our development
- We’re going to be introducing some styles to provide a nice look and feel for the presentation of the widget
- We’re going to be using jQuery to help us tie the widget to Twitter
As such, let’s go ahead and setup our plugin development directory.
First, go into your WordPress development directory, locate the wp-content directory, and then navigate to the plugins directory. Create a directory called twitter-it:
Next, let’s go ahead and setup the directories that we’ll use to keep our CSS and JavaScript files organized:
Finally, let’s go ahead and create an empty PHP file that will serve as the widget’s codebase. Call it tweet-it.php:
Next up, we’ll take a look at the WordPress Codex and the WordPress Widget API. They’re good resources for building out plugins and are worth getting familiar with especially as you begin to do more plugin development.
[…] 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 […]