From the Forgotten to Blog Department. And also filed in Last Site That Gets Updated is My Own division. About a year ago, Keira connected me with the folks at the Edible Garden Project (EGP) in Vancouver, who were looking to redo their web site. Check out the site at http://ediblegardenproject.com
In calendar time it took about a year to get from old to new, some of it my schedule getting in the and sometimes the EGP folks were busy, but the thing was, this bothered neither of us. It was great working with Emily and her team, they brought a lot to the table in terms of what they said they wanted in a new site. There were some logistical steps to jump through before we even got to the pretty stuff.
This is the original site, which is now residing at http://archive.ediblegardenproject.com/ (my web fetish, keep a history alive);
While vintage 2007, the site is not all that horrible. The overlapping leaves on the bottom are nice, and there is a little motion in the top graphic (yikes, it’s Flash).
The previous site arrangement was one where the organization managers were less interested in managing the content, and they did not even have admin access to the wordpress site. So the first step was getting a database export of the original site and a file archive.
I told them my desire is to become un-necessary, to give them full admin access to not only the WordPress site, but the domain as well.
I did make a first mistake; their previous site was set up on MediaTemple, which I had recommended as a web host. But creating a new account was not possible using the domain they owned (because it existed elsewhere), and transferring the nameservers required some steps of the last web developer.
Based on a recommendation from Tim Owens, I went with A Small Orange for their Cloud VPS hosting. I have to say that I have since set up two more clients with them, and recommend them highly for the hosting and the support.
To maintain continuity, I mounted the old site at http://ediblegardenproject.com and set up WordPress for multi-site via subdomains- so I created a development site at http://seed.ediblegardenproject.com for the new site (that now redirects to the main site).
I also had to make the change so their email all worked; dealing with email servers does get me the willies, but they were actually just redirecting all mail to gmail accounts, so all I had to do was set up mail forwarders in cpanel (later they activated a Google services account, so there were a few more fiddly things to do to establish the mail servers. lIke I say, messing up email is not something I want to screw up, but it turned out easy).
What I liked off the bat in meeting via Skype with Emily and her team is that they had already done what I typically asked of clients- they provided examples of web sites that had features/design elements they would like in theirs, and they had even looked at a few WordPress themes that spoke to them.
So we quickly settled on the Woo Scrollider Theme; having worked with another Woo theme on the Thoughtvectors site is helpful in knowing what the themes can do (or what it takes to end around them).
What turned out unique for me in this project is that I did very little theme hacking/modifications; I was able to do everything EGP wanted with plugins and theme settings (I always do projects as a child theme just in case I end up having to do more extensive modifications). The Woo Themes options let me, and eventually the clients, manage a lot of the design changes that typically on other sites they would need to ask me to do in code.
Nearly everything I did was customized CSS, often to hide un-needed elements (e.g. boxes on the slider). Let me be clear:both – the Developer Tools in Chrome (or equivalent in Safari/Firefox) is essential
Inspecting elements and using the Developer Tools to try custom CSS)
It allows me not only to see what is going on in display, but I can experiment with modifying/overwriting the default styles, and once finding what works, I can copy it to my site’s style sheet.
Okay, let me skip ahead to the final site (it’s vertical oriented, but the responsive design makes it all fit smaller screens well:
The clients can easily manage the header slider images (I suggested keeping them to the same dimensions). Below that are three main teaser blocks for major components of the organization (“We Share”, “We Farm”, and “We Teach”) and the slider below is just recent posts pulled to the front.
The three bottom widgets are driven by plugins
- Calendarize It uses custom content types to populate the events calendar and the left widget. The old site used an older version of the plugin, but was tied to post categories.
- The Woo flickr widget gaveme troubles, I did find that it was just using calls to the flickr badge generator and wa snot updated to use https urls. I decided to go instead with Awesome Flickr Gallery and really just for this one widget, nice because it let me use a random selection on images.
- The third widget is a random and changing set of testimonials. On their mockups, EGP included on static quote, but I thought that could be done better, and found a nice Quotes Collection plugin that allows the EGP folks to populate a pool of quotes that are shuffled in with some jquery.
The footer too took some CSS jimmying to get the grey weather van image to bleed off the bottom, but all of the content is done via entries in the Woo Themes panel.
They liked another site that had a dynamic social media stream, so now EGP has their own
This is done with the WordPress Social Stream plugin; which is a premium plugin, but at $18 totally worth it. It let me set up streams for them from Facebook, twitter, and flickr in a dynamic wall of media. The plugin has a lot of options to configure streams from even more services. I’d use this one again.
They were already set up and using a Mailchimp account for their email news letters; we have signup links in the footer of all posts, but adding on MailChimp Campaign Archive plugin gives them an index of all news letters that is dynamically updated (it fetches the data from Mailchimp)
The team liked the front page sliders and were interested in having similar features for their major project areas, such as Loutet Farm, Grow a Row Share a Row, and the Food Hub.
The Woo Theme comes with this just on the front page, but by adding the Woo Slider Plugin EGP has photo banners on multiple sections, and they can easily manage/update the images themselves. For some of the pages, example “Our Story” I set them up with yet another plugin, Display Posts Shortcode, which lets them put a widget like thing in a page to list just a certain number of recent posts in a category.
And then I had them line up a Gravity Forms license ($35) so we could create four different custom signup forms they want for various programs and volunteer opportunities.
A later thing I did was to clean up a lot of their page structure, a lot of their content exists as WordPress pages (most of the things listed on the menus), and they had inconsistent hierarchy structures, and often long URLs. I flattened it out, and tightened up the page slug names.
This can cause a problem for existing links to these URLs, so I used the Redirection plugin to make auto redirects from old URL to new. This is a nifty plugin because it gives you insight to 404 requests generated, and that can help identify bad links.
The final thing was to do some jigging on multisite to change the primary URL (http://ediblegardenproject.com) to point to the content I had set up in the dev space (http://seed.ediblegardenproject.com), and move the old stuff from the primary to http://archive.ediblegardenproject.com
This turned out to be relatively easy, following the multi-site guru Mike Epstein’s tip. The one hitch was getting images to work, I ended up having to copy some of the wp-uploads directories to new locations.
Because the site’s URLs might be very different, I did customize a 404 Not found Page to be a bit more helpful, see it in action for a URL that does not exist http://ediblegardenproject.com/where-is-this-page
This is done by copying an existing template file in the main Scrollider Theme, like page.php, and putting it in the child theme as 404.php. In the gut of the page, I have a few tricks that use HTTP variables.
The first one uses REQUEST_URI (this is everything after the root URL of the site) to echo the URL the visitor was trying to reach:
echo 'We have redesigned the EGP web site and some things may still need adjusting. It looks like you were trying to go to ' . get_home_url() . $_SERVER['REQUEST_URI'] . '.';?>
And below that we can use that same info, to offer a link to the URL on the archived site
Look for the page on the archived version of the EGP site: http://archive.ediblegardenproject.com
I’m likely forgetting some other details we worked through, but what I love most is each time I look at the site, I can see that the EGP staff is really managing their own content, adding new things, designing their pages to reflect their needs.
All without me.
I have not worked on the site since June, and they have taken over.
That was my plan, to be made un-necessary (but not gone, I always offer clients full access to request answers, fixes, etc).
And now that I will be spending some time in Vancouver maybe in December, I look forward to meeting the EGP team in person and seeing some gardening action.
Oh, and it s great project, don’t just drool over the web design, check out what EGP is doing at http://ediblegardenproject.com
I didn’t really realize you farmed out as a Word Press consultant, or I would have hired you to move mindonfire off the Lane multi-user blog site over to GoDaddy.com. Or maybe you are a designer only…
I hired 9 Planets and a well spent $300 later, Mind on Fire was finally ensconced–although we are still dinking for a variety of things.
Designing with Word Press is a beautiful thing, as your site shows. My sister and I have had a Blogger site for six or eight years now at:
http://nightvisionjournal.blogspot.com/2014/10/mysterious-night-vision-field-journal.html
and just this evening I was messing around trying to think of monetizing the site, what would be the best arrangement of elements, fonts, colors, sizes–all those crucial design issues that I have a whole lot more respect for a few hours later.
Your site looks fantastic. Mine looks shitty. Sigh.
I do the full service thang, design, moving, and shining the silverware.
But by all means, in the future, DO NOT UNDER ANY CIRCUMSTANCES host with GoDaddy. Bad Mojo. Bad.