Case Study: Green Africa Directory

Written by Hugh Lashbrooke on July 4, 2012 Customer Stories, News.

Green Africa DirectoryBefore I became part of the ever-growing Woo team I worked at a Cape Town-based development agency called Quickonline – while I was there I worked on a number of projects that were built in WordPress as well as other systems. One such project was Green Africa Directory – a green business directory that aims to be the biggest resource of environmentally friendly businesses in Africa. It also features events, jobs and specials relating to green services and businesses.

Leveraging Listings

Because the site is primarily a directory, we decided to build it using Listings and employ the content builder to create all the other post types we needed. It turned out to be a great decision and I made extensive use of the powerful and easy to use content builder.

The first thing I did was use the content builder to enhance the existing listings post type and add in all the fields that the directory needed. In this case, there were a lot of extra requirements and the content builder could handle them all with little fuss. This included adding different image and text elements to each listing as well as adding options to feature each listing on different parts of the site.

To complement the directory side of the site, I also had to create new custom post types for Jobs, Specials and Events along with their own taxonomies and custom fields. This is a process that would normally have taken some time to build correctly, but the content builder enabled me to do it in a matter of minutes.

Setting Styles

When implementing the design of the theme I will admit I was rather short-sighted in not creating a child theme – instead, I edited the theme directly and used the custom.css file to implement all the styling changes. This makes things rather difficult when it comes to updating the theme in the future. That issue aside though, this image shows just how different the uniquely styled theme is from the default Listings styling:

Green Africa Directory - Listings comparison
Green Africa Directory, based on the Listings directory theme.

On top of the changes to the overall look and feel for the site, the sheer amount of custom fields added meant that I had to make some large modifications to how the individual listing pages were shown. One of the things I added was a custom built tabbed block to switch between different content elements and display each section quickly and easily.

I also created custom layouts for each of the new custom post types that I created using the content builder.

Tabbed block
An example of the tabbed block used to display some of the listing content

Working with Widgets

As you can see from the home page screenshot, there are a number of content areas that do not come as part of the Listings theme. I created all of these content blocks as custom widgets that each display their own unique set of data. The fact that all of the site content uses custom post types made this very easy to achieve using standard WordPress queries that retrieved only the post types in question.

I also added a pay-per-click advertising system to the site using the AdRotate plugin – this was quicker than implementing a custom post type for the ads, as the plugin handles all the logic that counts the amount of clicks as well as running time for each of the ads. I modified the plugin slightly so that different ads are displayed per category as well as creating widget areas to allow the site owner to select where to display each ad.

Case Conclusions

Listings provided a large amount of the functionality that Green Africa Directory needed, but as you can see I added a lot of features that the theme does not supply by default – it did, however, provide me with the tools needed to build these extra features. Building this site really put the content builder through its paces and it definitely emerged a winner – without being able to add custom post types and custom fields so easily, the development time for this site would have lengthened considerably.

After adding all the custom features and widgets, the load time of the site became far too long – this was remedied by optimising WordPress queries and employing advanced page caching (this caching was not implemented by me and was sorted out after I made the move to Woo). In the end the site loads the large amount of content quickly and smoothly.

Feel free to browse the site and, if your business qualifies, submit your info to the directory – a basic listing is free to submit, but there are paid options as well.

cta-banner-10-product-page-v2_2x

13 Responses

  1. wes
    July 4, 2012 at 4:36 pm #

    What a great site! And thanks for taking the time to explain how you modified this from Listings. It turned out quite powerfully. This is one of my favorite case studies so far. Thanks again!

    • Hugh Lashbrooke
      July 4, 2012 at 6:28 pm #

      Thanks for the feedback – glad you enjoyed it! 🙂

      • Mark Watson
        July 4, 2012 at 9:15 pm #

        Any likelihood of a standard (ideally magazine theme)that has the listings/content builder built-in. Being a knowledge manager rather than a designer/css/php coder, I don’t have the skillset to build what I want, which are sites using themes with discrete listings and other functionalities.

        I’m still using Newspress, and have the Connections Pro listing plugin on one site as per http://www.essexdaysout.com/essex-castles-and-historic-buildings/ and several other areas of the site.

        • Hugh Lashbrooke
          July 5, 2012 at 10:51 am #

          We’re looking into the possibility of including the content builder in other themes – it can be difficult because each new post type generally requires it’s own template file, but it’s definitely a possibility for future releases!

  2. Jonathan Dingman
    July 4, 2012 at 10:43 pm #

    I hadn’t ever really been a fan of what the default design looks like, but the functionality is there. Great to see a well-revised version of the theme.

    Good job!

    • Hugh Lashbrooke
      July 5, 2012 at 9:35 am #

      That’s what we love about our themes – if you don’t like the default design or if it doesn’t work for your website then you can change it easily 🙂

  3. Teo Lopez
    July 5, 2012 at 12:55 am #

    Great read, good point about the child theme. It sure is a problem when you edit the theme itself and you then need to update it. Love these case studies, hope there’s more to come.

    • Ryan Ray
      July 6, 2012 at 6:30 pm #

      We’re keeping them coming as often as we can, glad you are enjoying them. 🙂

  4. Nadine Abraham
    July 9, 2012 at 8:39 am #

    It would be beneficial to Africa to protect and save environmental resources.

  5. Marcus Tibesar
    July 11, 2012 at 3:54 pm #

    No child theme – really?!

    I believe all WooThemes should be sold with a default bare-bones child theme included.

    This way that accident won’t happen again!

    Just my 2-cents 🙂

    • Hugh Lashbrooke
      July 12, 2012 at 7:53 am #

      Yeah – I built this before I realised just how important child themes are. Packaging a bare child theme with each theme isn’t a bad idea – could be something we look into adding in the future 🙂

  6. Terence
    August 16, 2012 at 1:54 pm #

    Hugh, what a great theme adaptation. It caught my eye because I am working with a charity in Malawi right now with a similar kind of application. Our problem is, the idea of the site is to provide its services to the developing world from the developed world, and to do that, I really need a responsive theme and preferably a child theme (I’ve had it with updates overwriting!), and I also see some elements of the new LMS app theme being important, allowing us the functionality to run a remote course through our WP website. Lots of implied questions here, but this is the problem “responsive” isn’t it? Going responsive is a bit like being pregnant, its all or nothing. For a start, do you know if responsive versions of Listings or LMS on the horizon?

Trackbacks/Pingbacks

  1. Case Study: Green Africa Directory - Woo Commerce Plugins & Themes