Table of contents for What I learned while building a WordPress Plugin

1. Things I’ve Learned While building a Wordpress Plugin

After building my first few WordPress plugins I learned quite a few things that I just could not find good information on. So what I will be doing over a couple or so posts is explaining what the problem/issue was that I had and show you how I went about resolving the problem/issue.

How do I add a sub menu for my plugins admin and what is a "unique identifier"?

Ok, creating a submenu is not very hard and Wordpress docs does an ok job of explaining it. But when you are building your plugin using a class structure it is not very clear what you should do.

Lets assume that you have a class called "myClass" and a function with in it that is called "adminMenu." Let's also assume that this class is also on the same file that is your main plugin file that has the version information on it. Your typical php4 based class would look like (php5 based classes have __construct instead of calling myClass and some other minor differences):

At line three we add an action that points to the "adminMenu" function and let me clarify what I have found happens with "array(&$this, 'adminMenu')". WordPress will take "array(&$this, 'adminMenu')" and make it into myClass::adminMenu() and execute it like that - the &this is a reference to myClass.

At line 8 we have the main link that gets put at the top next to "Plugins," "Comments" and so on. You will notice the __FILE__ constant, this allows WordPress to set that menu item to reference the plugins main file. You also see array(&$this, 'adminSubPage1') will execute as myClass::adminSubPage1() (this function is not shown).

At line 11 we create our first submenu for our plugin which also points to the adminSubPage1 function, which is needed I found. If you don't have a submenu item that points to the same "page" as the main menu item, the submenu items will not show up.

At line 12 we create our second submenu item that points to the adminSubPage2 function (also not shown). You will notice a three differences between the two submenus, two being the Names and the function they point to, and the third is the mc_adminSubPage2 which is our unique identifier. This will give us a url the looks something like admin.php?page=mc_adminSubPage2.

Nothing real fancy with this one, just wanted show how to create your plugin menu items while using a Object Oriented approach. Feel free to let me know if there is an easier way or if I am all around incorrect. Next post will be about loading of jQuery and your other JavaScript without messing up the Prototype code that WordPress and other WP plugins use.

Why the name change, "Benjamin Sterling Galleries" was just so darn catchy? Ummm... it wasn't! BSG was originally built for my wife and after showing it to a few friends, who in turn showed to a few of their friends, the feedback and suggestions that were given kinda forced me to add to it. First I added the ability to communicate with Picasa, then to Flickr, the Default WordPress image/file manager, and now to SmugMug as well as the newly build Album Manger with multiple upload, multiple thumbnail support. As well as many other new features that I really can't list, I just could not leave it with such an egotistical, no descriptive name. So now we have PhotoXhibit, isn't that nicer?

I can ramble on forever, but this is not the time so go and download, test and give me feedback.

The download link
Please to leave feedback and report bugs

I am working on documentation and some screen casts, but if you are good with words and would like to help with docs, please don't hesitate to drop me a line.

Well, that's it, go... go, test away, let me know what you think.

The "Benjamin Sterling Galleries" plugin has been renamed and recoded with a ton of new features. The new URL is http://benjaminsterling.com/photoxhibit/ and although support will still be given for this version (1.6.2) I would suggest you checking out PhotoXhibit

Comments for this post are closed, please go to PhotoXhibit for support.

What is it?

A godsend plugin for anyone who wants to add a photogallery to their website using Wordpress and jQuery.

Download (current count: 1,810)

Download Benjamin Sterling Galleries Version 1.6.2

• Download zip version

Features

• Pull in photos / images, thumbnail and large size, from just about everywhere
  • from flickr via rss or their json api
  • from picasa via rss
  • from a local folder
  • from photos / images already in the Wordpress database
• Ulilizes the jQuery JavaScript framework's power and a ever growing list of great photogallery plugins
• Drag and drop reordering of gallery images
• Change functionality of your photogallery with few clicks of the mouse
• Combine photos from multiple accounts and services
• Embed your gallery in posts or anywhere on your site
• Galleries are 508 compliant and will degrade nicely when JavaScripts are turned off
• Preview your gallery on the fly

