FlippedWP Documentation

Overview

FlippedWP adds interactive 3D flip cards to WordPress content and sidebars. Cards use CSS3 3D transforms and jQuery-driven interaction logic. You can build cards manually with shortcodes or visually with the built-in generator.

What FlippedWP does

Creates two-sided cards (front + back) with arbitrary HTML content.
Supports nested shortcodes inside both faces.
Supports hover, click, button-only, and auto-flip trigger modes.
Supports four flip directions: right, left, top, bottom.
Provides global defaults and per-card overrides.
Includes a live shortcode generator and a sidebar widget.

Key strengths

Per-card customization (not limited to one global style).
Separate front/back background image support.
Background repeat / size / position controls.
Rich editing in generator (WYSIWYG + text color + insert image).
Widget and shortcode use the same renderer for consistency.
Assets are only enqueued when a card/widget is present on the request.

FlippedWP targets modern browsers and uses CSS3 3D transforms. It does not include legacy IE fallback behavior.

Requirements

WordPress 4.9+ (compatible through 6.0.x per project target).
PHP environment supported by your WordPress install.
JavaScript enabled on the front-end for interactive flipping behavior.
Modern browser support for CSS3 transforms and backface-visibility.

The plugin is shortcode/widget-based and does not include a Gutenberg block.

Installation

Install from ZIP

In WordPress admin, go to Plugins -> Add New -> Upload Plugin.
Upload your flippedwp plugin ZIP file.
Click Install Now, then Activate Plugin.

After activation

Open the new left sidebar menu: FlippedWP.
The default tab is Generator (live preview + shortcode builder).
Configure site-wide defaults in the Global Settings tab if needed.

Admin Interface

FlippedWP adds its own top-level admin menu item in the left panel: FlippedWP.

Generator (default tab)

Behavior settings (type, direction, auto timings)
Layout settings (width, height, ratio, float, margin, padding)
Style settings (border, radius, text color, text alignment)
Backgrounds card (background color, front/back images, repeat, size, position)
Front Content and Back Content WYSIWYG editors
Live Preview panel + generated shortcode + Copy Shortcode button

Global Settings

Uses the WordPress Settings API and stores defaults in flippedwp_defaults.
Applies defaults to all cards unless overridden by shortcode attributes or widget values.
Includes trigger, direction, timing, layout, text, and background-related defaults.

The Generator is intended for fast visual authoring. It updates the preview live and produces a ready-to-paste [flippedwp_card] shortcode.

Generator Workflow

Open FlippedWP -> Generator.
Set card behavior (trigger mode + flip direction).
Set dimensions and spacing under Layout.
Set borders/text under Style.
Set background color and optional front/back images under Backgrounds.
Edit Front Content and Back Content in the WYSIWYG editors.
Preview the result live in the right-hand panel.
Copy the generated shortcode and paste it into a post, page, or supported widget area.

Generator editor notes

The Front/Back editors include media buttons (insert image) and text color controls.
The preview supports hover/click/button/auto behaviors to match front-end behavior.
The preview panel is sticky on wider admin screens for easier editing.

Shortcodes

FlippedWP supports only these shortcode names:

[flippedwp_card]
[flippedwp_front] (inside [flippedwp_card] only)
[flippedwp_back] (inside [flippedwp_card] only)

[flippedwp_front] and [flippedwp_back] are capture shortcodes and only work when nested inside [flippedwp_card]. Outside the parent, they intentionally return nothing.

Basic syntax

[flippedwp_card type="over" direction="right" width="320px" height="220px"]
[flippedwp_front]
Front HTML here
[/flippedwp_front]
[flippedwp_back]
Back HTML here
[/flippedwp_back]
[/flippedwp_card]

Button trigger example

[flippedwp_card type="button" direction="left" width="100%" height="240px"]
[flippedwp_front]
<h3>Product Summary</h3>
<a href="#" class="flippedwp-flip-button">More Details</a>
[/flippedwp_front]
[flippedwp_back]
<p>Only the button flips this card.</p>
<a href="#" class="flippedwp-flip-button">Back</a>
[/flippedwp_back]
[/flippedwp_card]

Per-face background images example

