Interactive Content Shortcode

Below, you’ll find a detailed guide on how to add the Interactive Content Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Interactive Content Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Interactive Content Plugin and the shortcodes it provides:

Interactive Content – H5P

"Interactive Content – H5P is a versatile WordPress plugin. It allows users to create rich, engaging content with various multimedia elements such as quizzes, games, and presentations. Ideal for making your site more dynamic and interactive."

★★★★☆ (57) Active Installs: 40000+ Tested with: 6.2.3 PHP Version: false

Included Shortcodes:

• [h5p]

Interactive Content [h5p] Shortcode

The H5P shortcode is a powerful tool that retrieves specific H5P content from the database. It uses the ‘slug’ attribute to query the database for the corresponding H5P content ID. If a database error occurs or the specified content is not found, it returns an error message. If the content is found, the shortcode logs the view and adds the necessary assets to display the H5P content.

Shortcode: [h5p]

Parameters

Here is a list of all possible h5p shortcode parameters and attributes:

• slug – the unique text identifier for the H5P content
• id – the unique numerical identifier for the H5P content

Examples and Usage

Basic example – Embedding H5P content by using its unique slug

[h5p slug="unique-slug"]

In this basic example, the shortcode is used to embed H5P content into a post or page. The ‘slug’ attribute is used to specify which H5P content to display. The slug is a unique identifier set for each H5P content.

Advanced example – Embedding H5P content by using its unique ID

[h5p id=5]

This advanced example demonstrates how to use the ‘id’ attribute to specify the H5P content. It is useful when the slug is not known or if there are multiple H5P contents with similar slugs. The ‘id’ attribute takes precedence over the ‘slug’ attribute if both are specified.

Advanced example – Embedding H5P content by using both slug and ID

[h5p slug="unique-slug" id=5]

In this example, both ‘slug’ and ‘id’ attributes are used. The shortcode will first try to load the H5P content by using the ‘id’. If the content is not found, it will then try to load by the ‘slug’. This is useful as a fallback mechanism to ensure the H5P content is displayed even if one of the identifiers is incorrect.

PHP Function Code

In case you have difficulties debugging what causing issues with [h5p] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('h5p', array($this, 'shortcode'));

Shortcode PHP function:

function shortcode($atts) {
    global $wpdb;
    if (isset($atts['slug'])) {
      $q=$wpdb->prepare(
        "SELECT  id ".
        "FROM    {$wpdb->prefix}h5p_contents ".
        "WHERE   slug=%s",
        $atts['slug']
      );
      $row=$wpdb->get_row($q,ARRAY_A);

      if ($wpdb->last_error) {
        return sprintf(__('Database error: %s.', $this->plugin_slug), $wpdb->last_error);
      }

      if (!isset($row['id'])) {
        return sprintf(__('Cannot find H5P content with slug: %s.', $this->plugin_slug), $atts['slug']);
      }

      $atts['id']=$row['id'];
    }

    $id = isset($atts['id']) ? intval($atts['id']) : NULL;
    $content = $this->get_content($id);
    if (is_string($content)) {
      // Return error message if the user has the correct cap
      return current_user_can('edit_h5p_contents') ? $content : NULL;
    }

    // Log view
    new H5P_Event('content', 'shortcode',
        $content['id'],
        $content['title'],
        $content['library']['name'],
        $content['library']['majorVersion'] . '.' . $content['library']['minorVersion']);

    return $this->add_assets($content);
  }

Code file location:

h5p/h5p/public/class-h5p-plugin.php

Conclusion

Now that you’ve learned how to embed the Interactive Content Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.