IndieWeb Friendly Themes
For those looking to get up and running quickly, below is a list of IndieWeb friendly WordPress themes. As with all themes, each has their own look and feel and will help you and your site do slightly different things. Some may not be available directly from the WordPres repo and might need to be downloaded from GitHub or other sources.
- 1 IndieWeb Friendly Themes
- 2 Why
- 3 Theme Sources
- 4 Child Themes
- 5 Microformats
- 6 Other Interesting Themes
- 7 Troubleshooting
- 8 Sessions
- 9 See Also
- Independent Publisher
- IndieWeb Publisher - a fork of Independent Publisher with better Microformats support
- Twenty Sixteen IndieWeb-friendly fork
- IndieWeb Twenty Fifteen Theme
Why use a particular WordPress theme?
WordPress Themes are meant to abstract away the look and feel of a website from the text, photos, and other content that they present. This will allow your website to change themes the way a person might change their clothes—the person (or website) stays fundamentally the same, but their appearance to the outside world changes.
WordPress themes primarily change the look and feel of a site through the use of CSS and often the underlying HTML that displays your content, which is stored separately in a database.
Different themes may do this in different ways, with differing levels of markup quality.
Selecting a theme that provides higher markup quality (valid, semantic, proper use of microformats—see below) improves the computer-readability of your pages, for peer-to-peer interactions, clients, and search engines. In particular high quality support of microformats will improve the way your content appears on your own site and when linked via webmentions at sites you reply, respond, react, or even just link to.
For the best indieweb support, use one of the WordPress themes that supports microformats2, as that will make it easier for plugins, clients, etc. to interact with your site:
Another option is to use or add a microformats-compatible child theme to an existing theme.
In general, the best and safest place to download free themes is directly from the official Wordpress Theme Directory. Themes here are regularly and rigorously reviewed for levels of quality and security.
WordPress maintains two different theme repositories: one on their .com domain which is meant for their own hosted service and a second one on their .org domain. Often popular themes from the .org platform will often be forked and offered on the .com domain, but then aren't always maintained in parallel. Thus there are examples (like Independent Publisher - see below) which have Indieweb related updates which are usable on self-hosted locations, but aren't available to .com customers.
Themes can also be found on Github and other (usually commercial) repositories, but one should take appropriate care to check that they don't include malicious code.
Child themes (see below) allow for better future security updates without overriding additional modifications.
There are many ways to install themes from using the WordPress administrative user interface to uploading themes to your server by FTP.
- Basic instructions on installing a theme on Getting Started on WordPress.
- Uploading & Setting Up Custom Themes on WordPress.com
- Most hosts will also have instructions for installing themes on their sites.
Installing Themes from a downloaded source
- Download a .zip file of the theme you want from either the repository or another trusted source
- Login to your site
- From the administrative user interface go to the menu options
Appearance >> Themes
- Click the "Add New" button
- Click on the "Upload Theme" button.
- On the next page, click "Choose File" and select the .zip file for your theme and select it within your operating system.
- Click on the "Install Now" button in WordPress.
- Finally, to make the theme active, click the "Activate" link on the resultant page.
- Your site should now have the new theme active and ready to go.
Using Github Updater to Download and Update Themes from Github
- Download the latest archive.
- Go to the Plugins -> Add New screen and click the Upload tab.
- Upload the zipped archive directly.
- Go to the Plugins screen and click Activate.
Once you have the plugin installed, you can install compatible themes.
When working with WordPress themes, it is common practice (for security and update reasons) to create a child theme of the original. This allows the user to make any necessary modifications to the functions.php and CSS Style files in the child theme. Doing this will allow the main theme to be updated in the future with bug patches and security updates without overriding the usually minor changes made in the child theme.
If you do the additional work to make sure that another specific theme properly supports microformats, either with a child theme or by modifying the parent theme, submit your changes/patches upstream to the theme so others benefit as well. This can be a great way to improve that specific theme and indieweb support in the broader community.
For details on how to create a child theme, see some of the following resources:
- Child Themes | WordPress Codex
- Child Theme Tutorial | Elegant Themes
- How to Create and Customize a WordPress Child Theme | Smashing Magazine
- How to Create a WordPress Child Theme (Video) | WPBeginner
- Chris Aldrich has a child theme somewhat customized for the WordPress Twenty Sixteen theme available on GitHub as an example of files and code a child theme should/could contain.
Some of the most basic inter-website functionalities within the IndieWeb are enabled by simple web standards. These standards make it easier for individual sites to communicate with each other. Among these fundamental standards is the use of microformats which are semantic classes added to HTML tags. Some examples of microformats include
u-photo. Many of these microformats are relatively straightforward and indicate exactly what they mean, so
p-street-address on a bit of HTML naturally indicates that the item it's wrapped around is a street address.
Microformats are embedded in web pages and aren't necessarily seen by people, but instead are used by other computers, servers, and programs to help them understand the content on the page and how it is structured. In our example above,
h-card, is tells other computers that the content that will be found inside it is the online equivalent of a business card which generally includes other microformats like
u-photo which specifies a photo of the person about whom the business card is for along with their name (
p-name), address, and country (
Here's a relatively simple example of an h-card in which all the classes are microformats:
<p class="h-card"> <img class="u-photo" src="http://example.org/photo.png" alt="" /> <a class="p-name u-url" href="http://example.org">Joe Bloggs</a> <a class="u-email" href="mailto:email@example.com">firstname.lastname@example.org</a>, <span class="p-street-address">41 Automattic Lane</span> <span class="p-locality">Reykjavík</span> <span class="p-country-name">Iceland</span> </p>
These microformats become more important when you are writing a reply on your own website to a post on another site. To show your reply, the receiving website has a parser that will look at your web page with the reply and be able to quickly and easily identify things like which part of your page contains your name, your photo, and the exact portion of your webpage that is the actual reply (as opposed to the header, footer, or sidebar content that perhaps isn't as directly relevant).
While one doesn't need to know much, if anything, about microformats, suffice it to say that they're relatively important for site-to-site intercommunication. Fortunately for the average user, one's WordPress theme is responsible for handling and placing the microformats in the proper locations on your behalf—this is why you can promptly forget about them. Because there are currently not many WordPress themes which properly implement the widest variety of microformats, we highly recommend starting out using the themes SemPress, one of its many child themes, or Independent Publisher which do an excellent job of integrating the most modern implementation of microformats version 2.
People often choose WordPress because of its power and flexibility. As part of this flexibility, there are thousands of available themes (and plugins) to choose from. Each theme may behave slightly differently within an IndieWeb context based on how compliant it is with modern web standards. Often you can choose almost any theme from the WordPress repository or other reliable sources and they will work reasonably well because WordPress has portions of the older microformats version 1 built into it. However, because of how some themes implement their microformats (some themes do a poor job), your results may not be quite what you expect (or want). Often these small cosmetic issues will be seen when interacting with other websites and how they will automatically display your responses or replies.
Using the theme of your choice may work, but it may require additional testing, plugins, or custom code to display exactly what you want to inter-operate properly with other websites using these standards. We expect that over time and with growth, more and more themes will better support these simple standards.
Once you have a site running WordPress, you'll want to add microformats version 2 (sometimes referred to as mf2) support to your theme if possible. Some themes support microformats or other semantic markup like schema.org out of the box. Microformats 2 is not (yet) supported by WordPress or the majority of WordPress themes, though we hope this situation will change over time. Many services will also fall back to the original microformats standard, portions of which are supported by core WordPress functionality and which some WordPress themes extend.
There are three ways to add microformats2 support to your WordPress site (listed from the easiest to implement to more difficult):
- Use one of the themes mentioned below that support mf2 out of the box
- Use the uf2 plugin to add support programatically
- Modify your theme by hand to add support directly
Themes Supporting Microformats
- The SemPress theme by Matthias Pfefferle is currently the only theme to support microformats, microformats2 and schema.org. The official version of the theme can be found in the WordPress.org repository. There are also several child themes available on Github listed in the project's instructions as well.
- IW26 from David Shanske is a fork of the Wordpress Twenty Sixteen theme. It's pretty aggressive in terms of taking out support for the core Post Formats in preference to the Post Kinds Plugin, but has solid support for a number of IndieWeb specific plugins. It's highly recommended you use the Post Kinds Plugin in conjunction with this theme.
- For theme developers, in addition to the examples here, it may be beneficial to look at the commit history in this Twenty Sixteen fork to see how some of the pieces were changed from the original and how the proper microformats were added.
- Independent Publisher as of v1.7 now supports microformats2 (though could possibly be further improved?) and additionally does some custom display in comments.php to better differentiate between comments, webmentions, pingbacks, and trackbacks. (Nota bene: the WordPress.com version of this theme is a separate fork and doesn't have the mf2/webmentions support.) The theme is actively being developed on GitHub for additional detail, contributions, and support.
- IndieWeb Publisher is a forked version of Independent Publisher (above) that continues to add additional IndieWeb friendly elements to the original theme.
- Autonomie by Matthias Pfefferle is a clean WordPress theme inspired by Medium.com. It is SEO optimized, accessibility ready and highly semantic. The theme is made with HTML5 (POSH) and flavoured with Microformats(2) and Microdata/Schema.org. It is based on the SemPress theme code.
- MF2_s is a starter theme from David Shanske which supports microformats. It is a fork of the popular Underscores starter theme which is primarily meant for developers to use as a base for building custom themes. It is under active development with the hopes it will form the basis of future themes. Because it is a "starter theme" meant for developers, average users will likely find that it doesn't meet their needs without changing it significantly.
Solutions for Themes not Natively Supporting Microformats
Rather than a theme supporting it natively, uf2 is a plugin that attempts to add microformats2 data to an existing theme. The author admits it is very limited and recommends using a theme that supports microformats natively. In practice it works well enough with most out-of-the box themes as to be very useful for lots of basic functionality. Be aware that some themes unfortunately use microformat classes for CSS styling rather than just semantics, and this can cause issues (typically only with the way the pages display) when using the uf2 plugin.
Examples of themes that don't work well with the uf2 plugin:
- Twenty Fourteen - styles the hentry class and causes display issues when uf2 is activated.
- See also details at WordPress hentry problem
One can also create a new theme from scratch to support microformats.
If you are interested in adapting your existing theme for Microformats 2 support, there are plenty of individuals in the community who are willing to help.
Other Interesting Themes
- P2 is a microblog theme for WordPress that might be adaptable for indiewebsters, but doesn't have mf2 support out of the box. (See also the O2 child theme.)
- Ozh Tweet Archive Theme was originally made as a Twitter knockoff theme to be used with the Ozh Twitter Archiver Plugin, but could certainly be used on its own.
If you're trying out a new, random theme and want to see how IndieWeb friendly it is, you might try using the Indiewebify.me service which will allow you to put in some of your basic URLs to see what the theme either supports or doesn't.
See also: tools for other services that may assist you in testing and modifying your theme.
Tools for determining themes that other sites may be running:
- ScanWP Theme and plugin detector
- WP Theme Detector
- CodeinWP Theme detector for WordPress, Drupal, and Shopify
- WP Theme Detector
- What WordPress Theme is That
- WP Sniffer (Chrome plugin)
- Satori Studio WordPress Theme Detector
- Details for Manually finding a WordPress theme and details via WP Beginner
- Velox IndieWeb friendly with mf2 support via [david]++
- Cypress an IndieWeb friendly theme with microformats h-entry, h-feed with portfolio support and geared toward use with micro.blog by Colin Devroe