{"id":1562,"date":"2025-03-12T11:29:38","date_gmt":"2025-03-12T15:29:38","guid":{"rendered":"https:\/\/sites.smith.edu\/project-resources\/?p=1562"},"modified":"2025-07-18T11:50:47","modified_gmt":"2025-07-18T15:50:47","slug":"creating-and-embedding-h5p-content","status":"publish","type":"post","link":"https:\/\/sites.smith.edu\/project-resources\/creating-and-embedding-h5p-content\/","title":{"rendered":"Creating and embedding H5P Content"},"content":{"rendered":"\n

This page describes how to create any kind of H5P content and get a short code to share it on a WordPress page. <\/p>\n\n\n\n

To create any type of H5P content<\/h2>\n\n\n\n
    \n
  1. Navigate to the Dashboard<\/em> of your WordPress site. <\/li>\n\n\n\n
  2. From the main navigation menu on the left side, select H5P Content.<\/strong> \"H5P<\/li>\n\n\n\n
  3. Select the Add New <\/strong>button.
    \"The<\/li>\n\n\n\n
  4. A new page will open and display the H5P Hub.
    <\/li>\n\n\n\n
  5. Select the content you’d like to create. Need ideas? Take a look at these H5P examples<\/a> (link opens in a new tab). <\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n

    Saving your Content<\/h2>\n\n\n\n
      \n
    1. When you have finished creating your H5P content, at the top-right side of the page in the Actions block, select Create<\/strong>.
      \"\nThe<\/li>\n\n\n\n
    2. The page will refresh showing the finished H5P content on the left, and a Shortcode block will replace the Actions block on the right.
      \"The
      <\/li>\n<\/ol>\n\n\n\n
      <\/div>\n\n\n\n

      Add the Shortcode to the Post <\/strong><\/h2>\n\n\n\n

      The last step is to add the article to your WordPress post.<\/p>\n\n\n\n

        \n
      1. Copy the short code displayed in the block in the top corner of your new H5P content.
        \"H5P<\/li>\n\n\n\n
      2. Navigate to the post or page where you would like to embed your article.<\/li>\n\n\n\n
      3. In the Block editor workspace, add a new shortcode block wherever you’d like the Image hotspot to appear on your page.\n