Using our free WordPress Quiz Maker Plugin
Using the Classic Editor, Gutenberg Block Editor, Visual Composer or Elementor
Adding a Riddle quiz to a WordPress site is really easy. How the Riddle quiz is added depends on the page builder you are using for your WordPress site. We will cover the most commonly used page builders below. If you don’t want to read, scroll down and watch our video tutorial instead.
If you already have a Riddle embedded but are running into problems, check out our trouble shooting section below.
Unless you are using our plugin, please publish your Riddle first and copy the standard embed code. You will use this embed code as outlined below.
Video walkthrough: Using Riddle’s WordPress plug-in
The easiest way is to use our WordPress plug-in – and follow these steps:
Our standard embed code option
You can also use our standard embed codes – they have the same functionality as our plug-in, without the need to add a plug-in!
Gutenberg Block Editor
Every WordPress installation comes with the Gutenberg Block Editor installed.
To add the Riddle embed code, simply add a custom html block to your page and then paste the Riddle embed code there.
Classic Editor
If you are not a fan of the Gutenberg Editor or still have an older version of WordPress running, you may be using the classic editor.
When using the Classic Editor, simply click on the “text” editor tab and paste the Riddle embed code there. Make sure to NOT paste the Riddle code in the visual editor as it will not work there.
Visual Composer
Visual Composer comes as the page builder of choice with many popular themes like TagDiv. To add the Riddle embed code there, add a Raw HTML Block and then paste the Riddle embed code.
Elementor
When using Elementor, add the <html> widget to your page and then paste the Riddle embed code
Any other page builder
Every page builder will have a similar element called HTML, External HTML, external code or similar. Please make sure to always paste the Riddle embed code as raw HTML instead of adding it to a rich text editor.
Riddle Plugin
No matter which page builder you are using, the Riddle plugin makes it even easier to add Riddles to your WordPress site.
Starting with version 4.0 the Riddle Quiz Maker WordPress Plugin is supporting Gutenberg blocks. In this first Gutenberg release, you can easily add your quizzes as a Gutenberg block by either:
- adding a shortcode generated by the plugin
- adding the URL to your Riddle that is autogenerated when you publish a Riddle on riddle.com
- adding the Riddle ID
To make use of this, please install the Riddle plugin first or if you already have our plugin installed, make sure to upgrade to version 4.0 or higher. Older versions of our plugin do not support the Gutenberg editor.
After installing the plugin, connect it with your riddle.com account using the plugin token. You can do that by following these steps:
Connect your Riddle account
- Log in to your account on Riddle.com.
- No account yet? Just create an account – 14 day free trial, with no credit card required.)
- Go to the ‘API/Wordpress’ section in the main menu on Riddle.com.
- Copy your API token and key
- Head back to the Riddle plug-in in WordPress.
- Paste the code into the token field (under account settings).
- Click on the “Update API token & key” button.
This will bring up the My Riddles list inside WordPress.
You can now use the “Copy to clipboard” button to copy the shortcode to your clipboard. You can use that shortcode with any WordPress Editor. Just paste it into your blog post where you want the Riddle quiz to show.
For Gutenberg, copy the shortcode and then go to the page or post where you want to add this Riddle.
Click on the + sign to add a new Gutenberg block and search for Riddle.
Now paste the shortcode or alternatively just the Riddle ID or a link to the published Riddle such as https://www.riddle.com/showcase/140298/personality into the text box in the Gutenberg editor.
This will load the Riddle and you are all set.
Please note, if you are using Gutenberg or any other editor like Fusion from Avada or the classic editor, our shortcode will always work. But we are working on new cool features for Gutenberg users, so come back here and update your Riddle Plugin frequently to benefit from them.
Video
Not a fan of too many letters on a page, watch this video to learn how to add Riddle to your WordPress site.
Trouble Shooting
The Riddle is not loading. I only see the load animation
If you have a security plugin installed, disable the security plugin briefly and try again. If the Riddle is loading now, adjust your security settings to allow the embedding of 3rd party iFrames.
If you are running Smush from WPMUDEV, make sure to disable lazy loading for iFrames.
If you are running other optimization tools, disable them briefly and check if Riddle loads. If it loads without that tool enabled, find out if your optimization tool can bypass iFrames.
My Riddle is too big / too small
Riddles will try to fit into the container where you placed the embed code. When using site builders that allow you to place containers on your site, make sure to fit the Riddle into a container that has the desired width. If you want a full screen Riddle, change the width to 100% before you generate the embed code (see screenshot below).
My Riddle scrolls the page up and down when answers are selected.
By default, Riddles have auto scroll enabled. This provides a good user experience, if the quiz has a lot of answer options for example. However, in some WordPress environments, auto scroll is not wanted. Turn on the “Disable auto-scrolling” switch. When changing the auto-scroll setting (or any other publish setting), make sure to replace the embed code on your site with the newly generated code after making that change.
More info
And of course, if you run into problems, please just reach out via chat (check the bottom right corner of this page for our chat box) or email us at hello@riddle.com. We’re super fast at responding. 🙂