Category: Appearance

AI Transparency

Simone Fioravanti

Adds a visual disclosure badge to images that have been generated or manipulated using artificial intelligence.

AI Transparency is a ClassicPress plugin that adds a visual disclosure badge to images that have been generated or manipulated using artificial intelligence.

The plugin associates AI information with media attachments and can display an AI disclosure badge automatically on the frontend.

Features

Mark an image as:
- AI generated
- AI manipulated
- AI generated and manipulated
Configure the AI disclosure behavior for each image:
- Automatic
- Required
- Disabled
Display a visual AI badge on disclosed images.
Provide an accessible screen-reader description.
Use CSS to customize the appearance and color of the AI badge.
Keep the AI classification associated with the WordPress media attachment.

Usage

1. Classify an image

Go to Media → Library in list view and edit an image.

You will find an AI content field with the following options:

Not AI-generated or manipulated
AI generated
AI manipulated
AI generated and manipulated

Select the appropriate value and save the attachment.

2. Configure the disclosure

The AI disclosure field controls whether the visual disclosure is displayed.

Available options:

Automatic

The plugin determines whether a disclosure should be displayed by applying the ai_transparency_automatic_disclosure filter.

By default, automatic mode does not display a disclosure.

This behavior can be customized by a theme or another plugin. The filter receives both the current disclosure value and the attachment ID.

For example, to always display the disclosure when the setting is Automatic:

add_filter(
    'ai_transparency_automatic_disclosure',
    '__return_true'
);

Required

Always display the AI disclosure badge for the image.

Disabled

Do not display the AI disclosure badge for the image, even if the image has an AI classification.

3. Display on the frontend

When disclosure is required, the plugin wraps the image with markup similar to:

<span class="ai-content ai-logo ai-generated">
    <span class="screen-reader-text">
        Content generated with artificial intelligence
    </span>

    <img src="..." alt="...">
</span>

The exact HTML may depend on how the image is rendered by WordPress or the theme.

The plugin currently handles images generated through wp_get_attachment_image() and images found in post/page content.

CSS customization

The AI badge can be customized using CSS.

The main class for customizing the logo is:

.ai-logo

Change the logo color

Add the following CSS to your theme’s custom CSS:

.ai-logo {
    color: #0066cc;
}

The SVG uses currentColor, so changing the color property changes the color of the logo without modifying the SVG file.

Different colors for different AI classifications

The plugin also adds a class corresponding to the AI classification.

You can therefore use different colors for each type:

.ai-generated {
    color: #7c3aed;
}

.ai-manipulated {
    color: #2563eb;
}

.ai-generated-and-manipulated {
    color: #dc2626;
}

You can also combine the classes explicitly if you want to avoid affecting other elements:

.ai-logo.ai-generated {
    color: #7c3aed;
}

.ai-logo.ai-manipulated {
    color: #2563eb;
}

.ai-logo.ai-generated-and-manipulated {
    color: #dc2626;
}

The latter form is recommended.

Changing the badge size

The default badge size is controlled by the width and height properties of .ai-content::after.

For example:

.ai-content::after {
    width: 32px;
    height: 32px;
}

You can use relative units if preferred:

.ai-content::after {
    width: 2.5rem;
    height: 2.5rem;
}

Changing the badge position

The default position is the bottom-right corner:

.ai-content::after {
    right: 0.5rem;
    bottom: 0.5rem;
}

For example, to move it to the top-right:

.ai-content::after {
    top: 0.5rem;
    right: 0.5rem;
    bottom: auto;
}

CSS classes

The plugin uses the following classes:

Class	Purpose
`.ai-content`	Main wrapper around a disclosed image
`.ai-logo`	Identifies the AI disclosure badge
`.ai-generated`	Image was generated using AI
`.ai-manipulated`	Image was manipulated using AI
`.ai-generated-and-manipulated`	Image was both generated and manipulated using AI

These classes are intentionally exposed so themes and plugins can customize the appearance without modifying the plugin itself.

Accessibility

The plugin adds a visually hidden text description to the disclosed image.

For example:

<span class="screen-reader-text">
    Content generated with artificial intelligence
</span>

This provides a textual description for users who cannot see the visual badge.

The AI badge itself is decorative and does not rely solely on color to communicate its meaning.

SVG logo

