H5P Guides

Set up H5P for WordPress

Download and install WordPress

Skip this step if you already have a working WordPress installation.

Download WordPress.
Follow the usual installation instructions

Install the H5P plugin

1. Log on to your WP-admin interface.
2. Under Plugins in the admin menu, press Add new.

Add new plugin

3. Search for H5P in the plugins search field and press Install Now under the H5P plugin

Find and install H5P plugin

4. The H5P plugin will now be installed. Once the installation is completed successfully, click on Activate Plugin.

Activate H5P plugin

5. H5P should now appear in the list of installed plugins.

H5P in the list of installed plugins

6. You should also see a link called H5P Content in the admin menu.

Install content types

Now your plugin is set up and you can start creating H5P Content. After you click on "Add new" The H5P Hub will load - offering you a variety of content types to pick from.
Below you can see how to get new content types from the H5P Hub.

Here you can find Tutorials how to create content using different content types.
Once you have created a content, you can add it to a page or post.

Add H5P content to a page or post

Login to your admin interface
Under Post in the admin menu, press Add new
Give your post a title
Press the Add H5P button above the post body text field to add H5P content

Add H5P to a blog post
Select the H5P you want to add to the post from the list that appears. A tag (e.g. [h5p id="1"]) will be included in the text field representing the H5P content.
Add text and other content to the post as you please
Publish the post and view it to see the H5P content

Installing Manually

1. Visit H5P in the WordPress plugin directory. Download and extract the H5P package.

Download H5P plugin from wordpress.org

2. Place a copy of the h5p folder on your server within the folder /wp-content/plugins/

H5P plugin manual install

3. Navigate to your WordPress installation in your web browser and Login to the admin interface and activate the plugin. You can now start creating your own interactive content.

Activate H5P Plugin - Wordpress

Special WordPress settings

An overview of special WordPress settings may be found on the WordPress Customization page.

For more information about the H5P plugin for WordPress, check out the H5P page in the WordPress plugin directory.

Comments

karant17

Fri, 02/14/2020 - 08:32

Tried but cant find anything

Hi,

Thank you for the prompt response.

I tried checking the console there were no warnings nor any errors.

But I tried adding a script in my admin header and was able to view the errors stating "Field 'slug' does not have a default value".

Is it specific to WordPress or PHP version on server or anything to do with hosting service?

icc

Mon, 02/17/2020 - 09:27

It looks like the plugin has

It looks like the plugin has a bug when you are running MySQL in STRICT SQL mode. This is probably what you are experiencing.
The solution would either be to turn off STRICT SQL mode, wait until the issue is fixed or manually fix the bug yourself.

SamNM

Wed, 02/19/2020 - 14:27

H5P.org plugin vs H5P.com plugin

Good day,

We have installed the plugin from H5P.org (which is free), we now want to pay a subscription but since it's already installed as a plugin, once we have our paying account, will Wordpress automatically update the information?

BV52

Wed, 02/19/2020 - 17:14

Hi SamNM,There is no H5P.com

Hi SamNM,

There is no H5P.com plugin. You can check some of the features of H5P.com on this page. If you sign up for H5P.com you don't need to manage your contents. You will also get 24/5 support.

-BV

ljnovascotia

Wed, 02/19/2020 - 20:47

WordPress - change H5P id based on screen size

Not sure if this is the correct spot to ask, but is there a way for example do a media query, @media and change the h5p content delivered? For example, I created two drag and drops (identify parts on a piece of equipment), and I would like to used different ones based drag and drops based on screen size. Small screens use <code>[h5p id="4"]</code> but larger screens <code>[h5p id="5"]</code>Thank you in advance.

Thu, 02/20/2020 - 14:22

WordPress - change H5P id based on screen size - solved

Borrowed CSS from Bootstrap, media query - hide/display property. Basically, add the CSS hide/display properties in customize field, additional CSS. On page or post, use HTML, assign the appropriate class, and then put in your H5P content.

<div class="d-block d-sm-none"><code>[h5p id="4"]</code> </div>

