screenshot of the IndieWeb Twenty Fifteen theme

IndieWeb Twenty Fifteen WordPress Theme

Github repository for this theme.

This is an IndieWeb friendly forked version of the annual WordPress Twenty Fifteen theme that has improved support for microformats version 2. It is a relatively clean, simple, and responsive design which is well suited for use as a personal website.

Child Theme

It is recommended that one use this theme in conjunction with a child theme so you can make your own changes and customizations if necessary.

Features

Microformats 2

Rough outline of the changes from the original:

  • Modified the header.php file to remove the erroneous hfeed microformat that was being put on all pages.
  • Changed the archive.php page to add h-feed and hfeed to create the appropriate feed pages (I need to doublecheck this in an actual reader, but it looks good on the page and seems to parse properly.)
  • In the functions.php file, I’ve wrapped the_content in e-content, wrapped the_excerpt in p-summary
  • In the functions.php file, I’ve added a filter that will add h-entry to the correct place.
  • The meta data section of posts created by inc/template-tags.php has been modified to provide an h-card on posts. While not shown visually on the page, if users have a gravatar associated with their user account, it should be found by parsers and is able to be displayed when leaving responses on others’ sites.

Brid.gy

Thanks to improved microformats support, this theme should be more compatible than most for use with Brid.gy and particular Brid.gy publish functionality. The Syndication Links plugin is a simple way to enable Bridgy publish functionality, if desired.

Webmentions

The function.php file has a snippet for automatically approving Webmentions. This can be commented out for those who may have spam issues in the future.

Footer

The footer includes badges to show support for IndieWeb and Microformats. If one adds the Webmention plugin, a line at the bottom of the footer.php file can be uncommented to reveal the Webmention badge as well.

Customizer

This theme is still compatible with the WordPress customizer and has a few built-in options for changing the theme’s colors as well as adding header and background images to personalize it to one’s taste.

To do list

  • For better Syndication Links plugin compatibility, move the syndication links meta into /inc/template-tags.php
  • For better Simple Location compatibility, move the Simple Location meta output into /inc/template-tags.php
  • If/then statement in footer.php to check for Webmention support to automatically show that badge which is currently commented out.
  • Code for declaring microformats support to other plugins?

