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.

Video:

Description
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. '''

Organizers

 * organizer / facilitator
 * organizer / facilitator
 * (we're always happy to have additional organizers and facilitators to help out)

Volunteers

 * (we're always happy to have additional help!)
 * (we're always happy to have additional help!)

RSVP
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.



Prerequisites

 * 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

Participants

 * (co-facilitator), working on Twenty Fourteen theme
 * (co-facilitator), working on Davis theme
 * Tracy Durnell - working on Spacious theme
 * Sue Hanen, working on Astra
 * ... add names
 * ... add names
 * ... add names

Microformats

 * Definition of Microformats
 * Microformats.org has a wiki describing the various microformats with definitions and details for each
 * Examples
 * h-card
 * h-entry
 * h-feed


 * 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"
 * example.com
 * "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".

Tools
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

 * Definition
 * Various common parts
 * style.css
 * functions.php
 * index.php
 * https://developer.wordpress.org/themes/basics/template-hierarchy/
 * Parent themes versus child themes

We'll be looking most closely today at '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.

Procedure
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 '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 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)


 * 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:
 * https://github.com/dshanske/iw26/commits/trunk

Declaring Support for IndieWeb

 * code snippet for declaring microformats v2 compatibility
 * 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.

Jetpack
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
 * has a work around for this that allows excluding this problem

Projects

 * 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
 * outreach
 * to WordPress community
 * WordPress Meetups
 * DoOO community?