<div class="d-none d-sm-block"><code>[h5p id="5"]</code></div>

It will show h5p 5 element on large screen and hide h5p 4 element. The opposite for small screen, hide h5p 5 element, and show h5p 4 element.

Thu, 02/20/2020 - 17:18

Hi ljnovascotia,I'm glad you

Hi ljnovascotia,

I'm glad you found what you are looking for and thank you for sharing it with the community.

irawan

Mon, 02/24/2020 - 12:57

No 'Install new content type' section

I installed the plugin and when I'm at 'Add new' I'm expecting to see the 'h5p hub' but can't see it

What did I miss?

Mon, 02/24/2020 - 18:34

Hi Irawan,Make sure that the

Hi Irawan,

Make sure that the H5P HUB is enabled. Go to Settings->H5P and look for 'use H5P HUB'.

susiearaujo

Fri, 07/29/2022 - 02:59

same problem with Hub enabling

Hi! I'm having the same problem. I can't have access to the Hub. Already did what you're saying to enable the Hub in the Settings but when I do that, the monitor turns black and nothing happens until I refresh the page. I don't know what to do as I know nothing about programming...:( Help, please.

Fri, 07/29/2022 - 18:43

Hi susiearaujo,I've seen

Hi susiearaujo,

I've seen something similar to this, have you tried using a different browser?

petzi

Sun, 03/01/2020 - 13:15

Localization issue

I have a German WordPress installation and I am using a German OS on Mac. Therefore the H5P-plugin is in German, but with H5P I want to work always in English. I know that I can change the Language setting for each H5P content type under the “Text overrides and translations” setting parameter.

But this change does not change all the task descriptions and translated items. It changes only those strings that are foreseen as localization strings. Besides that all the description is still in German there are some default string/messages special for the working of the content type that does not appear in the “Text overrides and translations” setting. For instance, in "Summary" the task description is in German: "Wähle die korrekte Aussage." = "Choose the correct statement.") Sure, I can change all these messages manually but as I am writing all H5P interactions for English websites, I would like to have the opportunity to change the localization completely.

Even if I change the language of my WordPress website all messages of the plugin still in German.

How can I change everything on my German MacOS, so that all my work with the H5P plugin is in English?

Mon, 03/02/2020 - 10:10

Unfortunately, there is no

Unfortunately, there is no setting for this, but if you change this function to always return 'en', i.e. just remove the 10 other lines in the function you should always get English. I believe a good solution for this would be if we added a config option for doing this, that way the language of the plugin could always be overridden from the wp-config.php.

Mon, 03/02/2020 - 10:21

Thank you! This helps!

But you are right: there should be a config option to change the language.

Mon, 03/02/2020 - 16:16

Add bulk edits

I really love to design educational interactions with H5P using this plugin. I started as a Newby of H5P just three weeks ago and have already designed 41 interactions.

I noticed that with many created interactions the management of these different IDs (pieces of content) needs a better administration interface. First and foremost I miss the possibility to edit bulks of IDs. Particularly I want to add, change and delete tags from different IDs together. Adding a hierarchy of folders where one can copy and paste different IDs from one position to another could be also very helpful for a better organization.

xgarot

Thu, 04/02/2020 - 11:53

Manually install content Wordpress

Hi, is there a way to manually install a content in Wordpress using FTP please ?

Thank you.

Xavier

limeflamingocol...

Thu, 04/16/2020 - 03:48

Wordpress Plugin: Why am I not getting any results?

I am currently testing H5p on my wordpress site-.

I have created a test documentation tool and a course presentation- however I cant seem to log any results when I test them? https://limeflamingocollective.com/class-3-activities/

Also this tutorial looks out of date as I have an entirley different interace on wordpress??

Please help

Warm regards

Jodie

[email protected]

Thu, 04/16/2020 - 18:59

Hi Jodie,You are correct the

Hi Jodie,

You are correct the tutorial is out of date. I'll inform the core team regarding this,

In regards to the results H5P emits data in the form of xAPI statements and you will need a plugin or custom code to listen to these statements and a data store such as a learning record store to save them in.

