2020/Pop-ups/IndieWeb Friendly WordPress Themes

From IndieWeb


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

Details

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

Volunteers


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

  • (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

Notes

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

Curriculum

Microformats

  • 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".


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

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.


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


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
    • David Shanske has a work around for this that allows excluding this problem

Questions

  • ...


Articles


Projects


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?
    • ...


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

IWC Pop-ups 2020 Organizing
2020/Pop-up/Sessions
2020/Pop-ups
2020/Pop-ups/Demos
2020/Pop-ups/Schedule
IWC Pop-ups 2020 Sessions
2020/Pop-ups/Garden-And-Stream
2020/Pop-ups/GettingStartedWithWordPress
2020/Pop-ups/IndieAuth
2020/Pop-ups/IndieWeb Friendly WordPress Themes
2020/Pop-ups/Microformats
2020/Pop-ups/Micropub
Retrieved from "https://indieweb.org/wiki/index.php?title=2020/Pop-ups/IndieWeb_Friendly_WordPress_Themes&oldid=73486"