FX Shortcodes

Block-style page layouts for ClassicPress, delivered as shortcodes.

Why this exists

ClassicPress dropped the Gutenberg block editor in favour of the Classic editor. That’s a deliberate choice — but it leaves a gap: the layout primitives that came with blocks (cover, columns, media + text, buttons, accordions, etc.) disappear with them. Themes still know how to style alignfull / alignwide, but there’s no easy way to author those layouts in a Classic post.

FX Shortcodes fills that gap. Every layout block you’d reach for in Gutenberg is available as a shortcode, with the same visual result and the same alignment classes — but authored as plain [element] tags inside the Classic editor.

No JavaScript, no block editor, no React. Just one shortcode and a stylesheet.

How it works

FX Shortcodes Plugin page

Everything goes through one tag: [element]. Set the layout with type="…" (for example type="cover"). Paired blocks close with [/element]. Self-closing void blocks use a trailing slash: [element type="spacer" height="3rem" /].

Because the plugin parses [element] itself (innermost-first), same-name nesting works: you can put [element type="group"] … [/element] inside another group without WordPress closing on the first [/element].

Types (`type` attribute)

`type`	Role
`cover`	Hero / cover
`group`	Generic container
`section`	Same renderer as group (semantic alias)
`columns`	Column row
`column`	Single column
`details`	`<details>`
`accordion`	Alias of details
`media-text`	Media + text
`mediatext`	Alias of media-text
`button`	Button / link
`card`	Card
`spacer`	Spacer (void)
`separator`	Rule (void)
`hr`	Alias of separator
`line`	Decorative line (void)
`colored-line`	Alias of line

Common attributes

These work on (almost) every block type:

Attribute	Accepts	Notes
`class`	space-separated CSS classes	merged onto the wrapper
`id`	string	sets `id="..."` on the wrapper
`tag`	`div` `section` `article` `aside` `header` `footer` `main` `nav` `figure`	wrapper element (where applicable)
`width`	`full` `wide` or any CSS length	`full` → `alignfull`, `wide` → `alignwide`
`align`	`left` `center` `right`	text alignment
`vertical-align`	`top` `center` `bottom`	flex/grid item alignment
`background`	image URL	sets `background-image`
`background-color`	CSS color
`text` / `color`	CSS color	text color (`text=` is the WP-cover-style alias)
`padding`	CSS length / shorthand	e.g. `2rem` or `1rem 2rem`
`margin`	CSS length / shorthand
`gap`	CSS length	flex/grid gap
`border-radius` / `radius`	CSS length
`shadow`	CSS box-shadow value	e.g. `0 4px 20px rgba(0,0,0,.1)`
`min-height`	CSS length
`max-width`	CSS length

Cover

Full-bleed hero with optional background image, color overlay, and parallax.