I highly recommend looking through these documentation:

https://h5p.org/documentation/x-api

https://h5p.org/documentation/for-authors/analyzing-results-and-answers

Swetha DSouza

Mon, 06/22/2020 - 16:11

allow user to create HP5 content

We have implemented the HP5 plugin for wordpress. Now we want the users to create HP5 content through Wordpress page.

Is this possible? How to get it done?

Tue, 06/23/2020 - 10:36

Explanation is on this page

Look at number 5 and the following of the section "Install the H5P plugin" above this page. There is a detailed explication. If you still have trouble, please give more details (e.g., screenshot) where you are stuck.

OMSLLC

Fri, 08/07/2020 - 03:20

How can I not display "Reuse" label and bar in the presentation

Is it possible not show the "Reuse" label in the presentation mode to the student as shown in this screenshot ?

https://www.screencast.com/t/ISFZ02i7

Thanks

Fri, 08/07/2020 - 18:21

Hi Suresh,Please check my

Hi Suresh,

Please check my answer here.

paultony

Sun, 09/13/2020 - 18:26

Wordpress says: "Untested with your version of WordPress"

Hi, I am currently running the latest version of WordPress, which is 5.5.1, and when I searched for the H5P plugin, it says that it was updated 3 months ago and is untested with my current version.

Any idea when we can expect a new update? I am a little concerend about possible security risks with out of date plugins.

Thanks in advance.

Wed, 09/16/2020 - 19:25

Hi again, is there anyone

Hi again, is there anyone that is able to answer my question?

Thanks.

Thu, 09/17/2020 - 10:43

I am also using WordPress 5.5

I am also using WordPress 5.5.1 and have just reinstalled H5P. I am using H5P already the last year and noticed no problem, so it seems you are safe to install it.

Concerning your question, when there will be a new update: I have no idea, I am just a user, like you. But please wait one/two days more. Normally @BV52 will answer these kinds of questions. He is part of the H5P core team.

Peter

Thu, 09/17/2020 - 18:51

Hi All,I'm kinda in the

Hi All,

I'm kinda in the middle I work with the core team but not really part of it ;-). Anyway to answer the question, minor updates are usually released every 2-4 weeks, major updates around every 3 months. There is a major update coming in a few days/weeks which includes the OER HUB. Testing the plugins usually coincides with a major release since the core components are usually affected by the updates.

Also I apologize for the late response posts that are not in the forums are hard to keep track. Tip it is best to post questions in the forums since it has more traffic than the documentation pages.

Sun, 09/20/2020 - 11:42

Thanks for the replies

Got it, thanks both for your replies. This gives me more confidence to use the plugin, knowing that it will be around for the long-term.

rroldan

Sat, 02/06/2021 - 15:59

No "Add H5P" button in Wordpress 5.6.1

Dear BV52 and others,

I could not find the "Add H5P" in the default WP editor when editing posts or pages...

Please, is that something I'm not setting right or is it because this WP version does not accomodate H5P?

Thank you!

All the best to you!!

Sat, 02/06/2021 - 16:15

Actually, I've detected it is really the problem with the WP new version and then I've installed a plugin called "Classic Editor" that solves the problem, allowing for Classic Editor instead of Block Editor, which then shows the "Add H5P" button.

Thank you, anyways!

Mon, 02/08/2021 - 17:29

Hi rroldan,Good to know that

Hi rroldan,

Good to know that you found the solution and thank you for sharing it with us.

geneklein

Mon, 02/08/2021 - 18:44

Same problem after updating

I'm running into the same problem as the people above. In particular: all content that was embedded doesn't show up (Except for one Memory Game content)

I was thinking that this part in the code was the culprit:

While I did get an Add H5P button in Classic Editor, the content that I add with this button still won't show on my frontend.

I also switched my blog to troubleshooting mode and the first plugin I tried to activate was H5P.

This is what I got: When enabling the plugin, h5p, a site failure occurred. Because of this the change was automatically reverted.

rcabreratic

Sun, 04/25/2021 - 11:55

