What We Learned From Building An Accessible Gutenberg Friendly Theme

What We Learned From Building An Accessible Gutenberg Friendly Theme

The team here at WPMU DEV is also the same team behind CampusPress, which provides hosting and WordPress services for schools and universities.

Yesterday, we released our latest product, a flexible and accessible WordPress theme for schools and education.

This is the first theme that our team has created that truly incorporates everything that the Gutenberg block editor has to offer – such as reusable blocks, editor styles, content groups, and customizing default blocks.

No use in sugarcoating it, it wasn’t as fast or as easy of a project as we hoped. But the end result was well worth it. We thought we’d share some of the why and how of what we created here. It should be useful to anyone choosing, designing, or developing new WordPress themes in the future.

A Bit Of Backstory

We work with tens of thousands of schools and colleges the world over. Everything from student blogs and ePortfolios, news sites, and on up to the main website of large universities. See bulletin.hds.harvard.edu and charlestonsouthern.edu as just two examples.

Not every site needs (or can afford) custom design and development. But our customers have three main, often competing, requirements:

  • easy to publish, edit, and create content by anyone
  • exceed all accessibility guidelines
  • adhere to branding guidelines like logos, colors, fonts, etc.

It is pretty easy to create or find themes that meet one or two of these requirements but ensuring all three, that’s a whole next-level challenge. While we have some work to do (more on that below), we’re certainly happy with the results.

Choosing Our Development Stack

Before beginning development, we spent a good amount of time deciding on the specific features we wanted to include and then looking through the different frameworks and tools out there to build off of. There is no reason to completely start from scratch.

Our focus was on finding the best existing tools and frameworks that would help us with our accessibility, performance, and user-friendly goals.

As a foundation, we decided on UnderStrap which itself is based on the ‘Underscores’ theme by Automattic and the Bootstrap framework by Twitter. This is a pretty popular framework and it is easy to see why. Starting with UnderStrap has decreased development time and helped significantly with our accessibility goals.

We also knew that we wanted to rely heavily on the WordPress customizer for all of the different theme options and settings. We fell in love with the Kirki framework and leveraged heavily quite a few of the controls it offers.

Our theme makes use of CSS Variables which also made it easier and faster to develop (with much less JavaScript for improved performance). It is worth noting, this does require a special script to work in IE11 (which quite a few of our customers do use) and not every feature can be used in IE11.

For the typeface options, we

[…]

 



This article was written by Ronnie Burt and originally published on WPMU DEV Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top