My First Gutenberg Ready, Mobile First Theme

tl;dr you can find the code for this theme and download on my Github profile.

When I decided to revamp my blog, I knew that I’d want to start with a fresh theme. I’m not much of a designer, but I appreciate themes that are minimal, make decisions for the display of content, but allow some customization options to let others make it their own.

With Gutenberg around the corner, I also knew that I’d want to take advantage of the content layouts that the new WordPress editor provides, and future proof the theme a bit for both that editor and the variable screen sizes that visitors would be coming from, making it a mobile-first theme.

With that in mind, I took a look at some of the existing resources for Gutenberg theme development, including articles like this introduction to adding theme color palettes by Brian Gardner, and plotted out some of the features and settings that I’d want to include.

Introducing Malik Theme

This new theme is named in honor of Om Malik, a long-time blogger, friend of WordPress co-founder Matt Mullenweg, and founder of the sadly changed Gigaom. While I’m using the theme with a header on top of the page, I’ve created a layout similar to Om’s personal blog, with a left sidebar displaying the site title, menu, and information.

I’ve added a few settings that the site owner can modify, and am considering what new features to include or default for anyone using the theme. The existing settings currently include the following:

  • Header Location – You can choose to put the header on top or on the side of the site
  • Hide Header on Scroll – Make the header info disappear on scroll
  • Hide Header Menu on Scroll – Ditto for the header menu
  • Font Pairing – I used some font guides to select good pairings for typography-illiterate people like myself
  • Night Mode – Let visitors toggle night mode to make the page darken for low-light reading
  • Read Time – Display an estimate for how long an article will take to read
  • Article Progression Bar – Show a progression bar for how far you’ve scrolled in an article
  • Author Info – Choose whether to display the author picture, display name, and description at the bottom of articles
  • Post Meta Header – Display info such as author URL, comments, tags, categories, post time, and post date via shortcodes before articles
  • Post Meta Footer – Display info such as author URL, comments, tags, categories, post time, and post date via shortcodes after articles
The sidebar header layout of the Malik Theme
The sidebar header layout of the Malik Theme

These features were built with blogging in mind. I use night mode on apps like Pocket and Twitter, and having the option available on a website is something that I would like to see more frequently.

Night Mode is a useful feature for reading in a darkened room

Speaking of Pocket, I appreciate how it gets out of my way while reading by hiding menus on scroll. Read time and progression bars are available to give an indication of article length, which helps me determine if something is going to be read right now or added to Pocket for later reading in the first place.

The theme is still under active development, but you can see it in action right here on my personal site. If you want to try it out, you can get the code on Github. If you find a bug or have suggestions for new settings or features, I’m always looking to improve!

Note: Gutenberg itself is in active development as well, so if you use this theme, be sure to watch it for updates!

Leave a Reply