The AI logo is stored in assets/images/ai-logo.svg.

The SVG is monochromatic and uses currentColor for its visible elements.

The frontend currently uses the SVG as a CSS mask. This allows the logo color to be controlled through the .ai-logo CSS class without modifying the SVG.

If you replace the SVG, keep it monochromatic and ensure that the visible shape works correctly as a mask.

Customizing the logo with a theme

A theme can override the default appearance without modifying the plugin.

For example:

.ai-logo {
    color: #222;
}

.ai-content::after {
    width: 2rem;
    height: 2rem;
    right: 0.75rem;
    bottom: 0.75rem;
}

This CSS can be added using:

Appearance → Customize → Additional CSS

or through the theme’s stylesheet, depending on the theme.

If it’s not working in your theme

Under Tools → AI Transarency you can toggle those hooks without writing code.

Those three hooks let you enable stronger images detection.

If you prefer using the hooks directly, remember to use a priority greater that 10.

Processing post content

By default, AI Transparency processes images through the standard ClassicPress
image-related filters.

Some themes and page builders, however, generate image markup directly and
may not provide an attachment ID or use the standard wp-image-ID class.

For this reason, processing the complete post content can be enabled with:

add_filter(
    'ai_transparency_process_content',
    '__return_true'
);

Matching images by URL

When processing the_content, the plugin normally identifies images using the WordPress attachment class:

wp-image-123

Some themes and page builders may generate image markup without this class.

URL matching can optionally be enabled with the
ai_transparency_match_content_images_by_url filter:

add_filter(
    'ai_transparency_match_content_images_by_url',
    '__return_true'
);

Processing the final HTML output

Some themes generate featured images and other images directly in their
templates instead of using post_thumbnail_html() or including them in
the_content.

For these cases, an optional final-output processor is available:

add_filter(
    'ai_transparency_process_output',
    '__return_true'
);

Lazy-loaded images

AI Transparency can identify images whose actual URL is stored in a lazy-loading HTML attribute instead of the src attribute.

By default, the following attributes are checked, in this order:

data-src
data-lazy-src
data-original
src

This is useful for themes and plugins that initially load a placeholder image and store the actual image URL in a data-* attribute.

Adding custom lazy-loading attributes

add_filter(
	'ai_transparency_lazyload_attributes',
	function ( $attributes ) {
		$attributes[] = 'data-lazy';

		return $attributes;
	}
);

FX Shortcodes

Ciprian Popescu

Block-style layout shortcodes (cover, group, columns, details, media-text, button, card) for ClassicPress. One shortcode, many types, fully nestable.

Download

More Info

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

Plugin page: https://getbutterfly.com/classicpress-plugins/fx-shortcodes/
Demo: https://studio.getbutterfly.com/fx-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

Everything goes through a single shortcode: [element]. The type attribute picks the layout:

[element type="cover" background="/hero.jpg" overlay="#000" overlay-opacity="0.4"]
  <h1>Welcome</h1>
[/element]

Self-closing void blocks use a trailing slash:

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

Because the plugin parses [element] itself (innermost-first, before WordPress’ shortcode regex runs), same-name nesting works — you can drop an [element type="group"] inside another [element type="group"] without WordPress closing on the first [/element].

Available types

Type	Role
`cover`	Full-bleed hero with background image (`<img>`), overlay
`group` (alias `section`)	Generic container with optional flex / grid layout
`columns` + `column`	Equal or asymmetric column rows
`details` (alias `accordion`)	Native `<details>` element
`media-text` (alias `mediatext`)	Image on one side, text on the other; supports “crop image to fill”
`button`	`<a>` or `<button>` with fill / outline / text variants and OKLCH hover
`card`	Image + title + body, optionally a whole-card link
`spacer`	Invisible vertical or horizontal gap (void)
`separator` (alias `hr`)	Thematic break with style variants (void)
`line` (alias `colored-line`)	Decorative striped / dotted / shaded line (void)

All types accept a shared set of common attributes — width (full / wide / CSS length), align, vertical-align, background-color, padding, margin, gap, border-radius, shadow, etc. — plus a few type-specific ones.

Install

Drop the fx-shortcodes folder into wp-content/plugins/.
Activate it from the Plugins screen.
Open Settings → FX Shortcodes for the full reference with code samples for every shortcode.