Project
2019
bespoke websites, WordPress consultancy
Byline Times

Design and development of a newspaper website

Distinctive website using WP5's Block Editor to make the editorial team more efficient. A limited set of components, options and automations combines to produce an easily variable, yet very consistent website.

Homepage produced by the Byline Times team without our oversight, after just one week of using the site:

We designed and built bylinetimes.com in two months, and used Gutenberg (and ACF) with a set of custom blocks, components, options and abstractions that make the underlying design flexible enough to respond to more or less any editorial requirement.

  • The homepage can have a sidebar on the left or right, or no sidebar at all (switched in an instant).
  • The body is divided into rows, and each row can hold 1, 2 or 4 items.
  • Each item can be a list of posts or an article preview.
  • In each list, the editor can manually select which posts to show, or choose a category from which to draw posts, or automatically show the most recent updates from the site; editors can decide whether to show or hide lead paragraphs, bylines and publication dates.
  • In article previews, the editor can choose from a number of basic layouts (e.g. “photo above, text below”; “text only”; “text over a photo background”; and so on) and either use the metadata drawn from the post itself, or override key elements to suit the editorial context of the homepage.
  • In both lists and article previews, there are options for alignment, font choice, colour combination – all are consistent with the site’s theme, but allow considerable flexibility and variation.
example of some of the settings and options available for an individual element in the homepage… using Gutenberg means that changes can be previewed instantly

 

Example of an internal page

Single Posts also use WP5’s Block Editor. They inherit their colour scheme from assigned taxonomy, and CSS filters allow photos to be given a consistent yet distinctive treatment, again referencing a “retro” print aesthetic, but underpinned by CSS so cutting-edge that Edge won’t cut it ๐Ÿ˜

Reusable Blocks allow CTAs to be quickly placed in the flow of articles.

Taxonomy is used to produce “related reading” cross-links.