Nest Frontend Editor for H5P

by IndiEgg Studios

Description

Nest Frontend Editor for H5P lets your users view, create, and edit H5P content without ever leaving the front end of your WordPress site.

Place the shortcodes on any pages you choose, configure permissions per role, and let the plugin handle the rest. Works seamlessly with Remix Manager for H5P when its Library Link Behavior settings point to Nest front-end pages.

Shortcodes:

[nest_h5p_editor_view] – Displays an H5P content item. Reads the item ID from the URL (?h5p_id=X).
[nest_h5p_editor_create] – Displays the H5P content creation editor.
[nest_h5p_editor_edit] – Displays the H5P content editor for an existing item. Reads the item ID from the URL (?h5p_id=X). Users may only edit content they own.
[nest_h5p_editor_results] – Displays the H5P results page for an existing item. Reads the item ID from the URL (?h5p_id=X).
[nest_h5p_editor_link_view] – Outputs a link to the front-end view page for the current H5P item. Accepts text and class attributes.
[nest_h5p_editor_link_edit] – Outputs a link to the front-end edit page for the current H5P item. Only renders if the current user owns the content. Accepts text and class attributes.
[nest_h5p_editor_link_results] – Outputs a link to the front-end results page for the current H5P item. Accepts text and class attributes.

Features:

Role-based permissions – all roles registered on the site are listed, including custom roles like Teacher or Instructor.
Configurable unauthorized redirect behavior per action – redirect to home, login, or a custom URL.
Logged-out users are always redirected to the login page.
Auto-resizing iframes that adjust to content height on load, on user interaction, and after content type selection on the create page.
Admin menu, admin bar, and footer are automatically hidden inside the iframe so users see a clean, focused experience with no WordPress admin UI visible.
Ownership enforcement for the Edit shortcode – users can only edit H5P content they own.
Results shortcode – display H5P results on the front end with role-based permission control.
Link shortcodes – generate styled links between view, edit, and results pages for the current H5P item.
Filter hooks (rmh5p_view_url, rmh5p_edit_url, rmh5p_create_url, rmh5p_results_url) integrate with Remix Manager for H5P when its Library Link Behavior settings point to Nest front-end pages.

For full documentation visit indiegg.com/nest-frontend-editor-for-h5p/documentation.

Disclaimer:

Nest Frontend Editor for H5P is an independent plugin and is not affiliated with, endorsed by, or sponsored by H5P or its developer, Joubel. H5P is a trademark of its respective owner.

Usage

Setting up pages

Create one page per action. Add the shortcode to each:

View page: [nest_h5p_editor_view]
Create page: [nest_h5p_editor_create]
Edit page: [nest_h5p_editor_edit]
Results page: [nest_h5p_editor_results]

Then go to Settings -> Nest Frontend Editor for H5P and select each page from the dropdowns.

Permissions

Under Role Permissions, check which roles can access each action. All roles on the site are listed automatically, including custom roles.

Redirect behavior

Under Unauthorized Redirect Behavior, choose what happens when a logged-in user without permission tries to access each page. Options are:

Redirect to home page
Redirect to login page
Redirect to a custom URL

Logged-out users are always sent to the login page regardless of this setting.

Integration with Remix Manager for H5P

When both plugins are active and pages are configured, the Remix Manager Library Link Behavior settings can point View, Edit, and Results links to the matching Nest Frontend Editor for H5P pages.

Link shortcodes

Place these shortcodes on your view, edit, or results pages to generate navigation links between pages for the same H5P item. All three read the current h5p_id from the URL automatically.

[nest_h5p_editor_link_view] – link to the view page
[nest_h5p_editor_link_edit] – link to the edit page (only renders if the current user owns the content)
[nest_h5p_editor_link_results] – link to the results page

All three accept optional attributes:

text – the link label. Example: [nest_h5p_editor_link_view text="Watch this activity"]
class – additional CSS classes. Example: [nest_h5p_editor_link_edit class="button button-primary"]

Each link always includes the classes nfeh5p-link and a type-specific class (nfeh5p-link-view, nfeh5p-link-edit, nfeh5p-link-results) for styling in your theme CSS.

Installation

Upload the nest-frontend-editor-for-h5p folder to /wp-content/plugins/, or install through the WordPress Plugins screen.
Activate the plugin.
Install and activate the official H5P plugin if you have not already.
Go to Settings -> Nest Frontend Editor for H5P to configure pages, permissions, and redirect behavior.
Create pages for View, Create, Edit, and Results, place the appropriate shortcode on each, and select them in the settings.