Resources

• Demo/Dev install (test/test)
  • Wordpress 2.3
• Support
• Timeline
• jQuery Gallery Plugins Used
  • jqGalView
  • jqGalViewII
  • jqGalScroll
  • cycle

History

While wordpress does have a ton of image / photo galleries, I felt that none of them really gave you control over everything in an easy unobtrusive way. Not to say this this plugin is the is all be all, but it will get there.

In my hunt to find a good one for my wife and installing all the ones that I thought had what was needed, I found that none of them made it easy. My wife is a very smart woman, so when she gets frustrated with something it most likely not her. So after a few months of her beating me, I decided to build some jQuery gallery plugins which you can find on this site. This was able to keep her happy for a bit, but I had to go in and make changes everytime she wanted to add and image or take one out. After doing this a few times I decided to just put together a quick plugin that will take in the images via a picasa feed provided by her and let her do the changes her self.

After showing this plugin to a few other developers they suggested I should make it into a full fledge plugin and well, here it is.

Prerequisites

• Wordpress 2.1 or higher
• A Flickr account and api key or
• A Picasa account or
• Images in a local directory or
• Images in your Wordpress database

Aside

Although this plugin was test on a pc in IE6, IE7, FF2, and Opera 9.24 and on IIS6 PHP5, Apache PHP4 & PHP5 and feel comfortable that this plugin will work flawlessly, I am the creator of the plugin, thus, I am naturally going to use it the way it is supposed to be used and not have any issues. That is where you come in, any and all comments and concerns should be posted asap and I will build up a punch list of fixes. Also, if there are jQuery or even other Javascript libraries that have nice photo / image gallery plugins, let me know and I will see what I can do to add that into the mix.

Timeline

Here is a brief timeline of what I hope to accomplish and in what order. There is no exact date for each release, but the time between each release should not be more then two months.

• 1.2 current release
• 1.3
  • Add more Picasa interaction
    • interactions tbd
• 1.4
  • Add more control of the style for each jQuery photo gallery plugins
    • The thought is to possibly have all the styles embedded in the database
      and then have those styles transfer over when
      you create a gallery.
  • Add better control over parameters for jQuery photo gallery plugins
• 1.5
  • Add the ability to change the alt text for each image no matter where
    the image is from
    • The thought is to possibly have an edit icon appear when mousing over
      an image

Installation

If you have ever installed a plugin, then this will be pretty easy.

1. always back up your Wordpress before making any modifications.
2. Extract the files. Place the benjamin-sterling-galleries directory into wp-content/plugins/
3. Login to the Site Admin and go to Plugins and active Benjamin Sterling Galleries
4. Then it can be configured from the BSG menu that you should now have on the top menu bar.

More Info

Let me try to explain what this plugin actually does; it builds image galleries or photo galleries. Wow, I know, that was descriptive. But since you look like you are still puzzled by how it actually works, I will go into a little more detail. Say you have a Picasa photo album with all these really nice photos that you want to add to your site either in a post or in the side bar. But, you don't want to use the "slideshow" feature that they provide. Well, with this plugin you simply use your rss feed link for your Picasa photo album and paste it into the lovely interface that is provided by the Benjamin Sterling Galleries plugin. Then you select what size thumbnails you want to preview and you click a button and wham, you have all your images/photos listed on the page. You double click on the ones you want to add to your gallery, you fill in some info, select the style of gallery you want and click another button and wham, you have a preview of the gallery that can be added to your Wordpress. What? You have a Flickr account too? Well if you did not click the button to add you gallery yet, go a head and paste in the url to your Flickr rss feed and click the first button and there you go, a list of your Flickr photos. Double click on the ones you want and click build gallery and there you go, a photogallery with both your Flickr AND Picasa photos!

The other nice thing about this plugin is that you can re-order the images you want in your gallery. Simply click and drag the images you want to move around and put them wherever you want in the gallery.

Ok, with out rambling too much more, let me ask for your help. What do I need up with? Well, my instructions are very minimal, do I need more? I only have four photo / image gallery plugins installed, do I need more? If so, which ones do you like? And why? Is there a feature that is needed/that is missing? What is it?