HML view in post o pages

Good Morning.

I have verified that after activating the H5P plugin the HTML viewer does not work neither in the posts nor in the Wordpress pages

mgglyflics

Sat, 09/11/2021 - 11:17

Download contend

There is no download button on the examples and downloads page. Where can I find the content?

intrepidguide

Mon, 11/08/2021 - 00:20

Hello :) I installed H5P,

Hello :) I installed H5P, created a quiz set, put the shortcode on my page, published it, but it doesn't display. What am I doing wrong? :(

Here is the test page https://www.theintrepidguide.com/quiz-test/

Thank you :)

Quiz not showing

Hello :)

I installed H5P, created a quiz set, put the shortcode on my page, published it, but it doesn't display. What am I doing wrong? :(

Mon, 11/08/2021 - 18:47

Hi intrepidguide,I checked

Hi intrepidguide,

I checked the site and I am getting an error 404, are you sure the page has been published?

Mon, 11/08/2021 - 18:57

Hi there, I contacted my

Hi there, I contacted my developer who found that there was a plugin on my site that was restricting the shortcode from showing. He's since fixed this, but the workaround I found was to use the embed code instead which worked fine. The test page is no longer live as I took it down

Mon, 11/08/2021 - 19:26

Hi intrepidguide,Thank you

Thank you for the update and we are glad you got it working.

noblweb

Fri, 11/12/2021 - 20:09

I do not see the download button or the H5P Hub

I'm trying to add H5P content to my wordPress website, but I do not see the download demo buttons or links in your examples, nor do I see anything like your screenshot above where you say that I will see an H5P hub in "Add New" when I install the H5P plugin.

I'm a WordPress developer, so I'm not a newbie, and this is VERY complicated for no reason. Can you please explain clearly how I can add new modules to my WordPress. When I click ADD NEW, it's just an empty page.

Thank you,

Mon, 11/15/2021 - 09:00

Are there any error messages

Are there any error messages in your JavaScript console? (Ctrl + Shift + J in Chrome).

Sounds to me like there might be a conflict with another plugin or the theme. (The process should be quite straight forward on a fresh WP install)

richard015ar

Tue, 11/16/2021 - 15:55

Render H5P content

I am using this plugin in my wordpress multisite installation.
I would like to get a preview of my H5P activities to export it to PDF in other plugins I have. Is that possible?

The idea is render my post in a PDF (which is something we already achieved), and where some H5P activities are present in those, I would like to render a preview before export those.

edmazinglearning

Wed, 12/15/2021 - 16:15

Image file in Hotspot Error

I am attempting to upload a hotspot image. I have tried png and jpeg file type. I keep getting error "file type not allowed." Please help!

Wed, 12/15/2021 - 19:44

Hi,If you are using the H5P

If you are using the H5P plugin for Wordpress please make sure that the file extension is in lower case.

TMDC City

Wed, 03/30/2022 - 17:05

H5P Wordpress Update

Hi, will there be an update for the most current version of Wordpress. Currently its not tested with this verison. WordPress 5.9.2

Julieunine

Tue, 05/23/2023 - 14:43

New pluggin ?

HI, I would like to know if a new version of this pluggin will coming soon for Wordpress ?

rebhi mahmoud

Mon, 11/27/2023 - 23:12

(403)Impossible d'interpréter

(403)

Impossible d'interpréter la réponse.

Merci de vérifier le journal des erreurs.
ce message apparaitre toujours lorsque je vien de créer une activité

jennwright

Wed, 02/07/2024 - 17:59

Enable H5P Hub not working in WordPress

I've just installed the H5P plugin on a WordPress site and I'm trying to enable the H5P hub. When I check that box in the settings, the screen turns a dark gray and doesn't let me save the setting. I've seen this issue mentioned by a few other users here and in the forum, and I've tried the steps below with no luck. What else can I do? Why is this setting not enabled by default, as it's the recommended option?

-use a different browser (I've tried Chrome, Edge, and Firefox)

-disable other plugins - H5P is the only active plugin

-check for browser console errors - there are none

You are here