WordPress recently celebrated the 21st anniversary of their popular publishing platform which is used by 43% of all websites on the world wide web. With thousands of themes and plugins, bloggers can tailor their site’s appearance and functionality to suit their needs and preferences, whether they want a simple personal blog or a more complex, feature-rich site. However, even with all of the available plugins, templates and themes, it’s can be difficult to add interactive elements to a WordPress blog post. Here we will show you how to add interactivity to your webpage with just one copy-paste into your post.
Above is an interactive section that would a fun highlight for a food or recipe blog! Swirl the vinegar around in the oil by clicking and dragging.
Bloggers use WordPress for a variety of blogging styles and formats, from text-heavy posts to multimedia-rich content. It supports various media types, including images, videos, and audio files, making it versatile for different content needs. Using WordPress’ custom HTML block, you can embed an interactive Hatch project anywhere into your post.
We made the above project in Hatch and it is viewable as a standalone webpage here. Now we’ll show you how to embed it.
Embed an interactive page into a WordPress post
When you publish a finished Hatch project, you’ll see a button that says “copy embed,” shown below. Simply click on that button and the code for an iframe will be copied to your clipboard.
Open up your WordPress blog post and find the “custom HTML” block, shown below. Click on the block and it will insert an input box, as shown below.
Then, paste the embed code from your Hatch project into the HTML input field, as shown below.
Your Hatch project will not appear in your post while you’re in draft mode. However, once you publish your blog post, the project will be fully functional within the page. You can resize the project or move the project inside of a column to have it side-by-side with text.
Without changing your theme or adding any plugins, you can add interactive elements to a WordPress post with Hatch. Hatch is free to design, build, and publish, all with one link. Try it out here!