Folio3D for WordPress

Turn PDFs and images into realistic 3D flipbooks on your WordPress site. Upload a file, publish, and insert the book with a block or a shortcode. No coding required.

Requirements: WordPress 6.2 or newer, PHP 8.0 or newer, a modern browser for your visitors.

Installation

In your Codester download, find folio3d.zip. Do not unzip it.
In WordPress go to Plugins → Add New → Upload Plugin, choose folio3d.zip and click Install Now.
Click Activate. A new Flipbooks menu appears in the admin.

If the upload fails with “The link you followed has expired”, your server’s upload limit is too small. Upload the unzipped folio3d folder to wp-content/plugins/ by FTP instead, then activate it.

Your first book

Go to Flipbooks → Add New and enter a title.
Under Book content choose PDF file and click Choose PDF, or choose Images and click Add pages. Each image is one page; drag pages to reorder them, or focus a page and use ← →.
Optionally set a Featured image. It becomes the cover in bookshelves and cover cards. Image books use their first page when no featured image is set.
Click Publish. The Embed box now shows ready-to-copy shortcodes.

Every book also has its own page at /flipbook/your-book-slug/, which is handy for sharing a direct link.

PDF or images? Use a PDF when you want searchable text, the table of contents and clickable links. Use images (JPG, PNG or WebP, at least 1600 px wide) for photo books or when you only have page images.

Showing a book

Display	When to use
Inline viewer	The book is the main content of the page.
Cover	A 3D cover card; clicking it opens the book in a full-screen lightbox. Good inside articles and grids.
Button / link	A call to action, e.g. “Read the catalog”, that opens the lightbox.
Bookshelf	A grid of covers for all your publications or a selection of them.

Shortcodes

Shortcode	Result
`[folio3d id="12"]`	Inline viewer
`[folio3d id="12" height="80vh"]`	Custom height (px, vh, %, em, rem)
`[folio3d id="12" page="5"]`	Open at page 5
`[folio3d id="12" lightbox="cover"]`	Cover card that opens a lightbox
`[folio3d id="12" lightbox="button" text="Read the catalog"]`	Button that opens a lightbox
`[folio3d id="12" lightbox="link" text="Open"]`	Text link that opens a lightbox
`[folio3d id="12" class="my-book"]`	Extra CSS class on the container
`[folio3d_shelf]`	Bookshelf of the 12 newest books
`[folio3d_shelf ids="12,15,18" columns="3"]`	Chosen books, in this order, 3 per row (1–6)
`[folio3d_shelf limit="24" columns="4"]`	More books per shelf

Shortcodes work in the classic editor, the Shortcode block, widgets and page builders. For example, in Elementor use the Shortcode widget.

The Flipbook block

In the block editor click + and search for Flipbook.
Choose a book in the block, then pick Display in the sidebar: inline viewer, cover, button or text link.
For the inline viewer you can set a height; for buttons and links, the text.
The block supports Wide and Full alignment.

The editor shows a preview card; the interactive book appears on the published page.

Settings

Flipbooks → Settings holds the defaults for every book:

Setting	What it does
View mode	Automatic (realistic 3D when the device supports WebGL, otherwise light 3D), Realistic 3D, Light 3D or Swipe.
Page layout	Automatic (two pages on wide screens, one on phones), always two pages, or always one page.
Theme	Follow the visitor’s system (light/dark), or always light or dark.
Accent color	Color of buttons, progress bar and highlights.
Default height	Height of inline viewers, e.g. `640px` or `80vh`.
Flip duration	Page turn speed in milliseconds (900 by default).
Page turn sound	A soft paper sound. Readers can mute it in the viewer menu.
First page alone	Shows page 1 on its own, like a closed book’s cover.
Page number in the address bar	Keeps `#book-wp-12=5` in the URL so readers can share a link to a page.
Toolbar	Turn individual features on or off: thumbnails, contents, search, bookmarks, reader mode, share, download, print, fullscreen, view mode and theme switches.
PDF engine	Bundled (default): pdf.js ships with the plugin, so no external service is contacted. cdnjs loads it from the cdnjs CDN instead.

Per-book options

The Display box on each book overrides the global settings for that book: view mode, layout, theme, accent color, height, start page, right-to-left reading (Arabic, Hebrew, manga) and autoplay with an interval in seconds. Leave a field on “Default” to use the global setting.

For your readers

Turn pages by dragging a page corner, swiping, clicking the page sides, the arrows or the keyboard: ← →, Home End.
Zoom with the buttons, Ctrl + mouse wheel or pinch; drag to pan. Esc resets the zoom.
The side panel has page thumbnails, contents, search and bookmarks.
The ⋯ menu has autoplay, sound, reader mode, share, download, print, view mode and theme.
Bookmarks and the last page read are remembered in the reader’s browser. When they return, they are offered to continue where they left off.

Languages

The admin is translation-ready (text domain folio3d), and an English template plus a full Russian translation are included in languages/. Translate it with Loco Translate or Poedit, starting from folio3d.pot. The viewer follows the site language automatically and includes English and Russian.

Support

Support is provided through Codester: use the support section on the item page and include your site URL and, if relevant, the PDF that causes the problem.

Developers

The folio3d_book_options filter receives the options passed to the viewer, so anything from the JavaScript API can be set per book:

add_filter( 'folio3d_book_options', function ( $opts, $post_id, $atts ) {
    $opts['flipDuration'] = 700;
    $opts['hotspots'] = [
        [ 'page' => 3, 'type' => 'video', 'url' => 'https://www.youtube.com/watch?v=VIDEO_ID',
          'x' => .1, 'y' => .4, 'w' => .8, 'h' => .3 ],
    ];
    return $opts;
}, 10, 3 );

Books are a custom post type folio_book. Assets load only on pages that show a book. The viewer is an EventTarget: Folio3D.instances holds the viewers on the page, and you can listen for pagechange, ready and other events.

FAQ

The book doesn’t appear

Check that the book is published and has a PDF or images. Logged-in editors see a short notice when something is missing. If you use a caching or “optimize JS” plugin, exclude folio3d scripts from combining and deferring.

My PDF is large

Pages load as they are needed, so large PDFs open quickly. Your server must still allow uploading the file: raise upload_max_filesize or upload by FTP and add the file to the Media Library with a media-import plugin.

Can I use a PDF from another site?

Upload it to your Media Library. Browsers block reading PDFs from other domains unless that server sends CORS headers.

Does it work with page builders?

Yes. Use the shortcode in your builder’s Shortcode widget.

Uninstall

Deleting the plugin removes its settings. Your books, PDFs and images stay in WordPress, so reinstalling brings every book back.

Changelog

1.0.0 — initial release

Credits

pdf.js by Mozilla, Apache License 2.0, bundled in assets/vendor/pdfjs/.
All other code, icons, the synthesized page sound and the demo content are original to Folio3D by Codestan.