As I was discussing on the last episode of Worst Case Scenario, I’m a bit of a luddite when it comes to the web. I like reading, and I dislike anything that distracts me from that task. Fortunately the Safari web browser comes with a great Reader mode which strips all the cruft from a page and simply displays the text of the main article, nicely formatted for reading (Firefox has this feature too). I use it constantly.
I decided a few years ago that I wanted my own website to be as readable as the special Reader mode in my browser. Every four months or so I would check to see if anyone had created a WordPress theme that could do the job, but I was never able to find anything suitable. So I wrote my own!
Direach (from díreach in Irish, meaning direct) is the fruit of my efforts, and it is the theme running on this site today. It is my effort to create a WordPress theme that is reader-friendly and accessible.
Typography
Direach doesn’t download a custom font, it uses the Georgia typeface which is a serif font with a relatively large x-height. Created by Matthew Carter for Microsoft specifically for screen use, it is the same font used by Safari’s Reader mode and is installed on the vast majority of computers, phones and tablets. A default serif font is declared for operating systems that do not ship with this font. The default paragraph font on most browsers will render at 18px, increasing to 20px on wider screens. Elements that are not part of the main body of the page have a reduced font size.
Reduced clutter
Almost all WordPress sites have a header at the top containing the site title, subtitle, and the navigation menu. This can take up a large proportion of the screen, especially if the reader is on a mobile device. Direach shifts this content down to the bottom of the article when it is only showing a single post or page. For index pages and the home page, this content is placed at the top. All content is displayed in a single column, apart from two columns of ‘widgets’ at the bottom of the front page. On single item pages/posts, the site title is appended to the article heading.
Small and fast
Not only does Direach not load any external fonts, it doesn’t add any JavaScript either. The markup is relatively clean. Even on my fairly slow US-based shared host, it loads relatively quickly.
Accessibility
Direach is based on the Underscores base theme by Automattic, and so it has excellent support for screen readers.
Future developments
Direach is licenced as GPL v2 or later and the source is available on GitHub. There are a few issues I still need to address – the image in the masthead does not deliver a retina size for devices with high-density screens, despite poking around in the source of get_header_image_tag I couldn’t find a way to get it to emit srcset attributes, despite this functionality being added in version 4.4.0. I’m not 100% happy with the final design and there are still a few rough edges.
I may submit this theme to wordpress.org in the future after a bit of dog fooding, although I think the design may break one or two of WordPress’s theme guidelines.
Reflections
It took quite a bit of work getting Direach to this state, in particular to get the theme working with some of the weird cases in the WordPress test data set. At various stages I worried whether this theme is too stark – almost Brutalist in nature. I also worry that it gives this site a slightly-too-authoritative tone. But overall I’m happy with the results.
Installing
To install this theme on your own site, go to Direach’s home on GitHub and under Clone or Download choose Download ZIP (your browser may automatically decompress the theme, in which case you will have to recompress it). Upload this theme to your WordPress install via Appearance > Themes > Add New > Upload Theme. You can upload a custom image beside the site title under the Appearance tab of the admin interface.
