Showcasing Your H5Ps With Wordpress #

Sometimes we want to demo new content types. otacke suggested that Wordpress is a good way to do it and it’s working so far.

Set up your Wordpress Site #

I set up a Digital Ocean Droplet using the Wordpress Droplet, I’m using the Portfolio Theme by Theme Horse.

1. Install H5P as a plugin
2. Adjust the wp.config:

/* wp-config.php, the very bottom

/* Add any custom values between this line and the "stop editing" line. */
define('H5P_DEV', true);

This will ensure that the H5P plugin will use this as the latest version without you having to increment the patch number.

3. Restart Wordpress:

sudo systemctl restart apache2

Read more at the official docs.

Export Your Content #

Let’s say you’re developing h5p-true-false, to show off your latest changes.

1. Create content using the h5p-cli that can showcase your work, call it Test-true-false

2. Use the h5p export function to export a content type. Here’s what it does:

   • h5p export <library> <folder> will export the <library> content type from the content/<folder>

   So, let’s say we’ve adjusted h5p-true-false, let’s try to export it:

   ~repos/h5p $ h5p export h5p-true-false Test-true-false

   This means h5p export tries to find some content called Test-true-false that is using the library h5p-true-false and then zips it up and gives it a .h5p extension

   This is where the H5P will be saved: temp/Test-true-false.h5p

Upload Your Content #

1. Move your content to an easier location:

mv ~/repos/h5p/temp/Test-true-false.h5p ~/Desktop

2. Go to <yourwordpresssite>.com/wp-admin and press “Add New” in the left side bar under “H5P Content”, then “Upload”.
3. Select your Test-true-false.h5p file from your Desktop
4. Press “Create” on the right hand side
5. Copy the short code, in my case it’s [h5p id="4"]
6. Past the shortcode into a Wordpress post and check it that it works!