Wordpress plugins are the single best way of integrating new functionality into a Wordpress install. You write the plugin, upload it to your site and activate it. If you grow tired of it, you de-activate it – it really is that simple. There are hundreds of great plugins already available but it’s always handy to know how to write one yourself, so here we go.

Episode 1: Making a very simple plugin and getting it recognised
The first step is to actually create your plugin and get it recognised within Wordpress before trying to include any functionality. So in this episode we’re going to create a very basic plugin that doesn’t actually do anything and install it.

#1 – Headers are important
Wordpress needs quite a strict setup in the head of the PHP file to identify the attributes of your plugin, so I’ll show you how mine looks:

/* Plugin Name: Seopher.com Demonstration Plugin Plugin URI: http://www.seopher.com Description: This is just a demonstration plugin to show how you build one Author: Steven York of Seopher.com Version: 0.1 Author URI: http://www.seopher.com */ “Plugin Name”, “Author” and “Description” are rather self explanatory. “Plugin URI” is a direct link to the project page for this plugin, where users can visit for updates, support etc. The version is a number you wish to assign to the release, so version it however you like. “Author URI” is your website. In this instance the “Author URI” and “Plugin URI” are the same because this is only a demonstration plugin rather than a dedicated project.

#2 – Plugin content
I then wrote a function to initialise the plugin, this is called later to write some content onto the specific plugin configuration page (under “Options”, where you see all the other plugin config pages). All this function does at the moment is return some HTML as a token gesture to show that we’ve actually got something working. The “wrap” div is significant because that is a Wordpress wide constant, placing all your content into a suitably styled container.

function initDemoPlugin() { ?> <div class=”wrap”> <h2>Seopher.com demonstration plugin</h2> This is just some sample content to show that we’ve got control over the content of this page. Rawr! </div> <?php }

#3 – Add the plugin to the submenu
This step involves writing a function to add the plugin into the “Options” sub-menu so that when it is activated you have somewhere to visit to configure the settings. See the code below:

function addPluginToSubmenu() { add_submenu_page(’options-general.php’, ‘Seopher demo plugin page’, ‘Seopher demo plugin’, 10, __FILE__, ‘initDemoPlugin’); } add_action(’admin_menu’, ‘addPluginToSubmenu’); All we’re doing is tying into the “add_submenu_page” function, where we’re passing several parameters. Firstly we’re specifying the parent page (in this case options-general.php) that the sub-menu page will sit under. The second parameter is the page title for the new page (as seen in the browser’s title bar). The third param is what appears in the sub-menu navigation. The next parameter is the priority of this function which can just be left at 10 for now. The final param is the function that is called to populate the page, in this case it’s the function we created in step #2.

Finally we use the Wordpress function “add_action” to call the function we’ve just written, simple!

#4 – Upload the PHP file
So if you compile all the code we’ve shown so far (or download my version here) into a PHP file, you can then upload it to the Wordpress install. Upload the PHP file to “/wp-content/plugins/” and you’re done.

#5 – Activate the plugin!
Log into your Wordpress install and visit the “Plugins” tab and you should see something similar to the picture below:

That’s your plugin! Click “activate” on the right hand side and it’s now active!

#6 – Visit the config
Click “Options” and you should see our plugin added to the sub-menu as per the screenshot below:

Clicking on that takes you to our plugin configuration page. All this page does is output the return of our initDemoPlugin() function that we wrote in #2. So clicking on “Seopher demo plugin” takes us to this page:

So there you have it, 6 steps to creating a dummy Wordpress plugin. In episode two I’ll start going through how we start integrating functionality into the plugin and we can start making something useful. I hope this was useful, check back soon for updates.

Image Management Tools

Aniga Gallery – Allows you to create picture galleries that use the WordPress comment system.

Batch Image Uploader – Upload and resize multiple images to your blog at once.

Duh Gallery – Simply creates a photo gallery from your uploads folder in WordPress.

ImageManager – Includes interface for browsing and uploading images and basic tools such as cropping and rotating.

WP Image Gallery – Create photo galleries from within WordPress and display them in posts.

fMoblog – Post pictures with descriptions from a mobile phone.

Pop-up Image Gallery – Photo gallery plugin with various options for transitions

PhotoZip – For quickly uploading photos; allows you to simply upload a .zip file to create an image gallery.

PictPress – Automatically generates a picture post from a directory on your server. Resizes pictures on the fly.

Importing Images from Other Services

Another Flickr – Allows your readers to browse thumbnails from your Flickr albums and go directly to full size images.

BubbleShare – Display photo galleries from your BubbleShare account.

Facebook Photos – Shows thumbnails of photos from your linked Facebook account.

Flickr Photo Album – Pulls in your Flickr photo sets and displays them as albums in WordPress.