The download link is below, please leave comments to help me make this plugin better.

Download: http://wordpress.org/extend/pl.....galleries/

My muse S.Sterling http://www.neurosesgalore.com

Why jqAlbumParser? Well, after building a few photo gallery plugins and plans for different variations of flash-like galleries (I am on a convert flash apps to jQuery ran apps kick), I found myself wanting to use other peoples photos, ie. friends and families, but did not want to download them. So I wanted to be able to bring in Picasa and Flickr photos, but sadly their JSON formats are different, I needed a way to pull them both in on the same page and be able to use them with the same functions and so I figured I'd bring their JSON and parse them to my own object and poof, jqAlbumParser! Anyway, I am rambling, check out below and if you have any question (since I know my comment and explanations suck) post a comment and I will get back to asap. Also, if you use this plugin, drop me your url and a brief description of your site and I will be sure to post it to my Plugin Repository page.

The Basic Demo

Picasa | Flickr

The Simple Code

The xhtml

PLAIN TEXT

HTML:

1. <a href="http://picasaweb.google.com/data/feed/base/user/sterling.benjamin/albumid/5065213814603581825?kind=photo&amp;alt=rss&amp;hl=en_US" class="jqAlbumParser
2. wa:picasa">Picasa</a>
3. |
4. <a href="http://api.flickr.com/services/feeds/photos_public.gne?ids=11983862@N00" class="jqAlbumParser
5. wa:flickr">Flickr</a>

The head stuff

PLAIN TEXT

CSS:

1. <style media="all">
2.     @import url("/articles/jqGalViewII/common/css/jqGalViewII.css");
3. </style>

PLAIN TEXT

JavaScript:

1. <script type="text/javascript" src="/articles/common/js/jquery-1.2.1.pack.js"></script>
2. <script type="text/javascript" src="/articles/jqAlbumParser/common/js/jqAlbumParser.js"></script>
3. <script type="text/javascript" src="/articles/jqGalViewII/common/js/jqGalViewII.js"></script>
4. <script type="text/javascript">
5. $(document).ready(function(){
6.     $(".jqAlbumParser").jqAlbumParser({
7.         pluginExec : function(){
8.             $(this).jqGalViewII();
9.         }
10.     });
11. });
12. </script>

The Small Print

So you see the set up is somewhat simple; in the example above I used the jqAlbumParser in conjuction with the jqGalViewII plugin so you can see how I envision a person would use this plugin. You will be able to use the jqAlbumParser with any of my plugin, and any photogallery plugin that works with the same structure that this plugin can put out.

To get the url for your Picasa album, go to your account and then the album you want; go to the bottom right corner and you will find a RSS feed link and either right click and click copy link location or click that link and copy the url from there.

To get the url for you Flickr album, go to the photo section of your account and go to the bottom left and copy the RSS link.

You will also notice that in the demo links that there is a "wa:picasa" and a "wa:flickr," if you are not going to add separate jqAlbumParser calls for different services, ie. Picasa and Flickr, you will need to add one of those to the correct link.

Now you are probably asking yourself, "How do I get this to execute when the page loads?" or "I tried 'load' as the "triggerEvent" but it does not work, how come?" The answer, do:

PLAIN TEXT

JavaScript:

1. <script type="text/javascript">
2. $(document).ready(function(){
3.     $('.jqAlbumParser').jqAlbumParser({
4.         pluginExec : function(){
5.             $(this).jqGalViewII();
6.         }
7.     }).click();
8. });
9. </script>

or

PLAIN TEXT

JavaScript:

1. <script type="text/javascript">
2. $(document).ready(function(){
3.     $(".jqAlbumParser").jqAlbumParser({
4.         pluginExec : function(){
5.             $(this).jqGalViewII();
6.         }
7.     }).trigger("click");
8. });
9. </script>

The download

http://benjaminsterling.com/ar.....mParser.js

This version no longer supported

Changes have been made and all new updates will be posted at http://benjaminsterling.com/20.....jqshuffle/