Although I have built many WordPress plugins in the last few years, the plugins that are popular, continually developed and endure are those that prove useful to me personally and for my professional development.
Pippin Williamson is a plugin author extraordinaire and has written about the subject of plugins that scratch an itch, where he describes how personal plugins give him the most satisfaction to build and maintain, and for him those have proved the most useful. I have had the same experience with personal plugins but have also found that solving a problem for a client site can sometimes provide the best ideas for useful plugins.
Cartogram – a Plugin Case Study
Last year I took on a client project that involved redesigning the site for LakeView Day Camp. The site was to be built on WordPress (of course) to give them the ability to maintain their site without the need for a web developer. Their old site had a cartoon style map of the camp’s layout showing the various activities and areas dotted around the picturesque New Jersey location. The brief included updating this map with changes and additions and although I know my way around Photoshop, the thought of having to keep this illustration updated (without any source files to start with) worried me and got me thinking of a better solution.
The new design I was working on was clean, fresh and flat. Fashionable yes, but it suited the modern and professional requirements of the brief. This cartoon map would stand out like a sore thumb aesthetically never mind the issues with updating it. I discussed with the client the possibility of utilising Google Maps to display the camp site. LakeView’s site has been photographed by Google’s satellites to a high zoom level and creates a great looking ‘real’ map of the camp. I was aware that Google provided an API to add markers a map so I proposed we add a marker for each activity area or facility of the camp, and that these markers could be added, edited and deleted by the client right from the WordPress administration area. This was the crux of the idea; it meant updating the map could be done anytime by them, not having to rely on me editing a cartoon map image.
Functionality Should Live in a Plugin
The client went for it and I started to develop the prototype. This was going to be a big chunk of code that needed to interact with WordPress and the Google Javascript APIs, and although I was building the site primarily as a custom theme, I knew this code didn’t belong there. Custom functionality should live in a custom plugin. If the client ended up switching to a different theme in the future they wouldn’t want to lose the ability to show the map. The plugin therefore needed to utilise shortcodes to render the map which could be used anywhere, in posts, pages or theme template files.
Plugin Architecture
Although the client only needed one map for their purpose, the map could contain numerous markers (facilities). It made sense to build the bulk of the plugin using WordPress Custom Post Types. I decided to have one CPT that introduced the concept of ‘Locations’. A location post could be of a type ‘Map’ or ‘Location’. The idea being you would create a new map location, adding a starting latitude or longitude (which you can search for) and configuring some settings for the map:
You would then add as many locations as necessary, where you set the map that they are associated with. Each location can have a title and some description. The Google Map will be rendered so you can add a marker to it for the location:
As soon as I started building the plugin I realised this could be a useful tool for other people and decided to make the plugin as generic as possible, without explicit references to the client. I named the plugin ‘Cartogram’ to represent its map based purpose but added numerous filters to the code to allow me to customise it fully for the client. So ‘Cartogram’ and the CPT ‘Locations’ became ‘Facilities’.
Scope Creep
The beauty of client work is that it keeps you on your toes. Halfway through the build a potential deal breaker arose. The camp itself would soon be going through some major redevelopment that meant large areas on the map would be different. Of course being able to add this to an image was easy. Getting Google to update their satellite imagery whenever we needed it, not so easy. For me the benefit of using Google Maps outweighed other factors, but I understood the concerns of the client and so I did some more thinking. After trawling through Google’s documentation to find an answer to the how often the maps were updated, I came across Shapes in the API.
Shapes allow you to define and render polygons, polylines, circles and rectangles on your maps. You can control the colour, opacity of the shape and its outline. I proposed to the client that they could draw whatever shapes needed on the map to describe a facility that was coming soon, and could be removed when the map had caught up with development. Any number of shapes could be added to a location, along with a marker that showed the location’s name and description in an info window when clicked. Shapes gave the client a further level of control over their map and their addition to the plugin was given the green light.
Release
The plugin underwent extensive testing as soon as the client began using the site on a staging server. Bugs were found and improvements were made. The ‘real world’ usage was extremely helpful in making the plugin more robust. With the client’s consent I decided to release the plugin on CodeCanyon and has had some sales so far. However, the biggest reward is seeing the plugin used by the client, enabling them to create a rich and interactive page for the camp’s facilities.
