We recently built out a group of websites for educational organisations in Australia for a partner company.  The challenge was the client wanted the sites to be run on a single installation of Wordpress, using Wordpress multisite. The goal was to save costs and aid maintainability by reusing code for each site.

acu 2

The sites all have similar elements but retain their own unique branding.  Each site has some of its own Information Architecture and content types.  Still, there seemed to be enough shared DNA there to make sharing an installation and codebase worth while.  here is a run down of how we did it.

The sites are: 

multisite

The key technologies used to gain benefits from this setup are:

WP Parent  - Child themes

Templates: Twig & Timber

Style Code: Sass & Foundation framework

Custom Fields and buildable pages: Advanced Custom Fields.  

Stylesheets shared

Each site runs from a child theme of the acu-parent theme.  The parent theme holds all the code that is common to each site.  The child sites override any of the twig template files it needs to.  Sass code is kept to a minimum by properly using the foundation settings file on a per site basis to style the foundation elements.  This often results in very small codebases per site, often only a few hundred lines of Sass.  


@import "variables";
@import "foundation/settings";  // this sites foundation settings.
@import "../../acu-parent/scss/mixins";
@import "../../acu-parent/scss/foundation";
@import "../../acu-parent/scss/acu";

The sites variables are set, specifying paddings, colour schemes etc and then the shared code is called from the parent theme, which builds the foundation and ACU components and styles using those variables.  

Foundation enables us to build a visual style library for reuse between sites based on a solid codebase without reinventing the wheel for common visual components. 

Twig Templates Shared 

Timber understands parent-child themes out of the box, so no special setup required there.  The templates for all common page layouts, partials, headers and footers are kept in the parent theme. When a page template or partial needs to be overwritten, the file is copied into the site dir and modified.  

twig inheritance

Twig's includes and blocks features make this really easy and powerful.  Using Twig instead of Wordpress "templates" is a massive win and really makes WP a viable option for maintainable custom web builds.

Page Building with ACF

Advanced custom fields is one of our favourite WP plugins.  It enables developers to quickly visually add fields to page layouts and save the definitions into php files so they can be included in the site's source control.  It could be improved by providing a good API to define the fields programatically but it is very good.   

acf

The flexible content field acts like a repeater field, except you can have many different subfields, which a user can add in any order.  This enables the designers to define content blocks with which site editors can build pages however they like.  The design integrity is maintained, but content flexibility is given to the content producers.  

Of course, thanks to Timber, the template code is easy to develop, understand and override per site if the markup for a field type needs to change.


     {% for media_item in post.get_field('flexible_content') %} 
        {% if media_item.acf_fc_layout == 'people' %}
           {% include 'partials/flexible/people.twig' %}
        {% elseif media_item.acf_fc_layout == 'extra_people' %}
           {% include 'partials/flexible/extra_people.twig' %}
        {% elseif media_item.acf_fc_layout == 'downloads' %}
           {% include 'partials/flexible/downloads.twig' %}
        {% elseif media_item.acf_fc_layout == 'accordion' %}
           {% include 'partials/flexible/accordion.twig' %}
        {% elseif media_item.acf_fc_layout == 'related' %}
           {% include 'partials/flexible/related.twig' %}
        {% elseif media_item.acf_fc_layout == 'map' %}
           {% include 'partials/flexible/map.twig' %}
        {% endif %}
      {% endfor %}    

Conclusion 

So that's how a modern Wordpress multi site works.  A visual library of page parts to use across all sites based on foundation but also developed internally.  Sass as a css pre-processor that enables variables to modify css pre-build. Twig/Timber, a modern template language that understands theme child-parent relationships and has strong inheritance capabilities.  ACF flexible page content builder that works seamlessly with Twig/Timber. This is all very, very easy to set up, works brilliantly and saves a lot of duplication and effort.