Whether you’re creating a blog, a small business website, or an online magazine, Popper is a great theme to get you started. Accessible, mobile-first, and content-centric, this theme provides a great reading experience and makes it easy for your visitors to access your content regardless of device and input preference.
Popper is free to use, free to share, and free to modify and republish. It is ready for translation and an ideal theme to build child themes from. If you want to follow the development of Popper, have a bug or a feature you want to report, or just want to see how it all fits together, check out the GitHub repository and submit your issues and pull requests.
Content Features
In the design and development of Popper, great efforts were taken to meet modern accessibility guidelines as well as current design standards and norms. From mobile-first design to keyboard- and touch-friendly navigation and large open typography, the theme was built with the person on the other end of the connection in mind.
Here are some of its key features:
Accessibility
Popper meets the WordPress Accessibililty Guidelines, providing semantic markup and structuring, screen reader texts and focus states on all interactive objects, high-contrast typography, and navigation suited for all input devices. Whether you are using a mouse, a stylus, a finger, a keyboard, or your voice, navigating a site powered by Popper is easy.
Mobile-first Responsive Web Design
Popper was designed for all screen sizes with an emphasis on mobile. The responsive web design is modular and provides the best possible display of every type of content added to the site. From full-bleed images to responsive typography and alignments, Popper takes advantage of the available space and provides the best possible reading experience on all devices.
To provide more space for the content, the full header with site title and description is only displayed on index pages. On individual posts and pages a simplified header is displayed showing only the site icon and the menu.
Mobile Navigation
Popper features a mobile-first menu designed with thumbs in mind. On smaller screens, the menu is placed under an interactive button in the bottom-left corner that when activated displays the menu as a fixed popup element on top of the regular content. On wider screens the menu appears in a standard horizontal display across the top.
Typography
Popper’s design is built around two beautiful web fonts. Titles, meta-content, and widgets are presented with the modern sans-serif stylings of Fira Sans, while body content gets the more traditional and easy to read treatment of the screen-centric font Merriweather. These fonts were picked for their natural interplay and excellent readability across all sizes and devices. The theme also features a handful of icons from Font Awesome.
Images
On smaller devices and screen widths, featured and center-aligned images display full-bleed, taking up the full space from left to right. On wider screens left- and right-aligned images break out of the regular frame displaying as pulled elements to take advantage of the available horizontal space.
Image captions are broken away from the images and displayed with clear association to ensure readability and clear captioning of images.
Blockquotes
Popper features large blockquotes with pull capability. Add the align-left or align-right classes to a blockquote and it automatically turns into a newspaper-style pull quote that breaks out of the regular frame on wider screens.
Author Images
I the post meta associated with each post, Popper displays the author image next to the author name and publishing date if the author has a Gravatar associated with their email address. For authors without a Gravatar, the post meta is center-aligned without an image.
Decks powered by Excerpts
Popper allows the author to provide an optional deck at the top of the article directly after the the title and before the main content through the custom excerpt function. The custom excerpt will be displayed as a deck on single posts and for the first post on the home page. On all other index pages, the custom excerpt will be displayed in place of the auto-generated excerpt.
Simplified Index Display
Posts are simplified across all index pages, displaying a smaller title, reduced post meta, an excerpt (custom or auto-generated) and a clear Continue Reading link.
On the home page, the first post is displayed in full with the option of using the More Tag to truncate content.
Post- and Index Navigation
To provide easy navigation, post navigation to previous and next posts display the title of the posts linked. On index pages, sequenced paging navigation is provided allowing the visitor to go to the previous and next page or select a specific page from a list.
Customizer Features
Popper provides extensive customization options through the Customizer:
Custom Header Text- and Background Colors
The site administrator can change the header text and background colors from the Colors section in the Customizer. It is recommended to define colors with high contrast in this section.
B&W Color Option
If the header background color is set to white (#ffffff), the theme automatically changes to a clean black & white mode that will appeal to the most discerning minimalist.
Custom Header Image
A custom header image can be added through the Customizer. The image will display as a background element for the header and will be reduced on single post and page displays.
Site Icon as Site Logo and Home Button
Popper has a dedicated “Home” button that appears as a floating element in the top left corner on all displays. By default the button displays the first letter of the site title against a black background. This can be changed to a custom logo by adding a custom Site Icon in the Customizer.
Widget Area Layout Options
Popper features one widget area that displays below the main content by default. The theme offers two alternative layouts: Sidebar Left and Sidebar Right. These can be selected from the Theme Options section in the Customizer.
Note that the left- or right-aligned widget area only appears on wide screens.