2020/Pop-ups/IndieWeb Friendly WordPress Themes

From IndieWeb
Jump to: navigation, search

IndieWeb Friendly WordPress Themes was a session at IndieWebCamp Pop-ups 2020.

IndieWebCamp Pop-ups 2020
Session: IndieWeb Friendly WordPress Themes
When: 2020-09-26 9:30 - 11:30 AM (Pacific) / 12:30 - 2:30 PM (Eastern)
Event page: https://events.indieweb.org/2020/09/making-indieweb-friendly-wordpress-themes-8fs9gAVX3OkV
hashtag: for social media and used to create an Etherpad for the session: #WPandMicroformats
Etherpad: https://etherpad.indieweb.org/WPandMicroformats for note taking during the session
Streaming video/audio platform: Zoom
Hack day! (This is meant to be a hack session with help for those who may get stuck).
Demos: Yes - when we're done, show off how well your new hacked theme works on your site.
Video: ▶️3:06:00s



The IndieWeb WordPress community could use some more theme options. Let's get together as a community and host a Theme raising (a play on the idea of the old Barn raising). We can all work/hack together to make some of the popular WordPress themes more IndieWeb friendly. We'll discuss methods for adding the necessary Microformats and best ways to indieweb-ify a WordPress theme. Either bring your own favorite theme or work from one on a list. All levels are welcome! (We'll try to help newcomers learn to begin tinkering with some WordPress theme code. If you don't have a GitHub account yet, you might create one beforehand and we'll show you how to use it for development, but even without it you can still do a lot with just a text editor.)

This will be a workshop/hack session where we'll discuss the problems and issues related to WordPress and Microformats. Beginners and those without coding experience are welcome/encouraged to attend.




Newcomers can post a comment on https://boffosocko.com/2020/08/31/making-indieweb-friendly-wordpress-themes-an-indiewebcamp-popup-session/ or reply yes via Twitter to https://twitter.com/ChrisAldrich/status/1300562134699393024. Or you can feel free to just show up on the morning of the event.

If you feel able, add yourself to the wiki below, RSVP at Meetable, or post an indie RSVP on your own website.


  • (Optional) Create a GitHub account which you can use/learn during the process
    • Those who don't want a GitHub account can simply use their text editor of choice to modify the relevant theme files



Sometimes the Etherpad may cause visual contrast problems involving the various colors it assigns to the edits of different authors. To fix this, click on the gear icon in the upper right, and uncheck the box for "Authorship colours" to see a more readable black and white version of the page.

IndieWebCamp 2020/Pop-ups 2020 Session: 2020/Pop-ups/IndieWeb_Friendly_WordPress_Themes



  • Definition of Microformats
    • Microformats.org has a wiki describing the various microformats with definitions and details for each
  • Examples
  • Difference between prefixes
    • "h-*" for top level or root class names, e.g. "h-card", "h-event", "h-entry"
    • "p-*" for plain (text) properties, e.g. "p-name", "p-summary"
    • "u-*" for URL properties, e.g. "u-url", "u-photo", "u-logo"
      • <a class="u-in-reply-to" href="https://example.com" >example.com</a>
    • "dt-*" for datetime properties, e.g. "dt-published", dt-start", "dt-end", "dt-bday"
    • "e-*" for element tree properties where the entire contained element hierarchy is the value, e.g. "e-content". The 'e-' prefix can also be mnemonically remembered as "element tree", "embedded markup", or "encapsulated markup".


The following are some parsers and tools that will show what a particular URL will look like when parsed:

  • https://microformats.io
  • https://monocle.p3k.io/preview - will parse an article and show how an article will look when displayed in the Monocle reader
  • Post Kinds Plugin - Many of the post kinds will provide reply contexts, so entering a URL into the meta box will display titles, summaries, authors, avatars, and other meta data based on how pages are parsed
  • https://indiewebify.me/ - has a good visual interface for testing various IndieWeb building blocks including microformats for h-card and h-entry. If portions are missing or are broken, the tool will also provide examples of code and mark up that one can add to improve them.

WordPress Themes

We'll be looking most closely today at David Shanske's post: Converting WordPress Themes for Microformats 2 – Part 1, which has some details for beginning.

David working on converting https://github.com/dshanske/iw2014 - A fork of the 2014 theme. Pushed the original, with all twentyfourteen strings changed to iw2014, and will start modding.


Outline for converting a theme to be microformats v2 compatible

  • Rename any hentry, hfeed, h-entry, h-feed classes within the style.css file (remember, it's a bad practice to style using microformats)
  • Add the code blocks from David Shanske's post to the functions.php file
    • You can add the entire chunk if there isn't body_class or post_class predefined. If there are those classes predefined, then one can add a smaller subset of those code blocks into those portions of the functions.php file (this prevents the duplication of the function which may throw an error)
  • h-card
    • May be added as a widget (using the IndieWeb plugin)
      • Some may accidentally add both the h-card widget and the rel-me widget which can duplicate data depending on use.
    • may be better added into the theme
    • can use code from David Shanske article, or be handwritten into the meta portion of a theme
      • difference of adding this code into the main post (example: TwentyFifteen theme) versus being added into a separate block from the post (example: TwentySixteen theme)
    • u-photo for an avatar needs to be nested within the h-card otherwise parsers will think that the post is specifically about that particular photo and highlight it more specifically. This problem is sometimes seen when syndicating to Twitter using Brid.gy publish which will send a large version
  • u-featured for featured photos
    • Is there a plugin that does this? This code snippet could be added simply to a functions.php file.
  • u-category to mark up both tags and categories (IndieWeb doesn't differentiate between the two)

Declaring Support for IndieWeb

  • code snippet for declaring microformats v2 compatibility
    • David Shanske will add this shortly
    • There were some instances with regard to Micropub which used this declaration, but not sure if anything does now
  • Simple Location
    • There are code snippets for declaring support for some IndieWeb friendly plugins like this
    • One can remove the default display of some data (often in the_body, which may cause unwanted display of that data when syndicating)
    • One can then add special code to display that data almost anywhere within a particular theme.


Discussion of problems concerning Jetpack

  • data can be added in the_body to cause things like "Like: like loading" to appear on syndicated copies with tools like Brid.gy publish
    • David Shanske has a work around for this that allows excluding this problem


  • ...



To Do List

  • create events.indieweb.org event
  • instructions for rsvp: events, this page, or directly on the etherpad
  • outline of curriculum
  • list of resources/links for attendees
  • promotion, promotion, promotion
  • outreach
    • to WordPress community
    • WordPress Meetups
    • DoOO community?
    • ...

Topics Getting Started on WordPressAdvanced WordPress Set UpPluginsThemesExamplesWordPress with BridgyDevelopmentDataSecurity
Primary Plugins Indieweb PluginWebmentionSemantic LinkbacksMicropubIndieAuthPost KindsSyndication LinksWebSub plugins
POSSE Plugins Syndication LinksSocial Network Auto PosterJetPack PublicizeWP CrosspostTumblr CrosspostrDiasposterMastodon AutopostBridgy Publish plugin (deprecated) • Medium (deprecated)
PESOS Plugins Keyring Social ImportersDsgnWrks Twitter ImporterDsgnWrks Instagram Importer
Other Plugins ActivityPub PluginAperture Refback pluginIndieWeb Press ThisWordPress MF2 Feeds PluginWordPress uf2OpenIDSimple LocationParse ThisIndieweb ActionsPressForwardYarns Indie ReaderWhisperFollowblogroll2emailWebmention for (Threaded) Comments (deprecated)
Themes SemPress • (SemPress Child Themes: SemPress Lite, SenPress, and Index) • AutonomieIndependent PublisherIndieWeb Publishermf2_sTwenty Sixteen IndieWeb-friendly forkIndieWeb Twenty Fifteen ThemeDoublescores
Assistance Join the #indieweb chatIRC and other chat optionsWordPress FAQWordPress Outreach ClubTroubleshooting TipsWordPress toolsWordPress channel
See also WordPress related wiki pagesCategory:WordPress pluginsCategory:WordPress themesCategory:WordPress sessionsWordPress.comWordPress using IndieMarkAWS Tutorial

See Also