Popper: A Free Touch-Friendly WordPress Theme with a Focus on Accessibility

After three months in the WordPress.org theme review queue, Morten Rand-Hendriksen‘s new mobile-first theme is now live in the official theme directory. Popper is one of the few themes worthy of the “accessibility ready” tag, which requires the author to meet all of the WordPress Accessibility Guidelines. This includes features such as semantic markup and structuring, screen reader texts and focus states on all interactive objects, high-contrast typography, and navigation suited for all input devices.

The theme is based on Underscores, a starter theme that already has accessibility baked in. Hendriksen also used Twenty Fifteen’s CSS and JavaScript to provide the menu, which works as a horizontal menu on wider screens.

popper

Popper comes with a handful of options available in the native customizer, including support for a site icon, a 1600 × 420 header image, header text and background colors, an optional left or right sidebar, and a bottom widget area. If you don’t upload a site icon (which doubles as the global home button), the theme will show the first letter of the site title.

popper-customizer

In a post announcing the theme, Hendriksen outlined a few of the more subtle features that you might not notice immediately:

  • CSS flex (a.k.a. “flexbox) used for post navigation and widgets to create a more harmonious display of content, when the widget area is set to default, the width of individual widgets changes depending on how many widgets are added to provide a more interesting display.
  • The first post on the home page is displayed as full content with the option to truncate it using the More Tag.
  • Featured Images and center-aligned images are displayed as full-bleed content on smaller screens and center automatically on wider screens.
  • Posts can have an optional deck (summary) displayed directly under the post title, powered by the custom Excerpt feature in the post editor.
  • In-content links are highlighted using a grey underline that expands on :hover and :focus.
  • If a post author has a Gravatar associated with their email address, the Gravatar appears next to the post meta.

Hendriksen’s blog is currently using Popper as the live demo for the theme.

“Popper started out as a simple idea: Build a beautiful content-focused theme that met or exceeded the WordPress Accessibililty Guidelines, and provide a user experience centered around how people visit the web today: with their thumbs on mobile devices,” Hendriksen said.

In order to make the design thumb-friendly, he moved the mobile menu button from the top left corner to the bottom left corner. The menu appears on top of the content, instead of displacing it. “As a result, the menu is always accessible and within reach regardless of what type of device or input method you choose to use,” he said.

popper-mobile

Hendriksen, a philosophy nerd at heart, named the theme after Karl Popper, an Austrian-British philosopher of science.

“Popper became the namesake for this theme due to it’s basic premise of building on what has been done before and moving the world forward by introducing evolutionary and empirically falsifiable theories about how to improve the user experience through accessibility and a focus on the hands of the mobile user,” he said.

If you’re looking for a mobile-first theme with touch-friendly navigation that meets all of the WordPress Accessibility Guidelines, Popper is an excellent choice. It also works well as a starting place for child themes. You can download it for free on WordPress.org.

Popper is also available on GitHub and Hendriksen welcomes any contributions in form of pull requests, issues, feature requests, and translations. A full feature list is available on the theme’s home page.

Would you like to write for WP Tavern? We are always accepting guest posts from the community and are looking for new contributors. Get in touch with us and let's discuss your ideas.

13 Comments


  1. Borrrrrrrrrrrrinnnnngggggggg!

    Report


  2. Sarah, why do you always feature this guy’s stuff? You do realise that there are other theme authors out there, who might benefit more from the exposure, given that you’ve posted MANY TIMES about Anders?

    Report


    1. This is the first theme by Morten Rand-Hendriksen that we’ve ever featured on the Tavern.

      Report


    2. Pro tip: Reading an article before you comment prevents you from looking like an idiot.

      Report


  3. Hey Sarah,

    I agree that not so many theme devs pay attention to markup and accesibility, that’s why we have decided to build https://github.com/Codeinwp/Parallax-One as an accesibility ready and fully schema.org compatible theme. Is quite an investment, but hope it pays of in the future, while it helps creating a better web.

    Report


      1. Hey Sarah,

        The demo is here : http://demo.themeisle.com/parallax-one/ .

        The theme is also WooCommerce + EDD compatible, WPML and bbPress, while it works nicely with other plugins for pricing tables, forms, maps , postmatic etc etc.

        We have a page for suggestions : https://themeisle.uservoice.com/forums/252899-themeisle/category/137634-parallaxone and I would love if you can let me know your opinion on it, it was a lot of work invested and I still feel that not enough people know about it :)

        Report


  4. Clean, simple and minimalist, like Twenty sixteen. Cool job with moving a menu to the bottom left on small screens.
    Well selected theme, Sarah ;)

    Report


  5. Just a kind word here: Popper looks to be beautifully crafted and could serve as a solid foundation for new themes that share a commitment to accessibility.

    Cheers to Morten for doing the right thing: paying close attention to accessibility, and keeping it GPL. Fantastic work and a quality contribution.

    Report


  6. I liked how he positioned the mobile menu, unconventional but seems useful. Since phones are getting larger it is becoming difficult for our thumbs to reach the top corner, especially with one hand.

    Report


  7. Fantastic, professional and modern theme! Kudos to Morten.
    Thanks for sharing, Sarah.

    Report

Comments are closed.