Building It: The First Half design

For those of you that may have followed me back in the furious writing days of Devlounge, you know one thing I liked to do was discuss my design and development process. I always find it interesting to see how certain people approach different projects, because everyone always has their own way about going about things. So far in 2008 I’ve been the developer of 2 major Wordpress based projects in 2008 - Appbid and The Market Theme. So in Building It: The First Half, we’ll see how the ideas came about and how I executed them.

Appbid

Appbid has been my only client project for the entire first half of this year. After I did some showcasing of Webunload in late 2007, I received a couple requests in a row to build Wordpress based marketplaces. After sorting through the offers, I decided to take up work on Appbid, a Facebook application auction site. The owner was impressed by my work on Webunload, but he wanted to take it a step further. I always let my clients know up front if I can’t do something they want, because I’m not here to bullshit them and waste their time if I can’t fully complete the job. In this case, I broke my own rule. Some of the features I was asked to include I really did not think I would be able to handle, but I really wanted to challenge myself and I knew I would find a way to get whatever it was done in the end.

I always let my clients know up front if I can’t do something they want, because I’m not here to bullshit them and waste their time if I can’t fully complete the job.

And there I was, diving into a project with aspects I was unsure if I could truly handle. It was early 2008 and Appbid was at the top of my priorities. Things started off heading in the right direction when my initial mockup was excepted after very few modifications. It’s always nice to not have to head back to the drawing board a bunch of times. When you get it right from the start, it’s a very good feeling. Appbid was split into two columns, a navigation and create account / post menu on the left, and the actual item listings on the right.

The very first thing I had to figure out after getting the design taken care of was how to allow users to post without needing to go into the Wordpress backend. My client was weary of having others in the Wordpress backend, so I needed a solution if this project was going to work and if I was going to have a happy client. I stumbled upon a very convenient plugin (which I unfortunately don’t remember the name) which allowed you to insert post fields into a regular page. This made everything super easy. Using some conditional tags, I set up the post page to only be viewable if you were logged in. The left side navigation menu also changed when you were logged in, giving you posting options and other links that were hidden to the normal user.

Next it was time to modify the comment form. As the name suggests, at Appbid you bid on the apps. I set Wordpress up so you could only bid if you were a registered and logged in user, to eliminate fake and spam bidding. The comment form was changed to only ask for your bid price and nothing else. I comment expiration plugin was also used to close comments / bid after “x” amount of days as set by the client.

Appbid was my very first project which really required me to dig deeper into the use of custom fields. Custom fields were used to show an item thumbnail, and to automatically generate buy it now buttons directly to Paypal if the poster set a BIN price in their post. I also used custom fields to dynamically pull chart data from Adonomics if the user entered their Adonomics ID number when posting. I was able to do a whole lot more than I had ever done with custom fields, and exposing their power became very useful when it was time to put together the Market Theme.

Market Theme

With the experience I had gained from using custom fields on Appbid, building Market was not as complicated as it might have been. Following the success of Webunload and Appbid, the requests continued to pour in with everyone in search of a the same thing - either a marketplace or an auction site built on Wordpress. While so people might have jumped at the chance to re-use most of the same code over and over again in order to make a quick profit, I didn’t. I decided to put together one single theme that would be able to address many of the needs of all my potential clients.

Work on Market began in late January and early February. The very first version looked nothing like the current incarnation (version 3), but the results were still very good. Initially I started out with a mindset that I wanted a grid-based layout, related items below on single item pages, and buy now buttons. That wasn’t too difficult to accomplish. It required a few custom fields to link thumbnails to the full image and to set a price. Using the set item price and the admin email as set in the Wordpress dashboard, the buy now button would be automatically generated and link to Paypal.

Following the initial success of the first version of Market, I released another version with slightly different styling and recent posts in the right column, along with a horizontal navigation menu as opposed to a vertical menu. Still, I was feeling there were certain things the theme was missing and lacked to be truly successful.

In April I went back to the drawing board and put together Market 3, the current version and the verison that propelled Market’s success these first couple of months. To me, the grid layout was still very important because most e-commerce sites use a grid-based layout to display products. At the same time, this was being built on Wordpress and Wordpress is mainly for blogs. In versions 1 and 2 I had stripped out regular posts and comments, which left a pretty big whole in the theme because all it could be used for was listing products. With version 3, the default setup was now setup so that the homepage was two columns, with recent products on the right and all other normal posts (with comments) on the left. But what about those still looking to have the grid storefront as the homepage? I put together a storefront template that was included with the theme and could easily be used with any created page, and of course that page could then be set as the homepage from within the Wordpress dashboard.

To go along with the convenience factor that Market 3 was supposed to provide, I outsourced (for the first time ever) to have a plugin built which dramatically improved the adding products process and then to have a custom Ajax Cart built, giving the theme even more options.

So there you have it, the thought process behind the two major projects for the first of half of 2008.