Screenshots

Admin settings page showing the Frontend Pages selectors, Role Permissions matrix, and Unauthorized Redirect Behavior section.
The H5P content editor loaded on a front-end WordPress page via the [nest_h5p_editor_edit] shortcode, with the WordPress admin menu hidden.
The H5P content viewer loaded on a front-end page via the [nest_h5p_editor_view] shortcode.
The H5P content creation editor loaded on a front-end page via the [nest_h5p_editor_create] shortcode.
The H5P results page loaded on a front-end page via the [nest_h5p_editor_results] shortcode.

Faq

Do I need Remix Manager for H5P?

No. The shortcodes work independently. Remix Manager for H5P is only needed if you want its library table links to point to Nest front-end pages.

Do I need all three pages?

No. Set up only the pages you need. If you only want users to be able to edit existing content, you only need the Edit page. The shortcodes are fully independent of each other.

Can users edit H5P content that belongs to someone else?

No. The [nest_h5p_editor_edit] shortcode checks ownership before rendering the iframe. Users who try to edit content they do not own are redirected immediately. If they want a customized version of someone else’s content, they can use Remix Manager for H5P to create their own copy first.

What happens if I have not selected a page for an action?

Links for that action are left unchanged, pointing to the WordPress admin. No broken links are generated.

Why is the WordPress admin menu hidden inside the iframe?

The plugin automatically hides the WordPress sidebar, admin bar, and footer when an H5P page loads inside the iframe. This gives users a clean, focused experience with no WordPress admin UI visible. It is done by appending a parameter to the iframe URL and injecting a small CSS block in the admin when that parameter is detected. Normal admin access is completely unaffected.

Can users create H5P content they do not 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 role-based permission layer on top of those existing checks.

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, your theme may be 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.

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 will appear automatically.

Does this 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. Minor CSS adjustments may be needed depending on how your page builder handles container widths.

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, so it is important to keep H5P active if the front-end pages are in use.

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 as an iframe. [nest_h5p_editor_link_view] outputs a plain HTML link that points to the view page for the current H5P item. The link shortcodes are designed to be used as navigation between your view, edit, and results pages.

How do I customize the appearance of the link shortcodes to match my theme?

The plugin includes default button styling for the link shortcodes. To override it, add custom CSS using your theme’s Additional CSS option (Appearance -> Customize -> Additional CSS) or a plugin like Simple Custom CSS.

The following classes are available to target:

.nfeh5p-link – applies to all three link types
.nfeh5p-link-view – the View link only
.nfeh5p-link-edit – the Edit link only
.nfeh5p-link-results – the Results link only

Example: change the background color of all links:

.nfeh5p-link { background: #your-color; }

Example: style the View link differently from the others:

.nfeh5p-link-view { background: #your-color; border-color: #your-border-color; }

Example: override the hover state:

.nfeh5p-link-view:hover, .nfeh5p-link-edit:hover, .nfeh5p-link-results:hover { background: #your-hover-color; }

If your custom CSS is not taking effect, add !important to the property you are overriding, for example:

.nfeh5p-link { background: #your-color !important; }

Where can I get support for this plugin?

For support, visit the WordPress.org support forum or contact us at indiegg.com/contact-us.

Reviews

Changelog

1.0

Initial release.
Four display shortcodes: nest_h5p_editor_view, nest_h5p_editor_create, nest_h5p_editor_edit, nest_h5p_editor_results.
Three navigation link shortcodes: nest_h5p_editor_link_view, nest_h5p_editor_link_edit, nest_h5p_editor_link_results, each with text and class attributes.
Role-based permissions matrix with support for custom roles, including can_view_results permission.
Configurable unauthorized redirect behavior per action (home, login, or custom URL).
Logged-out users always redirected to login page.
Auto-resizing iframes with type-specific CSS classes (nfeh5p-view-iframe, nfeh5p-edit-iframe, nfeh5p-create-iframe, nfeh5p-results-iframe).
Admin menu, admin bar, and footer hidden inside iframes via nfeh5p_frame parameter.
Horizontal scrollbar suppressed inside all iframes.
Type-specific CSS injection inside iframes – H5P sidebar hidden on view and results pages.
Ownership enforcement for the nest_h5p_editor_edit shortcode.
Filter hooks for integration with Remix Manager for H5P (rmh5p_view_url, rmh5p_edit_url, rmh5p_create_url, rmh5p_results_url).