FlickrRSS – Displays most recent images from any RSS feed from Flickr such as a user, group, or tags page.

Fotobook – Import your Facebook photo albums into a WordPress page.

ImageShack Uploader – Upload an image to ImageShack’s free storage service and insert a thumbnail into your posts.

Slickr Gallery – AJAX photo gallery that pulls in images and photosets from Flickr.

Smugmug Gallery Bar – Insert photos from your Smugmug account into blog posts.

Image Display Effects & Hacks

Enlarger – Displays a thumbnail but loads the bigger image in the background so when clicked the full size version loads instantly.

IImage Panorama – Helps you create a 360 degree panorama picture to add to your blog.

Image Headlines – Create cool text images for the titles of your posts.

Lightbox 2 – Generates thumbnails that when clicked load in a lightbox.

Multi-Topic Icon: Shows images that represent each of the categories assigned to a blog post.

Random Image – Pulls a random image you have places on your blog and links back to the post it came from.

Transparent PNG Fix – Make sure your PNG files don’t look nasty.

WP Wetfloor – Create the ever-popular reflection effect for the images on your blog.

Playing Music

Del.icio.us MP3 Player – Makes links to MP3s in your posts playable and easily postable to del.icio.us.

Audio Player – Inserts a simple MP3 player into your posts that plays uploaded audio files.

XSFP Player – Flash player that allows you to embed music on your blog via http.

What Am I Listening To?

DG PlayingNow Updater – Displays the song you are currently listening to on iTunes, MSN Messenger, or J. River Media Center.

EZ-Scrobbler – Displays your most recently listened to tracks on last.fm.

iTunes Spy – Displays your most recently listened to tracks on iTunes.

Pandora Feeds – Displays data from Pandora feeds, for example, a list of your stations, bookmarked songs, and bookmarked artists.

onAirNow – Now playing plugin that displays most recent song from iTunes or WinAmp.

Podcasting Tools

Odeo – Embed a podcast you’ve recorded on Odeo.

Podcast Release – A “release” form for guests of your podcast, accepting your terms.

PodPress – Full featured plugin for podcasters including feed generation, iTunes preview, and download stats.

iPodCatter – Helps podcasters created a valid feed for the podcast directory on iTunes.

Miscellaneous Audio Tools

Evoca Browser Mic – Allow your blog readers to send you voice comments which you can later post to your blog.

Odiogo – Converts your text to speech and provides a link for your readers to listen to your posts.

Video Tools

Anarchy Media Player – Plays a wide variety of audio/video file formats in the appropriate player on your blog.

Easy Inline SWF – Allows you to insert Flash files in .swf format into your posts without any weird tags.

SeeTheFace – Complete tool for recording video and posting to your blog.

Extreme Video – Plays any .flv file on your blog with support for YouTube, Google Video, Quicktime, and more.

Noembedder – Automatically adds a noembed section to any embedded content that does not already have one.

YouTube Brackets – Allows you to simply enter a URL for a YouTube video versus copying and pasting embed code.

wordTube – Video player that includes the ability to program a menu of videos.

TubePress – Display YouTube galleries as blog posts or a sidebar item.

YouTube Video Gallery – Displays thumbnails for any gallery from YouTube.

vPIP – vPIP stands for “Videos Playing In Place,” meaning it will only embed after a specified image or link is clicked by the user.

With the appetizer out of the way, let me get to the meat of the post: a thread on the WordPress support forums lead me to the decision the example dev material provided is a bit weak, especially for the neophyte plugin writer. So in the interest of avoiding dozens of similar yelps for guidance over the months to come, I tore through the widgets that tag along with WordPress Widgets (the Google and del.icio.us ones) and after an hour had merged, molded and abused them into an example widget (with lots of explanatory comments!). And now I’m passing that work along to anyone who wants it.

The widget can be considered useful, to boot.

To install, download my-widget.php from here, upload that to your wp-content/plugins/ directory, and activate My Widget under plugins. It’s one of those you should already know this bits of wisdom, but you also need to have WordPress Widgets installed and activated as well, otherwise My Widget is little more than a piece of chocolate cake served up to a coma victim.

If you just want to use the My Widget widget, here’s what it does: when you add it on your sidebar by default it displays “My Widget” for the header (or title) and “Hello World!” for the text. Thankfully these can be edited through the widget’s control.

The little red arrow in the image above points at the control button on the widget bar. Click it and the following pops up:

Just add your own personal title and text, then close the My Widget dialog box and click Save Changes to, well, save the changes. Feel free to use it to display a welcome message or a note about yourself. I’m sure you can think of something to do with it.

So you see you can put it to use, but it’s main purpose is to provide a learning tool or framework for building your own widget. For that reason I’ve sprinkled comments liberally throughout the source code. However if anything is not clear, or if you have suggestions for making My Widget more useful, let me know.