How to Add DearFlip to Create a Flipbook in WordPress

DearFlip is a WordPress plugin that converts PDF files or image sequences into interactive, page-turning flipbooks rendered directly in the browser using WebGL and CSS3 3D transforms. Instead of forcing visitors to download a static PDF, DearFlip embeds a realistic book-flip experience — complete with page-curl shadows, sound effects, and zoom controls — without requiring Flash or any external dependency.

This guide walks through every stage of the process: installation, global configuration, flipbook creation, embedding, and performance tuning. It also covers the technical edge cases and common pitfalls that most tutorials skip entirely.

Why Flipbooks Matter for WordPress Content Strategy

A flipbook is not just a visual gimmick. For publishers, e-commerce operators, and agencies, it solves a concrete problem: PDFs embedded via <iframe> or Google Docs viewer are unbranded, slow on mobile, and offer no analytics hooks. DearFlip keeps users on your domain, supports deep-linking to specific pages, and integrates with standard WordPress hooks so you can track engagement.

Common use cases include:

• Digital magazines and catalogs where page-by-page navigation mirrors the print experience
• Product lookbooks embedded on WooCommerce category pages
• Annual reports and whitepapers that need to stay on-brand
• Interactive portfolios built from a sequence of high-resolution images
• Training manuals with internal bookmarks and table-of-contents navigation

DearFlip Free vs. Pro: What You Actually Get

Before installing, understand what the free tier limits and where the Pro license unlocks critical features.

For internal documents or low-traffic sites, the free version is fully functional. For client-facing catalogs or gated content, Pro is worth the investment.

Step 1: Install the DearFlip Plugin

1.1 Install from the WordPress Plugin Repository

Log in to your WordPress admin panel and navigate to Plugins > Add New Plugin. In the search field, type DearFlip. Locate the plugin titled DearFlip – 3D Flipbook, PDF Viewer by DearHive and click Install Now, then Activate.

Alternatively, install via WP-CLI if you manage multiple sites or prefer command-line workflows:

wp plugin install dearflip --activate

1.2 Install the Pro Version Manually

If you purchased the Pro license, download the .zip archive from your DearHive account dashboard. Then navigate to Plugins > Add New Plugin > Upload Plugin, select the .zip file, and click Install Now > Activate.

Critical note: Do not install both the free and Pro versions simultaneously. Deactivate and delete the free version before uploading the Pro archive to avoid class conflicts that will throw a fatal PHP error.

1.3 Verify PHP and Server Requirements

DearFlip requires:

• PHP 7.4 or higher (PHP 8.1+ recommended)
• WordPress 5.0+
• GD Library or Imagick enabled on the server (used for thumbnail generation from PDF cover pages)
• allow_url_fopen or cURL enabled (for remote PDF sources in Pro)

If your shared hosting environment lacks Imagick, flipbook cover thumbnails will not generate automatically. Upgrading to a VPS Hosting plan gives you full control over PHP extensions and php.ini directives, which eliminates this class of configuration problem entirely.

Step 2: Configure Global DearFlip Settings

After activation, a DearFlip menu item appears in the left sidebar. Navigate to DearFlip > Settings. These global settings define the default behavior for every flipbook you create — individual flipbooks can override them, but getting the defaults right saves time.

2.1 General Settings

• Page Turn Mode: Choose Single Page for mobile-first layouts or Double Page for magazine-style desktop presentation. Double-page mode splits each PDF spread correctly only if your PDF was exported as spreads, not single pages.
• Flipbook Height: Set a percentage or fixed pixel value. Using 100% with a container div is the most responsive approach.
• Background Color: Match your site's background to avoid a jarring color contrast around the flipbook canvas.

2.2 Control Settings

Enable or disable the following UI controls based on your audience:

• Zoom — Essential for catalogs with fine print; disable for purely visual lookbooks
• Fullscreen — Highly recommended; users expect it
• Page Navigation Controls — Arrow buttons and a page-number input field
• Sound Effects — The page-turn sound adds realism but can be intrusive; leave it opt-in rather than auto-enabled
• Download Button — Disable this if your PDF is proprietary or gated content

2.3 Performance Settings

This is where most tutorials go silent, and where real-world deployments break.

