African Cartel – a Listings implementation case study

Early last week my wife, Xenia, and I launched an online project that we’d been working on behinds the scenes for a while. African Cartel is an online marketplace for African artists, with the first feature being on a group of disadvantaged, pre-dominantly Zimbabwean artists who’s livelihood and income revolves around selling their township paintings at a traffic light intersection in Cape Town, South Africa. These artists are known as the robot artists.

My involvement with African Cartel was developing a website to house the artist listings, short film, art pieces, and e-commerce facilities to sell the art, whilst Xenia wrapped her head around the logistics of it all. I thought it would be a good idea to write a blog post about how I went about building the site, based on products we’d developed at WooThemes. I am fully aware some will perceive this as a shameless self-promotion, but to those genuinely interested in how we built the site please grab a cup of coffee and enjoy the read.

The website foundations

African Cartel is obviously built upon the hugely flexible, ever growing content management system that is WordPress. Furthermore, the front-end of the site uses our directory based theme Listings to showcase the artists. Once I installed the Listings theme I navigated to the content builder of the theme, where I changed the default custom post type it creates from the generic “Listings” name to “Artists”. I then re-named and created some more custom taxonomies to define those artists. An “image” custom field was used to house the artist profile photo, whilst I created another image custom field for the artist type taxonomy.

Once I was happy with the data structure I moved on to creating a child theme which would house the styling/layout customizations to the theme that I wanted to implement to Listings.

A Listings child theme

I closely followed a tutorial Magnus had written on creating child themes for our WooThemes to create the African Cartel theme. Now if I needed to update the

Listings theme powering our site I could easily by overwriting the entire theme folder, without removing any of my customizations as they resided in their own safe folder.

As you can see below the Listings theme looks vastly different to the end result of our African Cartel child theme. Most of these changes were simply new styles overwriting Listings element styling in the cascading stylesheet of the child theme.

African Cartel, based on the Listings directory theme.

Other additions/changes to the theme were:

An includes/film.php file that is pulled through onto the home page and displays information about our featured short film on the robot artists.

A custom image behind each “Artist Type” in the home page categories panel, which used the image custom field I added using the content builder.

Additional shorter columns in the “Latest Listings” module and on various search results/archive pages.

More technical additions

I then entrusted the more particular customizations I wanted implemented to Jeff, our core developer at WooThemes, given my more limited code knowledge. You could use any of our affiliated woo workers or post a job on our job board though.

We decided the most efficient way of adding art to each artist was for the artist to be a custom post type, and each image uploaded using the “Add an image” button in the WYSIWYG editor to be an art piece. The art would then display in the image slider of the single-listing.php template file.

Jeff added the new loopedslider product gallery (with some tweaks to show captions) to showcase latest, random art pieces / media library items on the home page, and created custom page templates to pull through all art/images in the media library (excluding the artist profile images). It then also intelligently allowed site visitors to drill down into more specific art galleries, i.e. all the art/images associated to particular taxonomies (for example: all the art falling under the Wire artists, or Township Painters).

E-commerce facilities

Given all the delays with WooCommerce, and the urgency needed in getting the African Cartel site live I did some extensive research into other WordPress e-commerce plugins that we could possibly use on the site. At WooThemes we are firm believers in using our own products, but also the importance of researching, testing and using other commercial developer’ products.

Eventually I decided to trial Cart66, previously known as PHPurchase, that is used even on Automattic sites. That must mean it’s good right?

A Cart66 modification with the tabber WooThemes shortcode

Cart66 integrated perfectly with Listings – allowing us to create products in the Cart66 backend module then adding them to pages, posts or artist custom post types via the WYSIWYG editor, similarly to how our shortcodes generator works.

The problem was associating products to particular images within the artist custom post type – a limitation of Cart66. Again Jeff saved the day and wrote a custom class/function allowing one to associate Cart66 products with images/art.

Now we have the facilities to sell art, all the while retaining our quite particular site structure, using PayPal checkout facilities. I also used some PayPal code to allow for the ability to take donations for the art workshop we hope to create for our robot artists.

The Robot Artists Custom Page Template

Other third party plugins

We installed Rocket Genius’s brilliant Gravity Forms, that works with all of our themes to create custom contact form’s for particular artists and pages. This plugin really works flawlessly with WordPress and our themes, and it’s intuitive interface, along with compatibility with the e-commerce plugin we chose (more on that below) made for a very easy decision for why we should use it.

Conclusions

As you can see the site is very niche in the functionality it offers and the layout of particular modules, but using a WooTheme saved huge amounts of time, money and resources in getting the site 75% there. Then fishing around for a solid e-commerce plugin, and tweaking it slightly saved even more time and resources.

The eventual development time on the site was only a couple of days, whilst the custom design tweaks took another few. All in all a deceptively cheap website to get up and running.

Feel free to browse the site, post any questions you might have, and support the artists if you feel so inclined.

Share this:

Like this:

15 Responses

Mark, great story and an excellent case study. I would definitely like to see more of these. It’s really interesting reading about how other developers use and extend WooThemes to fit their particular business needs.

Thank you so much for the case study. It is extremely useful and instructive for folks looking at how to develop a custom site based in the Woo world. Just so you know, the Featured Art slider on the home page isn’t excluding at least two of the artist’s profile images on the site. If that’s by design, my apologies, but I thought you might want to know because it appeared that you mentioned excluding them in the post.

I watched the film yesterday and it’s brilliant. I agree, as stated above, the case study is very informative and helpful. I have two sites under development now using Listings, one of my own, a teacher resource directory, and one for a client, a resource directory for rape/violent assault and abuse survivors. This was helpful.

Glad you like the concept! If you order a painting we then get the artist to specially create it for you, we’ll then package and ship off to you. Give us a shout if you have any other questions around logistics. http://www.africancartel.com/contact-us/