2020/Pop-ups/IndieWeb Friendly WordPress Themes
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.
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.
- Chris Aldrich organizer / facilitator
- David Shanske organizer / facilitator
- Add yourself here… (see this for more details) (we're always happy to have additional organizers and facilitators to help out)
- Greg Tangey/Ruxton
- Add yourself here… (see this for more details) (we're always happy to have additional help!)
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.
- Bring your own theme or a theme you'd like to make more IndieWeb friendly by adding Microformats v2 support
- Ideas for possible themes can be found at https://indieweb.org/WordPress/Development#Themes
- (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
- David Shanske (co-facilitator), working on Twenty Fourteen theme
- Chris Aldrich (co-facilitator), working on Davis theme
- Tracy Durnell - working on Spacious theme
- Sue Hanen, working on Astra
- Jeremy Cherfas
- ... add names
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.
- Jeremy using:
- https://www.fornacalia.com/2020/flaxseed-currant-ciabatta/ with missing faces
- https://www.eatthispodcast.com/china-chilli/ - long list
- Definition of Microformats
- Microformats.org has a wiki describing the various microformats with definitions and details for each
- 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://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.
- Various common parts
- Parent themes versus child 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)
- 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
- May be added as a widget (using the IndieWeb plugin)
- 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)
- David's 2016 IndieWeb Friendly Theme commits for the 2016 Theme are a great place to see some step-by-step changes to make a theme more IndieWeb friendly:
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
- 2016-06-22 : Converting WordPress Themes for Microformats 2 – Part 1
- 2020-09-26 : Converting Your WordPress Theme for Microformats 2 Part 2
- IndieWeb friendly fork of 2014: https://github.com/dshanske/iw2014
- IndieWeb friendly fork of Davis: https://github.com/chrisaldrich/davis
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
- to WordPress community
- WordPress Meetups
- DoOO community?
- WordPress Themes