Creating an H5P Repository

If you have obtained your own space on UNF Faculty Domains, you have the ability to host your own H5P content. By hosting we mean that you can make available the unique content that you have created. This post, and the accompanying video, will show you the steps for creating an H5P repository on a WordPress installation.

We will also show you the steps for adding a content type to your repository, and then finally, we will give you the steps for publishing the content on a WordPress post or page.

Installing the H5P Plugin

1. Log in to your WordPress website to view the Dashboard.
2. Hover your mouse over Plugins in the left sidebar and click Add New.
3. In the Search Plugins field type H5P.
4. You should see the plugin labeled Interactive Content – H5P (By Joubel). Click the Install Now button.
5. Next, click on the Activate button. You should now see that the plugin is activated. In the sidebar you should also see H5P Content.

If you hover your mouse over H5P Content you should see the options to see All H5P Content (there isn’t any yet), Add New, Libraries (again, none there yet), My Results (nothing there either).

Add H5P Content to your WordPress Repository

To add a new H5P content type, you’ll need to view an active one somewhere – here’s a True/False content type – https://h5p.org/true-false.

1. While viewing the True/False question, look in the lower left corner and click the Reuse button.
2. You should be given the option to Download as an .h5p file – save it to your hard drive in a place where you’ll find it again.
3. Back in your WordPress dashboard, hover over H5P Content and click Add New.
4. You’ll need to consent to use the H5P Hub (the core software of your repository), which provides the “libraries” of your content and sends anonymous data to h5p.org – click the button labeled I consent, give me the Hub! (you’ll only need to do this once).
5. Now you have the Hub on your site, and you can choose which content types to get. You can click on the Get button for any type, but we instead want you to upload the True/False content we downloaded previously.
6. Near the top of the H5P Hub window, choose the Upload radio button and click the Upload a file button.
7. Navigate to where you saved the True/False content file on your computer, choose it and click Open.
8. The true-false-question file should now be listed in the field and you can click the Use button.
9. After a few seconds you should see that the True/False Question was successfully uploaded. You can now either click the Create button (in the upper-right under Actions), or modify the question and then click the Create button.

Add H5P Content to a Post/Page

Now you can now use the shortcode provided. You’ll see it in a box labeled “Shortcode – What’s next?” in the upper right. It should look something like:

[h5p id="1"]

Note that the “id” of the content is unique to your repository – you can’t copy the shortcode here and expect it to work on another site. To work on another site you would use Embed. See more about the Embed code on the Beginning page.

Highlight and copy the shortcode of the True/False content.

Now create a new post or page (or edit an existing one) that you want the H5P content to be visible on.

Add a block called Shortcode (you can add it three ways) and then paste the shortcode in the field labeled Write shortcode here…

You can add more text or other blocks, but when you’re ready you will need to publish the post/page. View your page once you’ve published it and you should see your H5P content (in our case the True/False question) ready to use. You can also use the Embed code on any website that supports what is know as iFrame (very common) such as WordPress sites and Canvas.

Here is what it looks like on this page…

---

Photo by Devon Divine on Unsplash