[flippedwp_card type="click" direction="top" width="100%" height="280px"
backgroundimagefront="https://example.com/front.jpg"
backgroundimageback="https://example.com/back.jpg"
backgroundsize="cover" backgroundrepeat="no-repeat" backgroundposition="center center"
padding="0" color="#ffffff"]
[flippedwp_front]
<div style="padding:16px;background:rgba(0,0,0,.55);display:inline-block;border-radius:8px;">
Front overlay text
</div>
[/flippedwp_front]
[flippedwp_back]
<div style="padding:16px;background:rgba(0,0,0,.55);display:inline-block;border-radius:8px;">
Back overlay text
</div>
[/flippedwp_back]
[/flippedwp_card]

Nested shortcodes inside faces

FlippedWP runs do_shortcode() on each face after capture, so nested shortcodes inside the front or back content are executed.

Attribute Reference

All card attributes are strings. Global defaults are loaded from flippedwp_defaults and then overridden by shortcode attributes for each card.

Attribute	Default	Accepted values	Notes
`type`	`over`	`over`, `click`, `button`, `auto`	Determines the flip trigger behavior.
`direction`	`right`	`right`, `left`, `top`, `bottom`	Controls rotation axis/direction.
`autoflip`	`3000`	Positive integer (ms)	Interval used when `type="auto"`.
`autoflipstart`	`0`	Integer (ms, 0+)	Start delay before auto flipping begins.
`float`	`none`	`none`, `left`, `right`	Applies CSS float on the card wrapper.
`margin`	`0 0 20px 0`	1-4 CSS box values (lengths, optional `auto`)	Outer spacing for the card.
`width`	`320px`	CSS size value, supports units and `auto`	Card width.
`height`	`220px`	CSS size value, supports units and `auto`	Card height.
`ratio`	`""`	`W:H` (e.g. `16:9`) or decimal ratio	Used to calculate missing width/height in some cases.
`border`	`1px solid #dddddd`	CSS border shorthand	Applied to the outer card wrapper.
`borderradius`	`8px`	CSS radius value(s)	Applied to the card and both faces.
`padding`	`16px`	1-4 CSS box values	Applied to both faces.
`background`	`#ffffff`	Hex, rgb(a), hsl(a), some named colors	Background color for both faces.
`backgroundimagefront`	`""`	Image URL	Preferred per-face front background image.
`backgroundimageback`	`""`	Image URL	Preferred per-face back background image.
`backgroundrepeat`	`no-repeat`	`no-repeat`, `repeat`, `repeat-x`, `repeat-y`, `space`, `round`	Applied to face background images.
`backgroundsize`	`cover`	`cover`, `contain`, `auto`	Applied to face background images.
`backgroundposition`	`center center`	Preset positions (e.g. `center center`, `left top`)	Applied to face background images.
`color`	`#222222`	Hex, rgb(a), hsl(a), some named colors	Text color for both faces.
`textalign`	`left`	`left`, `center`, `right`, `justify`, `start`, `end`	Text alignment for both faces.
`backgroundimage`	`""`	Image URL	Legacy shared background image (still supported for compatibility; use front/back attributes for new cards).

Trigger mode behavior details

over: flips on mouse enter and resets on mouse leave.
click: flips on click/tap anywhere on the card.
button: flips only when clicking an element with class flippedwp-flip-button inside the card.
auto: starts after autoflipstart, flips repeatedly every autoflip ms, and pauses on hover/focus then resumes on leave.

Ratio Behavior

ratio is used only when it can safely calculate a missing dimension from a provided one.

If ratio is set and only width is provided, FlippedWP calculates height = width / ratio.
If ratio is set and only height is provided, FlippedWP calculates width = height * ratio.
If parsing units is ambiguous, the plugin will not calculate the missing dimension.

Supported ratio formats

16:9, 4:3, 3:4
Decimal values such as 1.7778 or 1.2

Widget (FlippedWP Card)

FlippedWP includes a classic WordPress widget named FlippedWP Card for sidebars and widget areas.

Where to add it

Appearance -> Widgets
Or the theme Customizer widgets panel (theme-dependent)

Widget fields

