Community Theme for WordPress Multisite

This post was first published on Erica Heinz’s blog.

For the last 14 months, I’ve been working on a major WordPress Multisite theme withPatricia Lutz (PHP / open source developer extraordinaire). Originally envisioned for use merging and replacing various disconnected sites of Occupy, the theme quickly showed its use for disaster relief organization NYC Prepared.

Grassroots groups generally lack the resources to establish and maintain a good web presence. Multisite lets you set up multiple WordPress sites in one network, so that you can add/remove functionality all at once. But the sites are still isolated, connected only on the backend. OurCommunity theme organizes and aggregates all child sites, creating a community-building social network.

The theme includes:

  • a front page template that aggregates posts, events, and requests from all members
  • an aggregated news feed, with global categorization
  • an aggregated event calendar, also with global taxonomies
  • two child themes:
    • one for groups (who need a website), providing a blog, calendar, newsletter, and custom pages
    • one for partners (who already have a website), importing their RSS and iCAL feeds into the system
  • a third “network” template aggregating content from a custom group of sites (e.g. “Brooklyn”)
  • a sortable directory of members

The project brings local disaster recovery groups together with established agencies to share information and resources. Awesome community organizer Devin Balkind is building out the partnerships and content, and open source development experts Glocal — especially amazing sysadmin Dana Skallman — are continuing to expand and streamline the theme.

One other really exciting point: this collective structure (under a parent nonprofit) will allow small groups to get funding normally reserved for larger, more bureaucratic organizations.

The code was a great learning experience, utilizing many modern techniques and tools for maintainability. Using starter theme Bones as our base, we extended it with:

  • mobile-first responsive design
  • Bourbon library of Sass CSS mixins, plus Bourbon Neat for a semantic grid
  • Isotope filtering and sorting on the directory
  • open source typography (Lato and the iOS7 icon font)
  • open source plugins (including analytics, captcha, email newsletters, user avatars, custom forms, and others)

Review my design process post to see some screenshots.

Check out the live site at nycprepared.org.

And browse the project wiki for more information on the setup. Volunteers are very welcome, and I’m happy to answer any questions about the project!

2014-10-28

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>