For those not in the least bit interested in how a Wordpress plugin is put together, move along. There’s nothing for you to read here. For those that are left, here’s a description of how my wordpress widget to show images from a pixelpost gallery is put together.
Installation:
Copy the l2pp.php file into /wp-content/plugins/pixelpost-widget. Download your pixelpost config file from wherever it is currently, and re-upload it into /wp-content/plugins/pixelpost-widget/includes
Log on to your Wordpress control panel as an administrator.
Activate the plugin.
Look at the “Pixelpost Widget” section in the “settings” tab on the admin menu, and set the display options there.
Add the widget to your sidebar and save changes.
Take a look at your site to see if it’s worked!
Behind the scenes:
The plugin is a pretty straightforward one, which is why I’m going to explain it line by line here. At the top of the plugin is the header, the first few lines have to be entered according to Wordpress’s rules, so that the plugin details appear on the admin control panel. Following that is the GPL licence.
<?php /* Plugin Name: Link To PixelPost Plugin URI: http://www.danielfreedman.co.uk Description: Plugin for displaying random thumbnails from a pixelpost database Author: Daniel Freedman Version: 0.2 Author URI: http://www.danielfreedman.co.uk */ /* Copyright 2009 Daniel Freedman (email : ) This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. 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 */
Now we come to some actual code. I don’t think it matters which order the functions appear in the plugin code, they are executed as and when needed. The first function I’ve put in is one that registers the widget with your Wordpress install, and the add_action statement inserts a “hook” into your blog’s startup code, telling it to initialise the widget once all the plugins have been loaded.
function init_linktopp() {
register_sidebar_widget("PixelPost Gallery", "l2pp_showthumb");
}
add_action("plugins_loaded", "init_linktopp"); // get wordpress to start the widget once all the other plugins are loaded
The next function tells Wordpress where to find the settings page for your plugin, and the add_action statement hooks it into Wordpress itself so it appears on the menu.
function l2pp_admin_actions() {
add_options_page("PixelPost Widget", "PixelPost Widget", 1, "PixelPost Widget", "l2pp_admin");
}
add_action('admin_menu', 'l2pp_admin_actions');
Next up is the code that handles the settings page, which allows the user to tweak how the widget displays on the screen. The options are stored in Wordpress’s internal options database, with the get_option and update_option functions used to read and update the option values. The form is a fairly straightforward html form, when the “Update Options” button is pressed the form “loops back” on itself, so we check to see if $_POST['update_options'] is set. If it is, then we have some options to update, if it isn’t, then we retrieve the current values for the options from Wordpress.
There are three fields on the form, the first being the number of thumbnails to show on the screen, the second being the heading to use if we’re only showing one thumbnail (for example “one of my photographs”) and the third being the heading to use if we want to display more than one thumbnail (for example “some of my photographs”).
The “require” statement inserts the code from the pixelpost config file, and as it’s a requirement and not an include, the code will stop running at this point if the file doesn’t exist. The downside to this is that any other widgets below this one on the sidebar won’t be displayed either.
function l2pp_admin() {
require "includes/pixelpost.php";
if (isset($_POST['update_options'])) {
// we're updating the form, so save all the options
$numthum = $_POST['l2pp_numthum'];
$stitle = $_POST['l2pp_singletitle'];
$mtitle = $_POST['l2pp_multititle'];
update_option('l2pp_numthum',$numthum);
update_option('l2pp_singletitle',$stitle);
update_option('l2pp_multititle',$mtitle);
?>
<div class="updated"><p><strong><?php _e('Options saved.' ); ?></strong></p></div>
<?php
} else {
$numthum = get_option('l2pp_numthum');
$stitle = get_option('l2pp_singletitle');
$mtitle = get_option('l2pp_multititle');
}
?>
<!-- the options entry screen -->
<div class="wrap">
<h2><?php _e( "Settings for Pixelpost Widget") ?></h2>
<form method="post" action="">
<table>
<tr><td><?php _e("How many thumbnails to show?" ); ?></td><td><input type="text" name="l2pp_numthum" value="<?php echo $numthum ?>"/></td></tr>
<tr><td><?php _e("Heading for one photo (e.g. Random photo):");?></td><td><input type="text" size="30" name="l2pp_singletitle" value="<?php ECHO $stitle; ?>"/></td></tr>
<tr><td><?php _e("Heading for multiple photos (e.g. Random photos):");?></td><td><input type="text" size="30" name="l2pp_multititle" value="<?php echo $mtitle; ?>"/></td></tr>
</table>
<p><?php _e("If the second heading is left blank the first heading will be used.") ?></p>
<p class="submit">
<input type="submit" name="update_options" value="<?php _e('Update Options') ?>" />
</p>
</form>
</div>
<?php
}
Finallly we come to the main function in the plugin, the one that actually shows the thumbnails on the screen. Once again we check for the pixelpost config file, so we know where the database is and how to log on to it. Then we make a connection to it. Wordpress has a “database object” defined somewhere in its code, and this means we can create a new object and give it the details of a different database. This is how the plugin is able to get information from the pixelpost database while still leaving the rest of Wordpress to use its own database.
function l2pp_showthumb() {
require "includes/pixelpost.php";
// connect to the PixelPost database
$ppdb = new wpdb($pixelpost_db_user,$pixelpost_db_pass, $pixelpost_db_pixelpost, $pixelpost_db_host);
Next we find out how many thumbnails we’re supposed to display, and we run a query on the pixelpost database to get that number of records, and order them randomly. We also check that the date and time of the image on pixelpost is before the current date and time, so it shouldn’t show any images you’ve set to be posted in the future.
//Get random image(s)
$numthum = get_option('l2pp_numthum');
$random = $ppdb->get_results("SELECT id, image, datetime FROM " . $pixelpost_db_prefix . "pixelpost where datetime <now() ORDER BY RAND( ) LIMIT " . $numthum );
We do another query on the pixelpost options table, to get the mail url for the pixelpost blog, and the path to the thumbnails folder on pixelpost. This is so the images are actually displayed, and the link to the pixelpost blog still works when you click on a thumbnail.
After that query we start outputting some data. First we output the heading to the screen (if more than one thumbnail required and a suitable heading is set, then use that one, otherwise use the heading for a single thumbnail).
$meta = $ppdb->get_row("Select siteurl, thumbnailpath from " . $pixelpost_db_prefix . "config");
echo $before_widget;
if ($numthum > 1 &amp;amp;&amp;amp; get_option('l2pp_multititle')) {
$title = get_option('l2pp_multititle');
} else {
$title = get_option('l2pp_singletitle');
}
echo $before_title . $title . $after_title;
echo '<div class="box">';
Then we enter a loop to print each thumbnail. The foreach statement looks at the results from the “random image” query we performed earlier, and executes the code in the loop with each image’s information set to the $oneimage object. We then make up an html link, with the link “text” being the image itself.
foreach ($random as $oneimage) {
echo '<a href="'. $meta->siteurl . 'index.php?showimage=' . $oneimage->id . '"><img src="' . $meta->siteurl . $meta->thumbnailpath . 'thumb_' . $oneimage->image . '" /></a>&amp;amp;nbsp;';
}
echo '<br />';
echo '</div>';
echo $after_widget;
return;
}
The last bit looks complicated, but actually produces a link that looks like this:
<a href="www.mysite.com/pixelpostblog/index.php?showimage=1"><img src="www.mysite.com/pixelpostblog/thumbnailfolder/thumb_img001.jpg></a>
And that’s it! It used to be a bit more complicated than this, but the more I learned about plugins and widgets the less code I found I actually needed in order for it to work properly. You can download the plugin from Wordpress if you want to try it for yourself.
