Web content management overview

Web content for LSE Cities is managed through WordPress; the Pods plugin is used to manage all the different content types specific to LSE Cities (research projects, publications, events, audio/video items, people, etc.) besides the basic Page and Post types provided by WordPress.

Content managed through WordPress + Pods is processed by the LSE Cities WordPress Theme to generate the web pages of the LSE Cities website at http://lsecities.net/. This WordPress theme was initially developed as a standard theme, whereby each page type is generated through a specific WordPress template or variants of a shared template depending on context; the theme’s source code is gradually being updated in order to enforce a clean separation between the data used to generate web pages and the actual templates for each page, and to allow for distinct parts of the WordPress theme to be developed independently by different developers and designers.

The following sections illustrate the core development tooling workflows and outline the skills needed to manage each workflow. Core skills needed to develop any part of the LSE Cities WordPress theme are:

  • Version control with Git
  • Gulp for asset-management pipelines

Deployment and operations details (web caching, load balancing, CDN asset serving, etc.) are omitted.

LSE Cities WordPress Theme

../../_images/architecture.png

The overall structure of the LSE Cities WordPress theme is outlined in the chart above: Content, as managed by editors through the WordPress dashboard, is processed to generate the web pages of the lsecities.net website and of any conference microsites, as well as to make LSE Cities and Urban Age content available for API consumption by apps (such as the new content archive search interface and the upcoming Urban Age digital platform). Stylesheets and Javascript code are preprocessed for optimizations and to enable faster content loading and page rendering.

Generating web pages

../../_images/architecture_wp-theme.png

The section of chart highlighted above illustrates the steps involved in the generation of each web page available to visitors.

  • Pods code fetches content from the WordPress + Pods backend as needed and assembles a PHP data structure (content data) ready to be used by a templating engine.

For example, when generating content data for an event’s detail page, the Pods code retrieves the event’s data from the Events pod, speaker profiles from the People pod, and a list of past and upcoming event (to be displayed in the event page’s sidebar) from the Events pod. It then returns a data structure which includes all the event’s information, speaker profiles and event calendar.

  • Twig templates using HAML syntax then turn content data into the HTML pages that are sent to visitors’ browsers (after being cached and optionally distributed through load balancers).

Twig provides a much cleaner templating system than stock PHP, and the MtHAML library allows to use Twig with terse HAML syntax for rapid prototyping and development.

Skills required to manage this part of the WordPress theme

For the first step (content to content data via Pods code):

  • Knowledge of WordPress internals and WordPress theme development
  • Pods API

For the second step (content data to HTML5 pages via Twig/HAML templating):

  • HAML markup
  • Twig templating

LSE Cities API

../../_images/architecture_wp-api.png

The section of chart highlighted above illustrates the steps involved in the generation of WP-API JSON data served through the LSE Cities API.

  • As for content data used to generate web pages, Pods code fetches content from the WordPress + Pods backend as needed and assembles a PHP data structure (content data).
  • Rather than further processing content data through a templating engine, this is serialized to JSON documents and sent to API consumers according to any applicable ACLs.

LSE Cities API data is currently used (packaged as an exported full dump of the whole LSE Cities content) to power the new content archive search interface. It could as well be used by any other API consumer (for example, the upcoming Urban Age digital platform or by packaged native web apps), either as an exported dump, via live queries to the LSE Cities API or, for optimal performance, it could be exported to a fast, distributed JSON data store such as PostgreSQL and then used without the performance penalty imposed by PHP and WordPress.

Moreover, using the LSE Cities API the lsecities.net website itself could in theory be generated via any CMS pipeline other than WordPress itself, if needed in the future for performance, integration or other reasons, whilst still managing the site’s content itself within WordPress.

Skills required to manage this part of the WordPress theme

  • Knowledge of WordPress internals and WordPress theme development
  • Pods API
  • WP-API
  • Experience with API development

Content styling

../../_images/architecture_stylesheets.png

The section of chart highlighted above illustrates the steps involved in the generation of the main app.css stylesheet that is used on the lsecities.net website as well as on conference microsites (such as the Urban Age Governing Urban Futures - Delhi 2014 microsite).

  • Source SCSS stylesheets are developed using SASS (SCSS syntax); all of the theme’s stylesheets and any SASS library are compiled to plain CSS via LibSass, minified and concatenated into a single app.css stylesheet which includes all the theme’s styles (except those enqueued by WordPress plugins).

The LSE Cities WordPress theme was initially developed using the (now deprecated) 1140px CSS Grid and is currently being refactored as a mobile-first, progressively-enhanced, responsive theme using the Susy library.

Skills required to manage this part of the WordPress theme

  • Knowledge of WordPress internals and WordPress theme development
  • SASS
  • CSS3
  • Responsive web design
  • Mobile-first design

Javascript workflow

../../_images/architecture_javascript.png

The section of chart highlighted above illustrates the steps involved in the generation of the main app.js Javascript bundle that is used for the frontend code on the lsecities.net website as well as on conference microsites.

  • The LSE Cities Javascript sources and all the CommonJS dependencies are bundled via Browserify into a single app.js Javascript file which includes all the frontend code for lsecities.net (except any scripts enqueued by WordPress plugins).

Javascript dependencies that are not available in CommonJS format are bundled via browserify-shim; modules not available via npm are installed via Bower.

Skills required to manage this part of the WordPress theme

  • Knowledge of WordPress internals and WordPress theme development
  • Javascript
  • Browserify & browserify-shim
  • Progressive enhancement best practices