H5P Guides

The basics

H5P allows you to easily and quickly create rich interactive content on a web page.

This document will guide you on how to:

  • Install an existing H5P
  • Edit an H5P
  • Create a new H5P

To create H5P content on your own site, you must have the H5P plugin installed and enabled on your site. Plugins that support content authoring currently exist for WordPress and Drupal. If you don't have a site set up with H5P, feel free to test drive H5P right here on h5p.org and experiment. You can embed the H5P content on your site.

The screenshots in this guide are taken from a Drupal 7 installation, however, the process is similar on other platforms (CMSs).

Install an existing H5P

You install a content type on your own platform by downloading example content from h5p.org or any other site allowing you to download H5P content. 

The easiest way to get started, is by selecting an H5P content type from the examples and downloads page here on h5p.org. Download the content type that suits your needs best.

Alternatively, you can go all in and install all the H5P content types at once.

On your platform's admin menu, create a new H5P.

  • Drupal: Add content > Interactive content
  • WordPress: H5P content > Add new

Choose upload and select the h5p file you just downloaded. Save.

The H5P content should now appear. The example below is the Summary content type.

Edit an H5P

After uploading an existing H5P, you may edit it using the built-in editor. 

  • Drupal: Press the Edit button on your H5P node.
  • WordPress: Press the Edit button on your H5P instance.

After pressing Edit, you should see an editor like this:

Here you may edit all fields in the H5P. Saving will update the H5P as well. 

The standard editor lists all fields sequentially. For advanced content, this will quickly become difficult to maintain. Extending the editor is supported through editor libraries, that may extend standard functionality (i.e. provide tabbed views of lists, etc.) or give a complete Wysiwyg editing experience. Below are quick examples of the Presentation editor and the Interactive video editors. 

Create a new H5P

You can easily create a new H5P from scratch if you already have existing content types installed on a site. 

Want to learn more about creating H5P content? Take a look at the tutorials in the Content author guide.