How to add a quiz to a WordPress page: block or shortcode

To add a quiz to a WordPress page, you have two options: the Advance Quiz block or the shortcode [quizably_quiz id="..."]. The block is easier in the block editor. The shortcode works almost everywhere else. Both show the same quiz, styled the same way.

This guide covers both, where each one works, where on the page a quiz should go, and what to check when it does not show up. If you have not built the quiz yet, start with how to create a quiz in WordPress and come back here. If you’re still choosing a plugin, what to look for in a quiz plugin covers embedding options too, and free vs paid quiz plugins shows where a free plugin usually stops.

Before you embed: publish the quiz

Most “my quiz is missing” problems come from skipping this. Open Quiz Builder, finish the quiz, and check that it is published. New quizzes start as published, but a duplicated or imported quiz starts as a draft, and a draft quiz will not appear to visitors, even if the block or shortcode sits on the page.

Take the quiz once in the builder preview as well. It is much easier to fix a typo before it is on a live page.

Add a quiz to a WordPress page with the Advance Quiz block

This is the simplest route if your page uses the block editor.

1. Open the page or post in the editor.
2. Click the plus icon to add a block, and search for Advance Quiz, which is the block’s name. Searching “quizably” or “quiz” finds it too.
3. Add the block, then choose your quiz from the list in the block settings sidebar.
4. Update or publish the page, then view it on the front end.

You do not need to copy any ids, because you pick the quiz from a list. The editor shows a short text placeholder rather than a live preview, so view the page on the front end to see the real quiz.

A tip: add the block to its own row rather than inside a narrow column. A quiz needs room to breathe, and a cramped column makes long answers wrap awkwardly. Put it in a full-width or wide section of your layout.

Option 2: Use the shortcode

The shortcode looks like this:

[quizably_quiz id="your-quiz-id"]

Replace the value with your quiz’s id. The easiest way to get it is the Summary tab in the builder, where the Shortcode card copies the whole shortcode with the id filled in. The id can be the quiz’s number or its UUID.

Paste the shortcode into the page where you want the quiz to appear. In the block editor, use a Shortcode block or a paragraph block. Both work in general, but the Shortcode block is the safer choice because it stops the editor from changing your quote marks.

Where shortcodes work

In general, shortcodes work in:

• Pages and posts (classic editor or block editor)
• Text or shortcode widgets in widget areas, such as a sidebar or footer, if your theme and WordPress version support shortcodes there
• Page builder text or shortcode elements

They may not work in places that do not process shortcodes, like some theme option fields, menu labels or plain title fields. If you see the raw text on the page, that is the reason.

Quizably also has two other shortcodes for different display styles: [quizably_quiz_popup id="..."] and [quizably_quiz_slidein id="..."]. Both take a numeric ID or UUID and can open on a click, a delay, a scroll or exit intent. Those are covered in how to show a quiz in a popup in WordPress.

Block or shortcode: which should you pick?

	Block	Shortcode
Best for	Block editor pages and posts	Widget areas, page builders, classic editor
Needs the quiz id	No, you pick from a list	Yes
Preview in the editor	No, a text placeholder	Depends on your editor
Risk of typos	Low	Some: quotes, spelling, id

My rule: use the block when you can, and the shortcode when you cannot. There is no quality difference once it is on the page.

Where on the page should the quiz go?

Placement decides how many people start the quiz. The builder can be perfect and still get little use if the quiz is buried. Here are three placements that work, and when to pick each.

Near the top of a page

If the page exists to get people into the quiz, put the quiz at or near the top. Give it a short heading above it, such as “Which plan fits you?”, and one sentence saying what they get. Visitors should not have to scroll to find the thing the page is about.

Inside a blog post

For a post that covers the same topic, place the quiz after the part where the reader has just learned something and wonders what applies to them. A quiz about choosing a skincare routine fits right after a section on skin types, for example. Mid-article placement tends to feel like a helpful next step instead of an interruption. At the very end of a post also works, but fewer people get that far, so do not put it only there.

On a dedicated page

A dedicated quiz page, such as /find-your-plan/, gives you a clean link to use in your navigation, emails and social posts. It is also easy to measure, since everyone who lands there came for the quiz. If you plan to build a quiz funnel, a dedicated page is usually the right base, and you can still embed the same quiz in posts.

A note about above the fold

“Above the fold” means visible without scrolling. Putting the quiz there on a landing page gives it the best chance of being seen. But do not push the first question above all context. A heading and a line of text before it helps people understand what they are about to do.

Adding a quiz with a page builder

Page builders vary, and the exact steps depend on which one you use and its version. In general terms, there are two ways:

1. A shortcode element. Most builders have a shortcode or text element. Drop one where you want the quiz and paste in the shortcode.
2. An HTML or code element. If there is no shortcode element, an HTML element can work, but only if your builder runs shortcodes inside it. Test it.

If your builder has its own container widths and padding, set the section to full width or a comfortable content width so the quiz does not get squeezed. Quiz styles are scoped to their own CSS classes, so your theme should not restyle the quiz, but the space around it is still controlled by your layout.

Test it on your phone

Do this before you share the page. Most visitors will meet your quiz on a phone.

Open the live page on your phone, not just a narrowed desktop window. Then check:

• The first question fits on the screen without the text being cut off
• Answer buttons are easy to tap with a thumb
• The page does not scroll sideways
• The lead form, if you use one, is easy to fill in and the keyboard does not hide the submit button
• The result screen and its button link work

Then take the quiz to the end, including submitting the form if there is one. That way you know it works from start to result, not just the first screen.

Common problems and fixes

The quiz does not show at all. Check that the quiz is published, not a draft. Then check that the block points to the right quiz, or that the id in the shortcode matches the quiz exactly.

The page shows the shortcode as text. The field you used does not process shortcodes. Move it to a Shortcode block, or a different widget or element.

The shortcode shows an error or nothing. Look for typos. Curly quotes pasted from a document or an email are a common cause. Retype the straight quotes, and check for extra spaces or a missing closing bracket.

An old version of the page appears. Caching plugins and server caching can serve the page as it was before you added the quiz. Clear your cache and view the page in a private window. You may also need to clear any cache at your host or CDN, depending on your setup.

The quiz looks cramped. The space is coming from your layout, not the quiz. Use a full-width or wider section, and remove extra padding around it.

Two quizzes on one page. Test it on your own setup. One quiz per page is the simplest choice, and it is usually better for visitors, because two quizzes compete for attention.

After it goes live

Add the page to your navigation, or link to it from your most visited posts. Then leave it for a week or two and check the quiz analytics in Quizably: starts, completion rate and per-question drop-off. If few people start, the problem is usually placement or the heading above the quiz. If many start but few finish, the problem is inside the quiz.

For more on what to do with those numbers, see which quiz metrics to watch.

Next step

Pick the page that already gets the most visits and is closest in topic to your quiz. Add the block there, publish, and test it on your phone. If you want the quiz to collect emails, read how to make a quiz with email capture in WordPress next. For where the quiz fits in your marketing as a whole, see the quiz marketing guide.