[element type=”cover” height=”100vh” width=”full” background=”/wp-content/uploads/hero.jpg” overlay=”#000000″ overlay-opacity=”0.4″ text=”#ffffff” align=”center” vertical-align=”center”]
<h1>Welcome</h1>
<p>A short tagline goes here.</p>
[element type=”button” url=”/get-started” style=”fill” size=”large”]Get started[/element]
[/element]

Cover-specific attributes

Attribute	Notes
`background`	background image URL
`overlay`	overlay color (rendered above image)
`overlay-opacity`	`0`–`1`, default `0.5`
`parallax`	`1` / `0` — fixes background-attachment
`focal`	CSS background-position, e.g. `30% 70%`
`height` / `min-height`	becomes `min-height` of the cover

Group

Generic container. Use it for sections of content with a shared background, padding, or layout.

Plain

[element type=”group” background-color=”#f6f6f6″ padding=”3rem 1rem” width=”full”]
<h2>About us</h2>
<p>Long-form text here.</p>
[/element]

Flex layout

[element type=”group” layout=”flex” justify=”space-between” vertical-align=”center” gap=”2rem” padding=”2rem”]
[element type=”card” title=”One”]Lorem ipsum.[/element]
[element type=”card” title=”Two”]Dolor sit amet.[/element]
[element type=”card” title=”Three”]Consectetur.[/element]
[/element]

Grid layout (auto-fit)

[element type=”group” layout=”grid” gap=”1.5rem” padding=”2rem”]
[element type=”card” title=”A”]…[/element]
[element type=”card” title=”B”]…[/element]
[element type=”card” title=”C”]…[/element]
[element type=”card” title=”D”]…[/element]
[/element]

Group-specific attributes

Attribute	Notes
`layout`	`default` (block), `flex`, `grid`
`justify`	`start` `center` `end` `space-between` `space-around`

Columns / Column

Equal columns by default; per-column span overrides flex-basis.

Two equal columns

[element type=”columns” columns=”2″ gap=”2rem”]
    [element type=”column”]
    <h3>Left</h3>
    <p>Some text.</p>
    [/element]
    [element type=”column”]
    <h3>Right</h3>
    <p>Other text.</p>
    [/element]
[/element]

Three columns, no stack on mobile

[element type=”columns” columns=”3″ gap=”1rem” stack=”0″]
    [element type=”column”]One[/element]
    [element type=”column”]Two[/element]
    [element type=”column”]Three[/element]
[/element]

Asymmetric columns (1/3 + 2/3)

[element type=”columns” columns=”2″ gap=”2rem”]
    [element type=”column” span=”33%”]
    <p>Sidebar.</p>
    [/element]
    [element type=”column” span=”67%”]
    <p>Main content area.</p>
    [/element]
[/element]

Columns-specific attributes

Attribute	Notes
`columns`	integer; default `2`
`stack`	`1` / `0` — collapse to single column under 781px (default `1`)
`span` (on `column`)	flex-basis, e.g. `33%`, `400px`

Details / Accordion

Native <details> element. [element type="accordion"] matches [element type="details"] (same renderer).

Closed by default

[element type=”details” summary=”What’s your refund policy?”]
<p>30 days, no questions asked.</p>
[/element]

Open by default

[element type=”accordion” summary=”Important notice” open=”1″]
<p>This panel is expanded on page load.</p>
[/element]

Stack of accordions

[element type=”group” padding=”1rem”]
[element type=”details” summary=”Question 1″]Answer 1.[/element]
[element type=”details” summary=”Question 2″]Answer 2.[/element]
[element type=”details” summary=”Question 3″]Answer 3.[/element]
[/element]

Use a default group (not layout="flex") for a vertical list — flex would put them in a row.

Details-specific attributes

Attribute	Notes
`summary`	the always-visible header text
`open`	`1` / `0` — initial state (default `0`)

Media & Text

Image on one side, text on the other. [element type="mediatext"] matches [element type="media-text"] (same renderer).

Media on the left (default)

[element type=”media-text” media=”/wp-content/uploads/photo.jpg” media-alt=”A photo” media-width=”40%” gap=”2rem”]
<h2>Heading</h2>
<p>Body text alongside the image.</p>
[element type=”button” url=”/learn-more”]Learn more[/element]
[/element]

Media on the right, stacks on mobile

[element type=”media-text” media=”/wp-content/uploads/photo.jpg” media-position=”right” media-width=”50%” stack=”1″ vertical-align=”center”]
<h2>Right-side image</h2>
<p>Stacks vertically below 781px.</p>
[/element]

Crop image to fill

The image stretches to match the height of the text column (like WordPress’ Crop image to fill toggle on the Media & Text block). The image is sized with object-fit: cover, so any aspect-ratio mismatch is cropped, not letter-boxed.

[element type=”media-text” media=”/wp-content/uploads/photo.jpg” media-width=”40%” crop=”1″]
<h2>Cropped image</h2>
<p>The photo on the left now matches the height of this text block, regardless of the image’s natural aspect ratio.</p>
[/element]

Media-text-specific attributes

Attribute	Notes
`media`	image URL
`media-alt`	alt text
`media-position`	`left` (default) or `right`
`media-width`	CSS length; omit or `50%` for equal columns (`1fr` / `1fr`); e.g. `40%` for a narrower media column
`stack`	`1` / `0` — stack at narrow widths (default `1`)
`crop`	`1` / `0` — crop image to fill text column height (`object-fit: cover`); default `0`

Button

Renders an <a> when url is set, otherwise a <button type="button">. Every button has a background color and a text color. On hover both states darken automatically using color-mix(in oklch, ...).

Solid (default)

[element type=”button” url=”/signup”]Sign up[/element]

The default palette is #2271b1 background with white text. Hover darkens the background by 15% in OKLCH space.

Outline, large

[element type=”button” url=”/contact” style=”outline” size=”large”]Contact us[/element]

External link (auto adds `rel="noopener noreferrer"`)

[element type=”button” url=”https://example.com” target=”_blank”]Visit site[/element]

Custom colors — hover darkens automatically

[element type=”button” url=”/buy” background-color=”#222″ color=”#ffd400″ border-radius=”999px” padding=”0.8rem 2rem”]Buy now[/element]

Brand-accent button using a CSS color name

[element type=”button” url=”/launch” background-color=”tomato” color=”white”]Launch[/element]

Button row inside a flex group

[element type=”group” layout=”flex” justify=”center” gap=”1rem”]
[element type=”button” url=”/primary” style=”fill”]Primary[/element]
[element type=”button” url=”/secondary” style=”outline”]Secondary[/element]
[element type=”button” url=”/tertiary” style=”text”]Tertiary[/element]
[/element]

Tweaking the hover strength

The hover darkening percentage is exposed as a CSS variable on .fx-button (--fx-button-darken, default 15%). To override globally:

.fx-button { –fx-button-darken: 25%; }   /* stronger hover darkening */

Button-specific attributes

Attribute	Notes
`url`	href; if omitted, renders a `<button>` instead of `<a>`
`target`	`_blank`, `_self`, etc. — `_blank` auto-adds safe `rel`
`rel`	overrides the auto-rel
`style`	`fill` (default), `outline`, `text`
`size`	`small`, default, `large`
`background-color`	sets `--fx-button-bg`; hover is derived from this
`color` (or `text`)	sets `--fx-button-color`

Browser support: color-mix() requires Chrome 111+, Safari 16.4+, Firefox 113+ (all shipped 2023). On older browsers the hover rule is ignored and the button stays in its base state — still functional, just not animated.

Card

Optional image, title, body content, and an optional whole-card link.

Simple

[element type=”card” image=”/wp-content/uploads/photo.jpg” title=”My Card”]
<p>Card body text.</p>
[/element]

Whole card linked

[element type=”card” image=”/wp-content/uploads/photo.jpg” title=”Read the article” url=”/article-slug”]
<p>Click anywhere on the card to read.</p>
[/element]

Card grid

[element type=”columns” columns=”3″ gap=”1.5rem”]
    [element type=”column”]
    [element type=”card” image=”/img/a.jpg” title=”Alpha” url=”/a”]Short summary.[/element]
    [/element]
    [element type=”column”]
    [element type=”card” image=”/img/b.jpg” title=”Beta” url=”/b”]Short summary.[/element]
    [/element]
    [element type=”column”]
    [element type=”card” image=”/img/c.jpg” title=”Gamma” url=”/c”]Short summary.[/element]
    [/element]
[/element]

Card-specific attributes

Attribute	Notes
`image`	image URL
`image-alt`	alt text
`title`	rendered as `<h3>`
`url`	optional — wraps the card in a link
`target`, `rel`	applied to the wrapping link

Spacer

Invisible vertical (or horizontal) gap. Self-closing form is recommended.

Vertical (default)

[element type=”spacer” height=”3rem” /]

Horizontal (inline)

Some text. [element type=”spacer” direction=”horizontal” width=”2rem” /] More text.

Inside a flex layout

[element type=”group” layout=”flex” vertical-align=”center”]
<span>Left</span>
[element type=”spacer” direction=”horizontal” width=”auto” /]
<span>Right</span>
[/element]

Spacer-specific attributes

Attribute	Notes
`direction`	`vertical` (default) or `horizontal`
`height`	vertical mode size, default `2rem`
`width`	horizontal mode size, default `1rem`

Separator / HR

Visible thematic break (<hr>) with style variants. [element type="hr" /] matches [element type="separator" /] (same renderer).

Default short rule

[element type=”separator” /]

Wide (full-container) rule

[element type=”separator” style=”wide” /]

Dotted

[element type=”hr” style=”dots” /]

Dashed

[element type=”separator” style=”dashed” /]

Double line

[element type=”separator” style=”double” /]

Colored, custom width, left-aligned

[element type=”separator” color=”#c0392b” width=”120px” align=”left” /]

Inside a card

[element type=”card” title=”Section”]
<p>Intro paragraph.</p>
[element type=”separator” style=”dots” /]
<p>Continued content.</p>
[/element]

Separator-specific attributes

Attribute	Notes
`style`	`default` (short), `wide`, `dots`, `dashed`, `double`
`color` (or `text`)	line color
`width`	`full`, `wide`, or any CSS length (length sets the line width directly)
`align`	`left` `center` (default) `right`

Line / Coloured line

A more controllable decorative line than [element type="separator" /]. Renders three nested divs so you can independently control outer padding, horizontal alignment of the bar, and the bar’s own dimensions. Painted via three style variants — striped (default), dotted, shade — using currentColor.

[element type="colored-line" /] matches [element type="line" /] (same renderer).

Striped (default), 256×10px, centred

[element type=”line” style=”striped” height=”10px” width=”256px” padding=”32px 0″ color=”#95afc0″ align=”center” /]

Dotted, full width

[element type=”line” style=”dotted” height=”6px” width=”100%” color=”#222″ /]

Shaded fade-in/fade-out

[element type=”line” style=”shade” height=”2px” width=”60%” color=”#0a0a0a” /]

Solid bar (override `background-color`)

[element type=”line” style=”striped” background-color=”#0a0a0a” color=”#0a0a0a” height=”4px” width=”120px” /]

When you pass a non-transparent background-color you get a solid filled bar in addition to whatever the variant paints over it.

Left-aligned with extra vertical padding

[element type=”line” style=”dotted” align=”left” padding=”48px 0″ height=”8px” width=”200px” color=”#c0392b” /]

Inside a card or section divider

[element type=”card” title=”Specifications”]
<p>Top section.</p>
[element type=”line” style=”shade” height=”1px” color=”#999″ /]
<p>Bottom section.</p>
[/element]

Line-specific attributes

Attribute	Notes
`style`	`striped` (default), `dotted`, `shade`
`height`	bar height; default `1px`
`width`	bar width; default `100%`
`padding`	outer wrapper padding; default `32px 0`
`background-color`	bar background; default `transparent` (variant paints over it)
`color` (or `text`)	drives `currentColor` for `striped` and `dotted`; default `#000000`. The `shade` variant ignores this.
`align`	`left` `center` (default) `right` — sets the bar’s horizontal position via `justify-content`

Nesting

Different type values nest arbitrarily ([element type="group"] containing [element type="columns"] …). Because parsing is innermost-first, [element] inside [element] is fully supported.

[element type=”cover” height=”80vh” width=”full” background=”/img/hero.jpg” overlay=”#000″ overlay-opacity=”0.5″ text=”#fff” align=”center” vertical-align=”center”]
    [element type=”group” max-width=”900px”]
    <h1>Big idea</h1>
    <p>Subtitle.</p>
    [element type=”columns” columns=”2″ gap=”1.5rem”]
        [element type=”column”]
        [element type=”button” url=”/start” style=”fill” size=”large”]Start[/element]
        [/element]
        [element type=”column”]
        [element type=”button” url=”/learn” style=”outline” size=”large”]Learn more[/element]
        [/element]
    [/element]
    [element type=”spacer” height=”2rem” /]
    [element type=”separator” style=”dots” /]
    [/element]
[/element]

Paired vs void tags

Form	Use for
`[element type="cover"]…[/element]` (paired — swap `type` per layout)	cover, group, section, columns, column, details, accordion, media-text, mediatext, button, card
`[element type="spacer" height="3rem" /]` / `[element type="separator" /]` / `[element type="line" /]` …	void blocks — single bracket pair, no closing tag

Self-closing void tags (… /]) are recommended; an empty paired [/element] after a void type is unnecessary.