As an early present for Jul, I give you Popper, a new free WordPress theme with a focus on accessibility, mobile-first design, beautiful typography, and content-centric minimalism.
As with Simone, my theme from last year, Popper was built from _S and is the subject matter of the yet-to-be-released update to the popular WordPress: Building Themes From Scratch Using Underscores course at Lynda.com (release date tba).
Accessibility and Thumbs
Popper started out as a simple idea: Build a beautiful content-focussed theme that met or exceeded the WordPress Accessibililty Guidelines, and provided a user experience centered around how people visit the web today: with their thumbs on mobile devices.
The accessibility part was relatively easy: _S meets the Accessibility Guidelines out of the box, and extending them just means following the path already carved out by its developers. To enhance what came with _S, I also co-opted the exceptionally well built and accessible menu from Twenty Fifteen and used CSS and JavaScript to make it work as a horizontal menu on wider screens.
In building the menu, I also answered my own challenge from my talk at WordCamp Miami 2015 to design the theme with thumbs in mind. To achieve this, I moved the mobile menu button, which traditionally is positioned in the top left corner, to the bottom left corner, and made the menu appear on top of the content rather than 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.
Site Icon as a Home Button
A common request for themes is the ability to add a logo. In Popper, this is achieved using the built in Site Icon feature that normally populates the favicon for the site. The global home button in the theme appears as a square in the top left corner. If no Site Icon is added, the square shows the first letter of the Site Title. If a Site Icon is added, the square shows the Site Icon.
Carefully Considered Options
I am a big fan of options where options are appropriate, and Popper comes with some carefully considered options via the Customizer. In addition to the Site Icon, the site admin can change the background color and text color of the header, and add a header image as a background element.
If the header background color is set to hard white (#ffffff), the theme switches to a minimalist B&W mode that should appeal to even the most discerning minimalist.
The full header, displaying the Site Title and Description as well as the main menu and home button, is only displayed on the Home and archive pages. On single posts and pages, a reduced header is displayed to free up space for the content.
Popper has one widget area that displays at the bottom below the main content by default. From the Customizer, this can be changed to display the widget area as a sidebar either on the hard left or hard right of the view.
The theme also ships with two custom widgets: Enhanced Recent Posts which shows the most recent posts with featured image, post title, and excerpt, and Enhanced Recent Comments which shows recent comments with commenter Gravatar, name, excerpt, and a original post title.
Subtle touches
Because this theme was built as a learning tool, there are a lot of subtle touches that may not be obvious at first, but provide an improved user experience. CSS flex (a.k.a. “flexbox) is used for post navigation and widgets to create a more harmonious display of content, and 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.
On the home page, the first post is displayed as full content with the option of truncation through 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 grows on :hover and :focus.
And if a post author has a Gravatar associated with their email address, the Gravatar appears next to the post meta to show the visitor who wrote the post.
Work in Progress
Like all my themes, Popper is a work in progress, and it will continue to evolve as I come up with new ideas and issues/feature requests/pull requests are submitted. The theme is translation ready and I readily accept contributions from all interested parties in the form of issues, feature requests, pull requests, and translations. To follow the ongoing development of Popper, visit the GitHub repo.
Why “Popper”?
More than likely, you’re wondering why the theme is named “Popper”. The answer is simple: All my themes are named after famous philosophers. This theme is named after Karl Popper, who worked extensively on the philosophies of science, politics, and ethics. Popper is maybe most famous for his ideas on empirical falsification and the problem of scientific demarcation, but he also made great contributions to the study of ethics and politics as a proponent of social liberalism.
I first became aware of Karl Popper during my work on Thomas Kuhn’s Structure of Scientific Revolutions, the almost nihilistic anti-realist epos that birthed the idea of scientific revolutions and paradigm shifts. Kuhn’s work stood in sharp contrast to Popper’s positivism, and in my work with both men’s ideas, I found my own way of seeing the world, as a Kuhnian realist, or a revolutionary positivist. You be the judge.
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.
And yes, you are welcome to call me a philosophy nerd.