H5P Group just released version 1.17.4 of their WordPress plugin. That update brings theming capabilities to the core of H5P and to the latest versions of quite a number of content types. The remaining content types are supposed to get theming support in the near future.
So, what does that mean on WordPress? If you know how custom CSS properties work, if you know what properties there are for H5P now, and if you know how you can add your own CSS declarations to H5P contents, then yes. But that’s the “if”s. And it sounds daunting.
Hmm, but H5P.com has this shiny theme picker. Isn’t that available for the WordPress plugin, too? Nope. It is baked into H5P.com. I don’t think that such a feature which requires a low effort to be built is suitable for a paid premium of open source software though. It is very likely that someone in the community will copy the idea quickly and make it available in order to fill the gap. And that just happened.
H5P Theme Picker
I already knew how theming works in H5P in general, but the theme picker on H5P.com allows to create custom themes and computes the 34 color variables in total from only 4 values that you set. Well, there’s documentation on these colors. Unfortunately, that documentation is incomplete and partially wrong, so I invested some time to reverse-engineer how the colors are computed. I shared my findingts with H5P Group, so they will hopefully update their documentation soon.
With that fresh knowledge, I built a so called “web component” from scratch. It’s essentially a custom HTML tag that you create and others can use easily to add my theme picker to an HTML page – or any other H5P integration ranging from Moodle’s own integration, Lumi, the plugin for ILIAS, … To fellow developers: I did not make use of the shadow dom functionality even though it would make a lot of sense, because it breaks CSS anchor positioning. When I find some time to create a workaround …
If you want to reuse the H5P theme picker in your own project: Find it on npmjs.org.
If you prefer to build something like it from scratch and need some inspiration, then feel free to use the source code.
H5P Themer
Now, that theme picker alone does not give it to you in WordPress. That’s what I wrote a tiny plugin for that mimicks what you can do on H5P.com: Pick a “theme” and set the “density” to be applied to all contents on your site.
You can find the H5P Themer plugin in the WordPress plugin repository. Just install and activate it like any other WordPress plugin.
If you want to build a clone of that plugin for another H5P enabled platform, e. g. Moodle or Drupal, then please check out the source code.
Ultimately, I hope that this plugin won’t be necessary to have at all. Ideally, H5P Group would just follow the same approach and add a theme picker to all their H5P integrations.
Thanks to Gio Fonseca for beta-testing!
That’s not everything 🙂
Mimicking what H5P.com does was the straightforward approach. You may wish for other things, however. For instance, maybe these are your user stories:
- As an admin, I want to be able to define a set of theme presets that content creators can choose from.
- As a content creator, I want to be able to pick a theme for my H5P content from a list of “allowed” themes that an admin prepared for me.
- …
I kept those in mind when building the theme picker component. It comes with the same set of predefined themes that H5P.com offers, but it’s already prepared to show your own set of themes instead, to not offer to create a custom theme, to not offer the density setting, etc. It’s really just a picker that gives you the computed values. What you do with these, is up to you and your integration.
So, if you want to create an “H5P Themer” for Moodle, ILIAS, Edlib, Stud.IP, Lumi, … that can even do more: Just peek at the code of the H5P Themer for WordPress and see how simple it is to do when you use the theme picker web component that does the heavy lifting.
Future plans?
Not really. Maybe I’ll add a text field that accepts custom CSS, so you can style H5P contents beyond the theming options easily. But if you need more: You know, I earn my living with IT freelancing as SNORDIAN …