WordPress/Themes

From IndieWeb

This article is a stub. You can help the IndieWeb wiki by expanding it.

WordPress Themes are a simple way to quickly change the look and feel of a WordPress website.

There are two different types of themes.

  • A classic theme primarily uses PHP and CSS. Classic themes take advantage of WordPress PHP functions, hooks and filters.
  • A block theme is a new theme that was introduced im WordPress version 5.9. It is built mainly using HTML and a theme configuration file. The block theme is composed entirely of blocks.

IndieWeb Friendly Themes

Classic Themes

For those looking to get up and running quickly, below is a list of IndieWeb friendly classic 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 WordPress repo and might need to be downloaded from GitHub or other sources.

Block Themes

At this time, there are no Indieweb specific block themes.

Why

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.

Theme Sources

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.

Security

Main article: WordPress/Security

A 2011 study found that almost every other source in the top 10 Google results contained malicious code (a 2014 update says the situation has improved but still recommends caution).

Child themes (see below) allow for better future security updates without overriding additional modifications.

Installing Themes

There are many ways to install themes from using the WordPress administrative user interface to uploading themes to your server by FTP.

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.

Child 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:

IndieWeb Examples

Microformats

Introduction

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 h-card, p-street-address, or 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 (p-country-name).

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:joebloggs@example.com">joebloggs@example.com</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.

Adding Microformats

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

Further reading: Converting WordPress Themes for Microformats 2 by David Shanske

Themes Supporting Microformats

  • 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 classic theme. The authors admit 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.

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


Troubleshooting

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.

Theme Detectors

Tools for determining themes that other sites may be running:

Sessions

IndieWebCamp sessions specific to WordPress Themes:

WordPress
Topics Getting Started on WordPress • Advanced WordPress Set Up • Plugins • Themes • Examples • WordPress with Bridgy • Development • Data • Security
Primary Plugins Indieweb Plugin • Webmention • Semantic Linkbacks • Micropub • IndieAuth • Post Kinds • Syndication Links • WebSub plugins
POSSE Plugins Syndication Links • Social Network Auto Poster • JetPack Publicize • WP Crosspost • Tumblr Crosspostr • Diasposter • Mastodon Autopost • Bridgy Publish plugin (deprecated) • Medium (deprecated)
PESOS Plugins Keyring Social Importers • DsgnWrks Twitter Importer • DsgnWrks Instagram Importer
Other Plugins IndieBlocks • Shortnotes • ActivityPub Plugin • Aperture • Refback plugin • IndieWeb Press This • WordPress MF2 Feeds Plugin • WordPress uf2 • OpenID • Simple Location • Parse This • Indieweb Actions • PressForward • Yarns Indie Reader • WhisperFollow • blogroll2email
Themes SemPress • (SemPress Child Themes: SemPress Lite, SenPress, and Index) • Autonomie • Independent Publisher • IndieWeb Publisher • mf2_s • Twenty Sixteen IndieWeb-friendly fork • IndieWeb Twenty Fifteen Theme • Doublescores
Assistance Join the #indieweb chat • IRC and other chat options • WordPress FAQ • WordPress Outreach Club • Troubleshooting Tips • WordPress tools • WordPress channel
See also WordPress related wiki pages • Category:WordPress plugins • Category:WordPress themes • Category:WordPress sessions • WordPress.com • WordPress using IndieMark • AWS Tutorial


See Also

Retrieved from "https://indieweb.org/wiki/index.php?title=WordPress/Themes&oldid=85561"