MF Flipping

English · Türkçe

Publish PDF magazines in WordPress as a page-turning reader.

Pages are converted to images ahead of time, so visitors never download the PDF — only the images for the pages they actually open. No dependencies: there is no third-party flipbook library, no canvas and no WebGL. The page turn is a self-contained engine built on CSS 3D transforms.

• Version: 1.3.7
• Requires: WordPress 5.0+, PHP 7.4+
• License: GPL-2.0-or-later

---

What it does

The plugin registers an "Issue" post type and serves three addresses:

Address	What it shows
/magazine/	Issue archive — a cover grid. You can also hand the address to a page of your own.
/magazine/issue-42/	Issue page: inside your theme, reader embedded
/magazine/issue-42/read/	Reader mode: no header, no footer — the magazine fills the screen

Covers in the grid link straight to reader mode.

The URL base is configurable; it ships as dergi (Turkish for "magazine") and can be changed in the settings or with a filter.

The reader

Turning. In two-page mode each leaf carries two pages, and the cover stands alone. It switches to single-page mode by itself on narrow screens and portrait stages, and the selector in the bottom bar lets you set it by hand.

Drag a corner to turn. Grab the outer edge of a page and drag: the page lifts from that corner. The fold line is the perpendicular bisector of the grabbed corner and the pointer; the lifted part is reflected across that line and shows the back of the sheet. The crease gets a gradient shadow and the page underneath is shaded. Paper does not stretch — the grabbed corner cannot travel further from the spine corner than the page is wide. Pure CSS and JS, no canvas.

Navigation. A page slider with a thumbnail bubble while dragging, a clickable counter for jumping to a page number, a lazily loaded page grid, a reading progress bar, a resume-where-you-left-off prompt, and sharing a link to the open page.

Zoom. Double-click zooms toward the pointer, Ctrl + wheel and two-finger pinch work, and you pan by dragging while zoomed.

Memory. The reader only renders the few leaves around your position and keeps the rest out of the render tree entirely. The number of composited layers and the memory footprint stay constant regardless of page count, so a several-hundred-page issue still opens on a phone.

Keyboard and mouse

Key	Action
← → PageUp PageDown Space	Turn the page
Home End	First / last page
+ −	Zoom in / out
0	Fit to screen
T	Page grid
F	Fullscreen
?	Shortcut card
Esc	Closes the panel, then the zoom, then reader mode

In reader mode and fullscreen the wheel turns pages; in an embedded reader the wheel is left to the page's own scrolling. On touch devices, a horizontal swipe turns the page.

When prefers-reduced-motion is set, the turn animation and corner dragging are disabled and pages change instantly.

Two source modes

Upload page images yourself — Convert the pages to images on your own machine and upload them to the media library. Nothing is required on the server.

Upload a PDF and let the plugin render the pages — If the server has Imagick with Ghostscript, the plugin converts the PDF. Rendering advances request by request, so it does not time out on shared hosting.

The mode is chosen per issue.

Installation

Copy the plugin into:

wp-content/plugins/mf-flipping/

Activate it from the Plugins screen; a Dergi (Magazine) entry appears in the admin menu.

Rewrite rules refresh themselves whenever the version or the address changes — you do not need to re-save permalinks by hand.

Shortcodes

Cover grid

[mf_flipping_archive]
[mf_flipping_archive count="8" columns="4"]
[mf_flipping_archive ids="12,18,24"]
[mf_flipping_archive link="post" target="_self"]

Attribute	Default	What it does
count	12	How many issues to list
columns	4	Column count (drops to 2 on mobile)
order	DESC	Date order
ids	—	Specific issues, in the order you write them
meta	1	The page-count line
link	reader	reader for reader mode, post for the issue's own page
target	_blank	Whether to open in a new tab

Embedded reader

[mf_flipping id="123"]
[mf_flipping id="123" height="640" download="1"]