13 thoughts on “IndieWeb Twenty Fifteen WordPress Theme”

  1. For Homebrew Website Club Wednesday, even though I didn’t make it to an in-person meetup I did manage to make some reasonable visible progress on my website.
    I hacked together some tweaks to add the following:

    Improved support in my theme for time related microformats including dt-published and dt-updated
    Because I post so frequently, I added a visible timestamp next to the date so it’s easier to follow my timeline of posts.
    I removed the data for my location, weather, and syndication links from the_body of my posts and appended it to my post meta data. This should prevent it from showing up in Webmentions to others’ websites or in syndicated copies, but still be available to parsers to attach that data to my posts in readers and other services.
    I modified my CSS so that the text in the Simple Location and Syndication Links plugins matches that of the rest in its section.
    I added a cute little bullhorn icon in front of my Syndication Links so that it has some parallelism with the rest of the meta data on my site.
    I’d always liked the idea of adding in related posts data on my site, but didn’t like how it had worked in the past. Things were even worse with replying to other people’s posts as my markup (and far too many others I’ve seen in the WordPress world) was hacky and caused the related posts data to show up in their Webmentions sent to other sites. I looked through some of Jetpack’s documentation and figured out how to remove their Related Posts functionality from the_body, where it defaults, and append it instead to the post meta section of my posts. It’s not perfect yet, but it’s much closer to how I’d like it. Best of all, that data shouldn’t show up in my replies to other sites now either! I had disabled the functionality ages ago because it made me feel like a rude-IndieWebber.

    With IndieWebCamp Online 2020 coming up this weekend, I hope to fix a few outstanding issues and roll these changes up into my open sourced IndieWeb Twenty Fifteen WordPress theme as my hackday project. If you’re using it on your own site, do let me know. Not that I can promise to fix it if it’s broken in places, but I’d at least like to know how it’s working out for you or where it could be improved.
    Things left over to fix:

    Simple Location data still needs some CSS help to display the way I want it to.
    I need to target the Simple Location icon so I can have its color match that of the other icons.
    Because so many of my posts don’t have titles, I’ll need to tweak something there so that the Jetpack related posts will pick up better meta data as a pseudo-title instead of displaying the relatively context-less commentary that appears in the_body
    It may take a day or two for the related posts to populate properly, but I should make sure that it’s putting out relevant/interesting results.
    Is it worth adding a default featured photo for the related posts that don’t have one? Could I pull one from other meta fields for some classes of posts?

    Syndicated copies:

  2. Hi Chris, you may be able to shed some light on this when you can. I’ve installed and am playing around with your iwtwentyfifteen theme on my site. It’s excellent, I really really like it, thank you. I’ve noticed though that my Pages (see About page) and all of my posts when clicked on (see example) display quite differently to the way they do on your site.

    There’s a lot of white space visible at the top of Pages and posts and the main menu looks misaligned. I’d also prefer if the content of all of my Pages and single posts appeared identically to the way they do on my homepage – inside a sticky note like box that stands out from the background. The posts look white on a white background at the moment. Is there code I can add/edit in the theme’s source files to make these changes?

    1. Davey, there’s definitely something quirky going on, though I can’t tell immediately what it is. Off hand it looks like there’s an HTML tag that may not be closed somewhere. The plain vanilla version on my server isn’t having some of the same issues I’m seeing on yours, most of which appear to stem from the formatting of the left hand sidebar.

      Are you running a child theme? I know you’ve made some customizations in at least a few places. Perhaps try starting from scratch and then re-adding your modifications one at a time to see which may be causing the conflict?

      Whatever is wrong is not affecting your archive pages (eg: https://daveymoloney.com/2020/02/12/ or https://daveymoloney.com/kind/article/) which appear as expected. This means it’s unlikely an issues with changes you made to your header, footer, sidebar, or archive files. Did you make any direct changes to content, single, or index.php files?

      You might also try removing some of your widgets temporarily to see if there’s a conflict with one of those, though I’d guess that’s less likely unless you have one or more that appear on some pages and not others.

      Whatever is causing the issue should fix almost all of the wonky display issues you’re seeing to give you the “sticky note” effect you’re looking for. If you want to make other simple changes, you can browse through what’s available in the Customizer, some of which is described here: https://wordpress.org/support/article/twenty-fifteen/.

    2. Davey, there’s also a highly reasonable chance that if you’ve installed the theme directly from Github by uploading through the admin interface that is what is messing things up. When you do that, Github prefixes the top level folder structure with -master, which means that the files that live below it won’t always find the right pathways and other files. As result you’ll probably be missing things like the footer images, the screenshot in your Themes admin at /wp-admin/themes.php and likely some additional CSS files which are causing your display issues.

      I haven’t used it myself though I know the developer well and have heard it works around this issue, but you might try out the Github Updater plugin as a means of installing/updating themes and plugins from Github.

      Another solution is either to manually remove the ‘-master’ from the folder name on your server or install the theme manually via FTP to your server. Hopefully this will get your display issues sorted.

  3. Appreciate your help with this Chris. I agree, I see similar things happening on Wolf’s site. I took your advice and installed the Github Updater plugin and then started from scratch removing your theme from my site initially. I then re-installed the master iwtwentyfifteen theme from Github via the plugin interface and also created a … Continue reading

  4. I will fork this into a Drupal theme in the near future. I will probably be able to remove some specific markup or templates re: microformats as the IndieWeb module handles most of it, but I just like the overall style, it looks really great!

  5. Thanks for sharing what theme you’re using. Are you still using the same one? I’m searching for a more Indieweb-friendly theme for my personal site.

    1. I’m still using a child theme of Twenty Fifteen with a few small variations and customizations for my specific needs. I haven’t looked at the state of the art for WordPress IndieWeb themes in a while, but I would suspect there’s some fun stuff on the wiki: https://indieweb.org/WordPress/Themes

Mentions

Leave a Reply

Your email address will not be published. Required fields are marked *

To respond to a post on this site using your own website, create your post making sure to include the (target) URL/permalink for my post in your response. Then enter the URL/permalink of your response in the (source) box and click the 'Ping me' button. Your response will appear (possibly after moderation) on my page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)