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 started out with making many of the free Google Fonts available in the customizer. But we needed to load all variants and styles (bold, italic, etc.) which can be heavy to load, so we opted to not include Google Fonts at all and landed on adding only free Variable Fonts instead. There is enough variation there with modern fonts to give end-users great options to choose from.
Last, our school customers loooove icons. Iconmoon made it easy for us to select from free icons (but we tried not to include too many so that we don’t slow the site down or overwhelm the user). As a result, it easy to add and customize icons for menus and in content blocks.
On that note, we’re particularly excited about new hooks in WordPress 5.4 which will allow us to add custom icon options to Menus in the Customizer. As of now, we force users to go to Appearance > Menus if they want to manage icons, even though they can do everything else with Menus right in the customizer. This new WordPress core feature will be a big win for usability.
Favorite Lesser-Known Gutenberg Features
Working with this theme has also been the first significant experience many on our team have had with the Gutenberg block editor. We’ve gotten addicted to some of the lesser-known features which we have enhanced with the theme too.
Reusable Blocks
Reusable blocks are incredibly useful for any block or content that repeats more than once across a site. You can update it once, and those changes will be applied everywhere the block appears on a site.
With our theme, once you create a reusable block, we’ve used the filter in WordPress core to show a new main Reusable Blocks menu item in the WordPress dashboard too.
Our customers use Reusable Blocks for a variety of reasons, including footer content, creating ‘mega menus’, and important notices across multiple pages.
Content Groups
Using ‘Content Groups’ in the block editor is what really makes full page builder features possible. You can easily make ‘rows’ or combine blocks and choose a separate background color for the group to give it separation and a more customized look.
Editor Styles
One of our favorite features of ‘Gutenberg’ is that theme authors can make it so that the back-end editor displays the content with the same styles as the front-end. A true ‘WYSIWYG’ experience, with background colors, fonts, and buttons all showing the same when editing as it does when viewing the site live.
However, for anyone developing themes, we found that we basically needed to apply styles twice as the HTML in the editor is different than the front end. This also meant we kept having to tweak and make changes twice as we improved the theme during development. It has sort of resulted in an ongoing battle. We expect that documentation and implementation of editor styles will continue to improve as more theme authors take advantage of it.
Accessibility Design
One of the features that we spent a lot of time on was with giving users flexibility on choosing colors, but still enforcing accessible contrast ratios between text and background colors.
Here’s an example of how it works:
As background colors change, we change the color of the text. We also use chosen colors to then provide additional accent colors that can be used in block settings for backgrounds, buttons, quotes, etc.
While most accessibility tools are more about finding accessibility issues, our goal is more about prevention before the problems occur. We know that accessibility is a continuum, meaning it can always be improved. As such, we will continue to build on accessible design options in our themes in products.
What’s Next For Our Theme?
We built this theme to be the parent for all of our future custom theme projects. We’ll continue to add new custom blocks and integrations with popular plugins that our customers use.
We also are working on making Reusable Blocks that can be shared across sites in a Multisite Network.
We’re still doing some real-world testing in hopes, if there is demand, that we will eventually submit it to WordPress.org as well.
In the meantime, if you know of a school that needs a website and would like to use this theme, please send them our way! 😉
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox – free!
Tags:
Keep reading the article at WPMU DEV Blog. The article was originally written by Ronnie Burt on 2020-02-27 12:58:03.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.