Attribute	Default	What it does
id	—	Required. The issue ID
height	82vh	Reader height (px or any CSS unit)
download	Issue setting	The PDF download button
class	—	Your own CSS class

Both shortcodes work everywhere, including WPBakery's Text Block, Elementor's Shortcode widget and the classic editor. Assets are enqueued during wp_head, before the shortcode runs, which avoids a flash of unstyled content and the problems that late-enqueued stylesheets cause with caching plugins.

Settings

Dergi → Ayarlar has three tabs: Settings (render quality, speed, address structure, template preference), Shortcodes (copyable examples and attribute tables) and Issues (ID, page count, shortcode, reader link).

The sidebar reports the server's Imagick/PDF/WebP support, how much disk the library uses, and the current addresses. It warns you if a real directory or a conflicting page shares the address — those two are by far the most common reasons an address returns 403 or the wrong content.

Address structure

There are two modes. In slug mode the plugin renders the archive. In page mode a WordPress page of your choosing owns the address: it opens with its own design, you build the listing by dropping [mf_flipping_archive] into it, and issues are published beneath it. In page mode the plugin turns its own archive off, so a "page or archive?" conflict cannot arise in the first place.

Hooks

// Stop appending the reader to the issue page automatically
add_filter( 'mf_flipping_auto_append', '__return_false' );

// Change the address base from code (overrides the settings field)
add_filter( 'mf_flipping_slug', function ( $base ) { return 'magazine'; } );

// Reader mode URL
add_filter( 'mf_flipping_reader_url', function ( $url, $issue_id ) { return $url; }, 10, 2 );

// The configuration handed to the reader
add_filter( 'mf_flipping_viewer_config', function ( $config, $issue_id, $atts ) { return $config; }, 10, 3 );

// Force the assets on (when the shortcode lives in a widget or template part)
add_filter( 'mf_flipping_enqueue_style', '__return_true' );
add_filter( 'mf_flipping_enqueue_script', '__return_true' );

// Add to the reader-mode template (analytics, fonts)
add_action( 'mf_flipping_reader_head', function ( $issue_id ) {} );
add_action( 'mf_flipping_reader_footer', function ( $issue_id ) {} );

Theming

Colours and measurements are CSS custom properties:

.mf-flip {
    --mfp-bg: #0e1013;
    --mfp-accent: #b8873f;
    --mfp-height: 78vh;
    --mfp-flip-duration: 0.6s;
}

File layout

mf-flipping.php                      Plugin entry, asset registration, install hooks
includes/
  class-mf-flipping-cpt.php          Post type, address base, cover helpers
  class-mf-flipping-renderer.php     PDF → image conversion, page store
  class-mf-flipping-reader.php       Reader-mode URL and template routing
  class-mf-flipping-shortcode.php    [mf_flipping] and [mf_flipping_archive]
  class-mf-flipping-templates.php    Issue/archive template selection
  class-mf-flipping-settings.php     Settings store and validation
  class-mf-flipping-admin.php        Meta box, settings screen, AJAX
templates/
  reader.php                         Reader mode: standalone, full-screen document
  single-mf_issue.php                Issue page (optional)
  archive-mf_issue.php               Archive (optional)
assets/
  css/mf-flipping.css                Reader and cover grid
  css/mf-flipping-admin.css          Admin interface
  js/mf-flipping.js                  Turn engine, corner drag, interface
  js/mf-flipping-admin.js            Issue edit meta box
  js/mf-flipping-copy.js             Settings tabs and code copying

Development notes

• No build step. The scripts are plain ES5 with no external dependencies; files are loaded as they are.
• On the admin side only WordPress's own wp.media and jQuery are used.
• Strings are translatable through the mf-flipping text domain. The interface ships in Turkish.
• The reader-mode template never calls wp_head() — the page carries only the plugin's own stylesheet and script. To replace it, drop mf-flipping/reader.php into your theme.

Documentation

• README.tr.md — this document in Turkish
• KURULUM.md — detailed setup and usage guide (Turkish)