Optional Title
Type, Direction
Autoflip interval and start delay
Width, Height, Margin, Padding
Background color, Text color
Border, Border radius, Text align, Float
Front background image URL / Back background image URL
Background repeat / size / position
Front content (HTML + shortcodes)
Back content (HTML + shortcodes)

The widget uses the same front-end renderer as the shortcode, so output behavior and styling are consistent across content areas and sidebars.

Front-End Markup

FlippedWP renders stable markup with flippedwp-* classes and data-flippedwp-* attributes used by the front-end script.

<div class="flippedwp-card flippedwp-type-{type} flippedwp-dir-{direction}"
     data-flippedwp-type="{type}"
     data-flippedwp-direction="{direction}"
     data-flippedwp-autoflip="{autoflip}"
     data-flippedwp-autoflipstart="{autoflipstart}"
     aria-expanded="false">
  <div class="flippedwp-inner">
    <div class="flippedwp-face flippedwp-front">...</div>
    <div class="flippedwp-face flippedwp-back">...</div>
  </div>
</div>

Relevant CSS/JS hooks

.flippedwp-card (perspective container)
.flippedwp-inner (3D transform wrapper)
.flippedwp-face, .flippedwp-front, .flippedwp-back
.flippedwp-is-flipped (toggled by JS to trigger rotation)
.flippedwp-flip-button (button trigger mode click target)

Performance / Asset Loading

FlippedWP registers CSS and JS assets normally on wp_enqueue_scripts.
It enqueues them only when a card/widget is actually rendered during the request.
It also includes a late footer asset print safeguard for cases where rendering happens after wp_head.

This helps avoid loading front-end assets on pages that do not use FlippedWP cards.

Troubleshooting

Card does not flip

Confirm JavaScript is not blocked by a theme/plugin conflict.
Check that the page includes at least one rendered FlippedWP card (assets load only when needed).
For type="button", ensure the clickable element has class flippedwp-flip-button.

Front/back shortcodes output nothing

Make sure [flippedwp_front] and [flippedwp_back] are nested inside [flippedwp_card].
Check for malformed shortcode closing tags.

Background image text is hard to read

Use a bright text color (color) and/or add an overlay wrapper inside the face HTML.
Example: <div style="background:rgba(0,0,0,.55);padding:12px;border-radius:8px;display:inline-block;">...</div>

Auto mode flips too quickly / too slowly

Adjust autoflip (interval in ms) and autoflipstart (initial delay in ms).

Generator preview differs from theme front-end spacing

The generator preview is accurate for FlippedWP behavior, but surrounding theme CSS may affect layout in content areas.
Use shortcode attributes like margin, width, height, and float to fit the target layout.

Updates (Envato Market)

FlippedWP updates are delivered through the official Envato Market WordPress plugin (the same method Envato uses for ThemeForest/CodeCanyon items).

1) Install the Envato Market plugin

Download envato-market.zip:
https://envato.github.io/wp-envato-market/dist/envato-market.zip
In WordPress admin go to Plugins -> Add New -> Upload Plugin.
Upload envato-market.zip, click Install Now, then Activate.

2) Connect your Envato account (Personal Token)

In WordPress admin, open Envato Market.
Click Generate a personal token (or open https://build.envato.com/create-token/).
Create a token and enable ONLY these permissions:
- View and search Envato sites
- Download your purchased items
- List purchases you've made
Copy the token (it is shown once), paste it into the Envato Market settings, and Save.

3) Update FlippedWP

When a new FlippedWP version is published on CodeCanyon, WordPress will show an update notice. Update it from Dashboard -> Updates (or the Plugins screen) like any other plugin.

FAQ

Can I have different card styles on the same site?

Yes. Global settings are defaults only. Each shortcode card (and widget instance) can override behavior, direction, sizing, colors, images, timing, and more.

Can I use images only (no text)?

Yes. You can place images directly inside front/back content, or use per-face background images and keep the face content empty or minimal.

Can I combine image backgrounds with readable text?

Yes. The recommended approach is to add an inner overlay element (semi-transparent background) inside each face so text remains readable over photos.

Do nested shortcodes run inside the faces?

Yes. FlippedWP captures the face content and then executes do_shortcode() on each face before rendering.

Does the plugin include a widget?

Yes. It includes the FlippedWP Card widget for sidebars and widget areas.