Creating and Sharing H5P Activities from WordPress and Pressbooks

If you haven’t tried H5P yet, or don’t know much about it, you can read the article Hidden Gems – H5P for Interactive Content, which describes the tool generally and gives a pretty good overview of why you might use it. For more articles about H5P, check out our entire category of H5P related posts.

Creating an H5P Activity

Note: this post will use screenshots from OpenPress, the USASK Pressbooks platform. The WordPress interface will be exactly the same, except some of the text or background colours may vary.

1. Login to your WordPress or Pressbooks account. On the left hand menu, you should see H5P Content.

2. Clicking H5P Content will show you all of your existing activities, if you already have some created, and allow you to create new ones. Click Add New.

3. The H5P Content Hub will appear – if this is your first time using H5P, you may be asked to connect to the H5P hub – which includes a few key features. Click on the buttons below to explore the H5P hub features.

4. For this example, we will create an Accordion activity. To do this:
   1. Click Get
   2. Click Install
   3. Finally, click Use

5. Once you click Use on any content type you will see the content editor. Each content type varies a little bit, but many have the same key features. Click on the buttons below to explore some of those features.

6. After inputting your content information, you can click Create to save, and view your new H5P activity for the first time.

Display Options: You have control over what visitors to your activity will see.

• Display toolbar below content – this is a master switch to show or hide the grey bar at the bottom of your H5P activity
• Allow users to download the content – this controls the Reuse button. When enabled, others will be able to copy your H5P activity entirely, use, and edit it in their own website.
• Display Embed button – this controls the Embed button. When enabled, others will be able to embed your activity on their own site. You still control what that activity looks like. If you take down your activity, it will disappear from every site it is embedded in.
• Display Copyright button – If you used images from other sources, you can keep track of the copyright and display that to your viewers by enabling this button.

Below, you can see how our demo looked in the editor, compared to the live interactive H5P content.

Publishing Your H5P Activity

After creating your H5P activity, you need a way to share it with your students. The main ways you can do this are outlined below.

On a WordPress/Pressbooks Page

1. From the View page for your H5P activity, you will see a shortcode on the right-hand side of the screen. Copy the shortcode.

2. Navigate to the page in WordPress or Pressbooks that you want the H5P activity to appear on. Make sure you are in the editing view for that page.

3. Paste the shortcode of the H5P activity where you want it to appear on your page.

4. In the editor, your H5P activity will only appear as a shortcode.Click Preview to check your page, or Save to save the changes.

5. When you see the page live, you will see your fully interactive H5P activity on your page.

On a Canvas Page

Canvas, being a separate web platform from WordPress and Pressbooks, does not allow us to use the shortcode to embed H5P on a Canvas page. Instead, we will use an iframe.

1. From the view screen for your H5P activity, click embed.

2. Copy the iframe code from the pop-up screen.

3. Navigate to the course, and page in Canvas that you want your H5P activity to appear on and click the HTML editor button.

4. Paste the iframe code you copied into the HTML editor where you want the H5P activity to appear.

5. Click the HTML editor button again to go back to the Rich Text Editor and you will see your H5P activity. Click Save and you’re done!