African Cartel – a Listings implementation case study

Written by Mark Forrester on March 16, 2011 Blog.

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

music downloads click Full Report software for download additional reading downloads

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 new custom-coded page template for the Robot Artists short film.
  • 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.

This is part 1 of a 3 part case study on African Cartel. Since the time of writing this post African Cartel has been re-designed and is now built on our eCommerce engine – WooCommerce.
cta-banner-10-product-page-v2_2x

15 Responses

  1. John
    March 16, 2011 at 2:29 pm #

    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.

  2. David Bell
    March 16, 2011 at 2:48 pm #

    Thanks for sharing this Mark, that’s a great site and really given me inspiration for a listing site based on the Listings theme. Agree with @John, be great to get more write-up like these.

  3. Jamie Jamison
    March 16, 2011 at 4:17 pm #

    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.

    • Mark Forrester
      March 16, 2011 at 4:31 pm #

      Glad people are finding the post useful.

      Thanks for pointing out the artists in the art slider. We are aware of them and are tweaking the script accordingly. Glad that means you’ve visited the site! Make sure to watch the short film 🙂

  4. Wes Kriesel
    March 16, 2011 at 5:13 pm #

    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.

  5. Erlend Sogge Heggen
    March 17, 2011 at 2:07 am #

    I love case studies. Also a job well done boiling it down to the essentials; these things are usually valuable, but also on the overly lengthy side. Got through this one in just two sittings xD

  6. Rohan
    March 17, 2011 at 3:44 pm #

    I really enjoyed it too. It’s a very cool concept.

    Could you possibly eloborate a bit on what happens when someone orders a printing? For example, do you keep the originals with you, do you get the artist to send the merchandise, etc.

    • Xenia
      March 19, 2011 at 12:00 am #

      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/

  7. Ryan Ray
    March 18, 2011 at 4:55 pm #

    Looks like we’ll be needing to develop some more case studies. 🙂

  8. Vince LaMonica
    March 20, 2011 at 4:36 am #

    Just a quick heads up [haven’t read the entire post yet], but your link to cart66 is 404 as it goes to a woocommerce.com link instead of cart66. 🙂

    • Mark Forrester
      March 21, 2011 at 9:38 pm #

      Thanks Vince. We’ve fixed the broken link.

  9. Colleen Brady
    March 20, 2011 at 6:25 pm #

    Thank you for taking the time to put this together. It has given me some new ideas for several projects I am working on.

    I look forward to similar write-ups in the future.

  10. Schalk
    April 6, 2011 at 11:55 am #

    Love your work and the case study – wish it was even more in depth so I can create my own theme like this based in listings. Would you possibly make this theme available as a childtheme?

    Well done

    schalk

    • MayaPapaya
      April 12, 2011 at 12:06 am #

      A child theme would be wonderful, I’m studying abroad in Brazil would love to do something like this for the local artists… A global movement for township artists! 😀

      Beautiful work,

      Maya

Trackbacks/Pingbacks

  1. African Cartel – a Listings implementation case study | Blog Ingenuity