Nest Frontend Editor for H5P
Plugin Documentation – Version 1.0
1. Requirements
Before installing Nest Frontend Editor for H5P, ensure your site meets the following requirements.
| Requirement | Details |
| WordPress | 5.4 or higher |
| PHP | 7.4 or higher |
| H5P Plugin | Required: install the free H5P plugin from WordPress.org first |
| Remix Manager for H5P | Optional: used for configurable library table links |
2. Installation
Installing from WordPress.org
- Log in to your WordPress admin dashboard.
- Go to Plugins → Add New.
- Search for Nest Frontend Editor for H5P.
- Click Install Now on the plugin result, then click Activate.
Installing Manually
- Download the plugin ZIP file from WordPress.org or IndiEgg Studios.
- Go to Plugins → Add New → Upload Plugin.
- Choose the ZIP file and click Install Now.
- Click Activate Plugin.
The H5P plugin must be installed and active before Nest Frontend Editor for H5P will function. If H5P is not active, an admin notice will appear with instructions.
3. Setting Up Front-End Pages
Nest Frontend Editor for H5P works by embedding H5P admin pages inside an iframe on front-end WordPress pages of your choosing. You create the pages, place the shortcodes, then tell the plugin which page is which.
3.1 Create the Pages
Create up to four WordPress pages, one for each action. You do not need all four; set up only the ones you need.
| Shortcode | Action | What it does |
[nest_h5p_editor_view] | View | Displays an H5P content item. Reads the item ID from ?h5p_id= in the URL. |
[nest_h5p_editor_create] | Create | Displays the H5P content creation editor. No URL parameter needed. |
[nest_h5p_editor_edit] | Edit | Displays the H5P content editor for an existing item. Reads the item ID from ?h5p_id= in the URL. Enforces ownership; users can only edit their own content. |
[nest_h5p_editor_results] | View Results | Displays the H5P student results for an existing item. Reads the item ID from ?h5p_id= in the URL. Enforces ownership; users can only view results from their own content. |
For each page you want to set up:
- Create a new WordPress page and give it a name (e.g. “View H5P”, “Create H5P”, “Edit H5P”, “View H5P Results”).
- Add the corresponding shortcode to the page content.
- Publish the page.
3.2 Configure Pages in Settings
- Go to Settings → Nest Frontend Editor for H5P.
- Under Frontend Pages, select each page from the dropdowns.
- Save the settings.
If a page is not selected for a given action, the shortcode still works, but the plugin cannot generate links to that page for use in Remix Manager for H5P.
4. Settings
Go to Settings → Nest Frontend Editor for H5P to access the full settings page, which has three sections.
4.1 Frontend Pages
Four page-selector dropdowns, one for each shortcode. Select the page where each shortcode has been placed. These selections are used to build front-end URLs in Remix Manager for H5P and any other compatible plugin.
4.2 Role Permissions
A matrix of every role registered on your site, including custom roles like Teacher or Instructor, with four permission checkboxes per role:
| Permission | Description |
| Can View | Whether users of this role can access the [nest_h5p_editor_view] page. Without this permission, users are redirected according to the redirect behavior setting for View. |
| Can Create | Whether users of this role can access the [nest_h5p_editor_create] page. Without this permission, users are redirected according to the redirect behavior setting for Create. |
| Can Edit | Whether users of this role can access the [nest_h5p_editor_edit] page. Without this permission, users are redirected according to the redirect behavior setting for Edit. Note that having this permission does not allow editing other users’ content. Ownership is always enforced separately. |
| Can View Results | Whether users of this role can access the [nest_h5p_editor_results] page. Without this permission, users are redirected according to the redirect behavior setting for Results. Note that having this permission does not allow viewing results of other users’ content. Ownership is always enforced separately. |
4.3 Unauthorized Redirect Behavior
Four rows, one per action (View, Create, Edit, Results). For each, choose what happens when a logged-in user without permission tries to access the page:
| Option | Behavior |
| Redirect to home page | Sends the user to the site home page. |
| Redirect to login page | Sends the user to the WordPress login page, with a redirect back to the current page after login. |
| Redirect to custom URL | Sends the user to a URL you specify. A text field appears when this option is selected. |
Logged-out users are always redirected to the login page, regardless of the redirect behavior setting.
5. How the Iframes Work
Each shortcode renders an iframe that loads an H5P admin page from your own site. Because the iframe is same-origin (your own domain), it has full access to the H5P editor and viewer without any cross-origin restrictions.
5.1 Admin Menu Hiding
When an H5P admin page loads inside an Nest Frontend Editor iframe, the plugin automatically hides:
- The WordPress sidebar menu
- The WordPress admin bar
- The WordPress admin footer
This is done by appending ?nfeh5p_frame=1 to the iframe URL and injecting a small CSS block in admin_head when that parameter is detected. The parameter causes no state change and is never visible to end users.
5.2 Auto-Resizing
The iframe starts at 100vh (full viewport height) as a baseline. It then listens for postMessage resize events that H5P fires natively from its content types. When a resize event is received from the same origin, the iframe height is updated to match the content, ensuring the editor never feels cramped or shows unnecessary scrollbars.
5.3 Ownership Enforcement for Edit and Results
When the [nest_h5p_editor_edit] and [nest_h5p_editor_results] shortcodes are rendered, it reads the h5p_id parameter from the URL and checks whether the currently logged-in user owns that content item. If they do not, they are redirected using the Edit redirect behavior setting, with ?nfeh5p_error=not_owner appended to the redirect URL so you can optionally display an error message on the destination page.
6. Link Shortcodes
In addition to the four iframe shortcodes, Nest Frontend Editor for H5P includes three optional link shortcodes. These shortcodes generate navigation links between your configured front-end H5P pages.
They are intended for use on pages that already have an h5p_id in the URL, such as:
https://example.com/view-activity/?h5p_id=25
The link shortcodes automatically read that h5p_id and build the correct URL for the matching front-end page selected in Settings -> Nest Frontend Editor for H5P.
| Shortcode | Description |
[nest_h5p_editor_link_view] | Links to the configured View page for the current H5P item |
[nest_h5p_editor_link_edit] | Links to the configured Edit page for the current H5P item. This link only renders when the logged-in user owns the H5P content |
[nest_h5p_editor_link_results] | Links to the configured Results page for the current H5P item |
6.1 Optional Attributes
Each link shortcode accepts two optional attributes:
| Attribute | Description |
|---|---|
| text | Changes the visible link text |
| class | Adds one or more custom CSS classes to the link |
Examples:
[nest_h5p_editor_link_view text="View Activity"][nest_h5p_editor_link_edit text="Edit Activity"][nest_h5p_editor_link_results text="View Results"][nest_h5p_editor_link_edit text="Edit Activity" class="button button-primary"]
6.2 Styling Link Shortcodes
The plugin adds default CSS classes to the links so they can be styled with your theme.
| CSS Class | Applies To |
|---|---|
| .nfeh5p-link | All Nest Frontend Editor link shortcodes |
| .nfeh5p-link-view | View link only |
| .nfeh5p-link-edit | Edit link only |
| .nfeh5p-link-results | Results link only |
Examples:
css.nfeh5p-link { display: inline-block; padding: 0.5em 1em; text-decoration: none; } |
css |
7. Remix Manager for H5P Integration
Nest Frontend Editor for H5P is designed to work alongside Remix Manager for H5P. When both plugins are active and configured and Remix Manager’s Library Link Behavior settings point to Nest front-end pages, the View and Edit links in the Remix Manager library table are rewritten to point to your front-end pages.
Setup
- Install and activate Remix Manager for H5P.
- In Nest Frontend Editor for H5P settings, ensure the View and Edit pages are selected.
- Go to Settings → H5P Remix Manager → Library Link Behavior.
- Set the View link mode to Nest Frontend Editor for H5P pages.
- Set the Edit link mode to Nest Frontend Editor for H5P pages.
- Save. All View and Edit links in the library table now point to your front-end pages.
Filter Hooks for Developers
The integration works through four filter hooks exposed by Remix Manager for H5P. Nest Frontend Editor for H5P hooks into these when both plugins are active and when Remix Manager’s Library Link Behavior settings point to Nest front-end pages. If you are building your own integration, you can hook into these filters directly:
| Hook | Description |
rmh5p_view_url | Filters the View link URL. Parameters: $url (string), $content_id (int). |
rmh5p_edit_url | Filters the Edit link URL. Parameters: $url (string), $content_id (int). |
rmh5p_create_url | Filters the Create URL. Parameters: $url (string). |
rmh5p_results_url | Filters the Results link URL. Parameters: $url (string), $content_id (int). |
8. Frequently Asked Questions
Do I need Remix Manager for H5P?
No. The four shortcodes work independently of Remix Manager for H5P. That plugin is only needed if you want the library table links to be rewritten.
Do I need all four pages?
No. Set up only the pages you need. If you only want users to be able to edit content (not create new content), you only need the Edit page. The shortcodes are fully independent.
Why does the H5P editor look cut off or too small?
The iframe starts at full viewport height and resizes automatically based on H5P’s native resize events. If the editor still appears cut off, ensure your theme is not applying a max-height or overflow:hidden to the page content area. You can override this with custom CSS targeting the .nfeh5p-iframe-wrapper class.
Can users create H5P content they don’t have permission for in the admin?
No. The iframe loads the actual WordPress H5P admin page, so all of H5P’s own permission checks still apply. Nest Frontend Editor for H5P adds a permission layer on top; a user needs both the Nest Frontend Editor role permission and the underlying H5P capability to proceed.
Can users edit or view results of H5P content that belongs to someone else?
No. The [nest_h5p_editor_edit] and [nest_h5p_editor_edit] shortcodes check ownership before rendering the iframe. If the content ID in the URL does not belong to the currently logged-in user, they are redirected immediately. This is enforced server-side, not just in the UI.
What does ?nfeh5p_error=not_owner do?
When a user is blocked from editing content they do not own, they are redirected to the configured Edit redirect URL with ?nfeh5p_error=not_owner appended. You can use this parameter on your redirect destination page to display a message. For example, using a shortcode or conditional block that checks for this URL parameter. The plugin does not display the message automatically, giving you full control over the user experience.
Does this plugin work with custom user roles?
Yes. The permissions matrix is built dynamically from all roles registered on your site. Any custom role (such as Teacher, Instructor, or Student) appears automatically in the matrix.
What happens if the H5P plugin is deactivated?
Nest Frontend Editor for H5P checks whether H5P is active on every page load. If H5P is not active, an admin notice appears. The shortcodes will render empty iframes pointing at pages that no longer exist, so it is important to keep H5P active if the front-end pages are in use.
Can I use more than one shortcode on the same page?
Yes, you can place navigation link shortcodes on the same page as a display shortcode. For example, your View page might include [nest_h5p_editor_view] along with [nest_h5p_editor_link_edit] or [nest_h5p_editor_link_results].
However, the main display shortcodes should still be used one per page. Do not place multiple display shortcodes, such as [nest_h5p_editor_view] and [nest_h5p_editor_edit], on the same page. Each display shortcode is intended to load its own H5P iframe experience.
What is the difference between [nest_h5p_editor_view] and [nest_h5p_editor_link_view]?
[nest_h5p_editor_view] embeds the H5P content viewer directly on the page. [nest_h5p_editor_link_view] only outputs a link to the configured View page for the current H5P item.
The same pattern applies to the other shortcodes. The main shortcodes display H5P content inside an iframe, while the link shortcodes create navigation links between your configured front-end pages.
Where should I place the link shortcodes?
Place them on your View, Edit, or Results pages when you want users to move between those pages for the same H5P item.
For example, on your View page, you might add:
[nest_h5p_editor_view][nest_h5p_editor_link_edit text="Edit Activity"][nest_h5p_editor_link_results text="View Results"]
Do the link shortcodes need an h5p_id?
Yes. They read the current H5P content ID from the h5p_id URL parameter.
Example:
https://example.com/view-activity/?h5p_id=25
If no h5p_id is present, the link shortcode will not output a link.
Why does the Edit link sometimes not appear?
[nest_h5p_editor_link_edit] only appears when the current logged-in user owns the H5P content. This prevents users from being given edit links for content that does not belong to them.
Can I change the link text?
Yes. Use the text attribute.
Example:
[nest_h5p_editor_link_results text="See Student Results"]
Can I style the links?
Yes. Use the class attribute to add your own CSS class, or target the default plugin classes in your theme CSS.
Example:
[nest_h5p_editor_link_view text="Open Activity" class="my-custom-button"]
Does the plugin work with page builders like Elementor or Divi?
Yes. The shortcodes output standard HTML and work in any context that supports WordPress shortcodes, including page builders. The iframe sizing may need minor CSS adjustment depending on how the page builder handles container widths.
9. Changelog
Version 1.0
- Initial release
- Four shortcodes:
[nest_h5p_editor_view],[nest_h5p_editor_create],[nest_h5p_editor_edit],[nest_h5p_editor_results] - Role-based permissions matrix with support for custom roles
- Configurable unauthorized redirect behavior per action (home, login, or custom URL)
- Ownership enforcement for the Edit and Results shortcodes
- Admin menu, admin bar, and footer hidden inside iframes via
?nfeh5p_frame=1 - Auto-resizing iframes via H5P’s native postMessage resize events
- Settings page with page selectors, permissions matrix, and redirect behavior
- Filter hook integration with Remix Manager for H5P (
rmh5p_view_url,rmh5p_edit_url,rmh5p_create_url,rmh5p_results_url)
If this plugin has saved you time, consider buying me a coffee. It helps support continued development.
Nest Frontend Editor for H5P is developed by IndiEgg Studios – indiegg.com