PDF rendering engine: DearFlip renders PDFs client-side using PDF.js (Mozilla's open-source library). This means the entire PDF is transferred to the browser before rendering begins. For a 50-page catalog at 150 KB per page, that is a 7.5 MB initial payload. Mitigate this by:

1. Compressing your PDF with Ghostscript before uploading:

gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/ebook 
   -dNOPAUSE -dQUIET -dBATCH 
   -sOutputFile=compressed_output.pdf input.pdf

1. Enabling Lazy Loading in DearFlip settings so only the first few pages render on initial load.
2. Serving the PDF from a CDN-backed storage bucket rather than directly from your WordPress uploads directory.

WordPress memory limit: PDF.js processing can spike PHP memory usage during thumbnail generation. If you see a white screen or a 500 error after uploading a large PDF, increase the memory limit in wp-config.php:

define( 'WP_MEMORY_LIMIT', '256M' );

Step 3: Create a New Flipbook

Navigate to DearFlip > Add New. This opens the flipbook creation interface, which functions like a custom post type editor.

3.1 Set the Title and Source Type

Enter a descriptive internal title (this is not displayed to visitors by default, but it appears in the shortcode list and admin panel, so be specific: 2025 Spring Catalog rather than Flipbook 1).

In the Source dropdown, select:

• PDF — for a single PDF file (most common)
• Image — for a sequence of JPEG or PNG files
• External URL (Pro only) — to reference a PDF hosted on an external server or CDN

3.2 Upload a PDF

Click Upload PDF and select your file from the Media Library or upload directly from your computer. WordPress's default maximum upload size is often 2 MB, which is insufficient for most catalogs.

To increase the upload limit, add the following to your .htaccess file (Apache) or nginx.conf (Nginx):

Apache .htaccess:

php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

Nginx server block:

client_max_body_size 64M;

After uploading, DearFlip automatically generates a cover thumbnail from the first page using Imagick or GD. If the thumbnail is blank or missing, confirm that your server has Imagick installed:

php -r "phpinfo();" | grep -i imagick

3.3 Upload an Image Sequence

For image-based flipbooks, click Upload Images and select multiple files. The upload order determines page order. A reliable workflow is to name your files sequentially before uploading (page-001.jpg, page-002.jpg, etc.) so the filesystem sort order matches your intended sequence.

Supported formats: JPEG, PNG, WebP (WebP support depends on your server's GD or Imagick version).

Recommended image specifications:

• Resolution: 1200 x 1600 px (portrait) or 1600 x 1200 px (landscape)
• Color profile: sRGB (CMYK images will render with incorrect colors in browsers)
• File size per image: Under 200 KB after compression; use tools like cwebp or jpegoptim

3.4 Per-Flipbook Customization Options

Each flipbook has its own settings that override the global defaults:

• Page Width / Height: Set explicit dimensions if the flipbook must fit a specific layout column
• Auto Flip: Enables automatic page turning at a defined interval (in seconds). Use sparingly — auto-flip is disorienting for content-heavy pages
• Start Page: Specify which page opens first, useful for deep-linking campaigns
• Skin: Select a visual theme (light, dark, or custom in Pro)
• Flipbook Thumbnail: Upload a custom cover image that appears before the user clicks to open the flipbook

3.5 Publish the Flipbook

Click Publish. WordPress saves the flipbook as a custom post type entry. The shortcode is immediately visible on the right-hand side of the editor, formatted as:

[dflip id="123"]

Where 123 is the WordPress post ID assigned to that flipbook. Note this ID — you will need it for embedding.

Step 4: Embed the Flipbook on a Page or Post

4.1 Using the Gutenberg Block Editor

Navigate to Pages > Add New or open an existing page. In the block editor, click the + icon to add a new block. Search for Shortcode and select it. Paste the shortcode:

[dflip id="123"]

You can also use the dedicated DearFlip block if it appears in your block library after activation — this provides a visual preview in the editor itself.

4.2 Using the Classic Editor

Open the page or post in the Classic Editor. Switch to the Text tab (not Visual) to paste the shortcode directly into the HTML. Pasting in the Visual tab can cause WordPress's wpautop filter to wrap the shortcode in <p> tags, which occasionally breaks the flipbook container dimensions.

4.3 Embedding with a Custom HTML Block

For precise layout control, wrap the shortcode in a custom HTML block with explicit dimensions:

<div>
  [dflip id="123"]
</div>

This prevents the flipbook from stretching to full viewport width on ultra-wide monitors.

4.4 Shortcode Parameters for Advanced Embedding

DearFlip's shortcode accepts inline parameters that override both global and per-flipbook settings:

[dflip id="123" width="900" height="600" mode="2d" autoplay="1" duration="5"]

Key parameters:

4.5 Embedding in a Widget or Sidebar

DearFlip shortcodes work in any widget area that supports shortcode rendering. Navigate to Appearance > Widgets, add a Text or Custom HTML widget, and paste the shortcode. Note that sidebar flipbooks should use constrained dimensions (width="300") to avoid layout overflow.

Step 5: Performance, SEO, and Accessibility Considerations

5.1 SEO Implications of PDF Flipbooks

Google can index PDF content directly when the file is publicly accessible, but it cannot index content rendered by JavaScript (PDF.js) in the same way. If SEO discoverability of the flipbook content matters, consider:

1. Publishing the same content as an HTML page alongside the flipbook
2. Adding a text-based table of contents below the flipbook embed
3. Using the og:image meta tag to set the flipbook cover as the social share image

5.2 Core Web Vitals Impact

A flipbook embed introduces a significant JavaScript payload (PDF.js is approximately 300 KB minified). To protect your Largest Contentful Paint (LCP) and Total Blocking Time (TBT) scores:

• Load the flipbook only on pages where it is the primary content, not on your homepage
• Use DearFlip's Lightbox Mode, which loads the flipbook only when a user clicks a thumbnail, deferring the full JavaScript bundle until interaction
• Enable WordPress caching and serve static assets through a CDN

A well-configured VPS with cPanel lets you fine-tune PHP-FPM worker pools, enable OPcache, and configure Nginx as a reverse proxy — all of which compound into measurably faster flipbook load times compared to shared environments.

5.3 Accessibility

DearFlip's default implementation has limited keyboard navigation support. For WCAG 2.1 compliance:

• Enable the Table of Contents feature (Pro) so screen readers can navigate by chapter
• Provide an alternative download link to the original PDF below the flipbook
• Set descriptive alt text on the flipbook thumbnail image

5.4 Mobile Rendering

On mobile, 3D page-flip effects are GPU-intensive. DearFlip automatically falls back to a 2D swipe mode on devices with limited WebGL support. Test your flipbook on actual mobile hardware — not just browser DevTools — because WebGL behavior varies significantly between Android Chrome and iOS Safari.

Step 6: Managing Multiple Flipbooks

As your library grows, the DearFlip > All Flipbooks list becomes your management hub. Each entry shows the flipbook title, shortcode, and publication status.

Practical management tips:

• Use a consistent naming convention that includes the content type and date: Catalog-Spring-2025, Report-Annual-2024
• Assign WordPress categories or tags to flipbooks if you have more than ten — DearFlip supports taxonomy filtering in the Pro version
• When updating a flipbook (new PDF version), replace the source file rather than creating a new flipbook entry; the shortcode ID stays the same, so all existing embeds update automatically
• Regularly audit unpublished or draft flipbooks and delete unused PDF files from the Media Library to avoid bloating your storage quota

If you are running a content-heavy site with dozens of flipbooks and large PDF assets, consider a Dedicated Servers plan to ensure consistent I/O performance and avoid the noisy-neighbor effect common on shared infrastructure.

Troubleshooting Common DearFlip Issues

Flipbook Shows a Blank White Canvas

Cause: The PDF failed to load, typically due to a CORS policy blocking the PDF URL, an incorrect file path after a site migration, or a PHP memory exhaustion during rendering.

Fix: Open the browser console (F12 > Console). If you see a CORS error, ensure the PDF is served from the same domain as WordPress. If you see a 404, verify the attachment URL in the Media Library. If you see a PHP fatal error, increase WP_MEMORY_LIMIT.

Page-Flip Animation is Choppy or Laggy

Cause: The PDF pages are too large (high-resolution images embedded in the PDF), or the device GPU cannot handle WebGL compositing.

Fix: Compress the PDF before uploading (see the Ghostscript command in Step 2.3). Switch the flipbook to mode="2d" for users on low-powered devices.

Shortcode Renders as Plain Text

Cause: The theme or a page builder is stripping shortcode processing, or the shortcode was pasted inside a code block rather than a shortcode block.

Fix: Ensure the shortcode is inside a Shortcode block in Gutenberg, not a Code block or Paragraph block. In the Classic Editor, confirm you are in Text mode, not Visual mode, when pasting.

Thumbnail Not Generating

Cause: Imagick or GD is not installed, or the PDF uses a non-standard encoding that neither library can parse.

Fix: Install Imagick via your server's package manager:

sudo apt-get install php-imagick
sudo systemctl restart php8.1-fpm

Alternatively, upload a custom thumbnail image manually in the flipbook settings.

Flipbook Not Displaying on HTTPS Sites

Cause: The PDF is being served over HTTP while the page is HTTPS, triggering a mixed-content browser block.

Fix: Ensure your WordPress Site URL and WordPress URL are both set to https:// in Settings > General. Run a search-replace on the database to update all attachment URLs:

wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --skip-columns=guid

Pairing this with a properly issued SSL Certificates ensures all assets — including PDFs stored in wp-content/uploads — are served over a secure connection without mixed-content warnings.

Advanced Configuration: Hosting PDFs on External Storage

For production deployments with large PDF libraries, storing PDFs directly in wp-content/uploads is inefficient. A better architecture:

1. Upload PDFs to an S3-compatible object storage bucket (Cloudflare R2, Backblaze B2, or AWS S3)
2. Configure a CDN distribution in front of the bucket
3. In DearFlip Pro, use the External URL source type and point to the CDN URL of each PDF
4. Set Cache-Control: public, max-age=31536000 headers on the CDN for PDF assets

This architecture decouples your WordPress server's disk I/O from PDF delivery, dramatically reducing server load during traffic spikes and keeping your WordPress database lean.

If your use case involves generating PDFs dynamically (from user-submitted data or templated reports), pair this setup with a VPS Hosting plan where you can install Puppeteer, wkhtmltopdf, or WeasyPrint as server-side PDF generation tools, then push the output directly to object storage.

Decision Matrix: When to Use DearFlip vs. Alternatives

Technical Key-Takeaway Checklist

Before going live with a DearFlip flipbook, verify each item:

• PHP version is 7.4 or higher; Imagick extension is loaded
• Upload size limits in .htaccess or nginx.conf match your largest PDF file size
• PDF is compressed to under 10 MB for typical catalogs; use Ghostscript for batch compression
• WP_MEMORY_LIMIT is set to at least 256M in wp-config.php
• HTTPS is enforced site-wide and all PDF URLs use https://; mixed-content errors will silently break the flipbook
• Lightbox mode is enabled for flipbooks that are not the primary page content, to defer JavaScript loading
• A plain-text or HTML alternative exists for the flipbook content if SEO indexability matters
• Mobile rendering tested on real iOS and Android devices, not just browser DevTools
• Custom thumbnail uploaded for each flipbook to improve click-through rate on archive or landing pages
• Unused flipbooks and orphaned PDFs are deleted from the Media Library to keep storage clean

FAQ

Does DearFlip work with password-protected PDFs?

No. PDF.js, which DearFlip uses for rendering, cannot decrypt password-protected PDFs. Remove PDF-level password protection before uploading. If you need access control, use DearFlip Pro's built-in flipbook password feature instead, which gates the embed itself rather than the underlying file.

Can I use DearFlip with a page builder like Elementor or Divi?

Yes. Both Elementor and Divi include a Shortcode widget. Paste the [dflip id="123"] shortcode into that widget. DearFlip Pro also ships a native Elementor widget that provides visual configuration without shortcodes.

Will DearFlip slow down my entire WordPress site?

Only on pages where the flipbook is embedded. DearFlip enqueues its JavaScript and CSS globally by default. To restrict asset loading to flipbook pages only, add the following to your theme's functions.php:

add_filter( 'dflip_load_scripts', function( $load ) {
    return is_singular() && has_shortcode( get_post()->post_content, 'dflip' );
});

How many flipbooks can I create with the free version?

The free version imposes no hard limit on the number of flipbooks. The practical constraints are storage space and the absence of Pro features like password protection and analytics.

What happens to my flipbooks if I deactivate the DearFlip plugin?

The flipbook custom post type entries remain in the WordPress database, but the shortcodes will render as empty strings on the front end. The uploaded PDF files remain in the Media Library. Reactivating the plugin restores all flipbooks immediately without data loss.