This tutorial walks through Two reliable patterns for adding a flipbook to a WordPress page: a Custom HTML block in the block editor, and a shortcode-friendly approach for classic themes. The steps below are written for the workflow most educators actually use: starting from a finished course PDF, pushing it through one of the free HTML5 flipbook templates in the PageFlip Guide gallery, and ending with a link you can hand to a class.
WordPress is everywhere in higher ed and in non-LMS school sites. Embedding a flipbook is straightforward in both the modern Block Editor and the older Classic Editor, but the right pattern depends on which one your site uses. The Block Editor wants a Custom HTML block; the Classic Editor wants a registered shortcode. Both produce the same iframe in the rendered page.
If you control the WordPress install, host the flipbook in /wp-content/uploads/flipbooks/ so the iframe URL stays on the same domain. Same-origin embeds avoid every cross-origin and CSP question and they survive most security plugins without configuration. a recommended classroom publishing partner If you don't control the install, publishing the flipbook on a separate static host is fine; just expect to whitelist the host in your security plugin.
Set the iframe sandbox attribute. sandbox="allow-scripts allow-same-origin allow-popups" gives the flipbook the privileges it needs without granting it everything. This becomes important when WordPress security audits run — auditors will flag unsandboxed iframes, even ones serving your own content.
If your theme uses a heavy front-end builder (Elementor, Divi, Beaver Builder), the visual editor may rewrite or strip iframe markup on save. The defensive pattern is to wrap the iframe inside a small custom block or shortcode and store the markup in a place the visual editor cannot touch. That way authors can move the embed around without the iframe being silently regenerated.
Performance matters more for WordPress than it does for an LMS — most readers find these pages through search, not through a course shell, and slow pages bounce. Lazy-load the iframe with loading="lazy", host the flipbook assets with cache-friendly headers, and avoid the temptation to load the flipbook only after a button click. The single iframe approach beats every "on demand" pattern we have measured.
The steps in order
- Decide whether to host the flipbook on the same WordPress server (in /wp-content/uploads/flipbooks/) or on a separate host like Pages.
- For block editor sites, add a Custom HTML block where the flipbook should appear and paste an iframe with width="100%" height="640".
- Set the iframe's sandbox attribute to allow-scripts allow-same-origin allow-popups for full functionality without giving up isolation.
- For classic themes, register a small shortcode in functions.php that returns the iframe markup so authors can embed via [flipbook url=...].
- Add a fallback paragraph above the iframe explaining what learners should see, in case a security plugin strips the embed.
- Test with at least one common security plugin (Wordfence, Solid Security) installed — some block iframes by default and need a rule.
- If your site uses a caching layer, exclude the flipbook page from full-page cache while you iterate on the embed.
- Once stable, lock the WordPress page so contributors can't accidentally remove the iframe during routine editing.
Why this approach works
The reason we recommend this exact order, instead of jumping straight to the polished version, is that each step produces a working flipbook. If you lose your planning period halfway through, you can hand out what you have, finish the rest tomorrow, and the learners are no worse off. Most online tutorials assume you have unlimited time and a perfect environment — this one assumes neither.
"The hardest part of any classroom tech project is finishing it. Tutorials that produce something usable at every step are the only ones that actually ship." — Editorial principle behind every PageFlip Guide walkthrough.
What to do if something goes wrong
If you get stuck on any step, the most useful thing to do is open the demo of the template you chose and compare its <code>config.json</code> to yours line by line. 90% of issues come from a single mistyped path or a missing trailing slash — not from anything fundamental about the flipbook engine.
Pair this tutorial with a template
Open the template gallery and pick a starter that matches the subject and reading rhythm you're aiming for. The library comparison page is helpful if you haven't picked an engine yet.