Shortcodes Guide — Copy Anything to Clipboard

# What are Shortcodes?

Shortcodes are WordPress macros that let you add dynamic content using simple tags. The [copy] shortcode adds a copy button to any content you wrap it around.

When to Use Shortcodes Use shortcodes when you need precise control over individual copy buttons in your content. For automatic copy buttons on all elements of a type, use Global Injector instead.

Easy to Use

Wrap content with [copy]...[/copy]; no coding required

Customizable

Control text, style, and behavior

Works Everywhere

Posts, pages, widgets, builders

# 1 Basic Usage

Add a copy button anywhere by wrapping your text between [copy] and [/copy].

Basic Syntax

[copy]npm install clipboard[/copy]

Example

In the editor

W

Edit Mode

Saved

My Page

Shortcode

[copy]npm install clipboard[/copy]

On the frontend

Preview

Browser

npm install clipboard

How it works What you put between the tags is both the visible label and what gets copied—unless you use the text attribute to copy something different.

# 2 All Attributes

Customize the shortcode behavior with these attributes.

Reference for all [copy] shortcode attributes: name, default value, and description.
Attribute	Default	Description
text	`""`	Value copied to clipboard. If empty, inner content is copied.
display	`inner content or text`	Visible label. When inner content is present, it is used; otherwise `text`.
preset	`inline`	Style: `inline`, `button`, `icon`, `cover`
button-text	`"Copy"`	Button label (for `preset="button"` or cover)
success-text	`"Copied!"`	Message shown after copy (alias: `copied-text`)
content	`""`	Legacy: when set, this is copied and `text` is the visible label
tag	`span`	Use `a` for link-style (theme styling); otherwise `span`
copy-as	`text`	Copy format: `text` or `html`
redirect	`""`	URL to open after copying (new tab). Use this in new shortcodes.
link	`""`	Same as `redirect`. Kept for backward compatibility.
class	`""`	Custom CSS class(es)
id	`""`	Custom ID attribute

# 3 Examples

Copy these examples to get started quickly.

Coupon Code

Popular

Show the code and copy it on click. For a button label, use preset="button" with button-text.

In the editor

W

Edit Mode

Saved

Coupon Page

Shortcode

[copy]SAVE20[/copy]

On the frontend

Preview

Browser

SAVE20

Button style: [copy preset="button" text="SAVE20" button-text="Copy Code"] → blue button “Copy Code” that copies SAVE20.

Code Snippet

Wrap the command or snippet; it is shown and copied.

In the editor

W

Edit Mode

Saved

Docs

Shortcode

[copy]npm install @clipboard/react[/copy]

On the frontend

Preview

Browser

npm install @clipboard/react

Email Address

Same as coupon: wrap the value so it is shown and copied.

In the editor

W

Edit Mode

Saved

Contact

Shortcode

[copy][email protected][/copy]

On the frontend

Preview

Browser

[email protected]

Icon Style (Minimal)

Only the copy icon is shown; text is the value copied.

In the editor

W

Edit Mode

Saved

Promo

Shortcode

[copy preset="icon" text="PROMO50"]

On the frontend

Preview

Browser

Copies PROMO50 when clicked.

Copy & Redirect

Use preset="button" so text is copied and button-text is the label; link opens after copy.

In the editor

W

Edit Mode

Saved

Deal

Shortcode

[copy preset="button" text="DEAL50" button-text="Copy & Go to Store" link="https://store.com"]

On the frontend

Preview

Browser

Copies DEAL50, then opens the link in a new tab.

Next step

In WordPress, add the shortcode using the Shortcode block (Block Editor) or an HTML/shortcode widget in classic editor or page builders.

# 4 Styling

Customize the appearance of your copy buttons with CSS classes or inline styles.

Can I style the copy button? Yes. Use attributes like button-text, copied-text, and CSS classes. See the All Attributes table above for full options.

Using Custom Classes

Add custom CSS classes to style your copy buttons.

[copy class="my-custom-btn highlight"]Content[/copy]

Then define .my-custom-btn in your theme's CSS.

Default CSS Classes

These classes are automatically added and can be targeted with CSS.

Default CSS classes applied by the shortcode for styling.
Class	Applied To
.ctc-shortcode	Main wrapper (all presets)
.ctc-shortcode--inline	Inline preset
.ctc-shortcode--button	Button preset
.ctc-shortcode--icon	Icon preset
.ctc-shortcode__icon	Icon element
.ctc-shortcode--copied	Added briefly after successful copy

# 5 Advanced Usage

Power user techniques for complex use cases.

Copy as HTML

Preserve HTML formatting when copying (useful for rich text).

[copy copy-as="html"]<strong>Bold text</strong> and <em>italic</em>[/copy]

Render as Button Element

Use preset="button" for a semantic button; text is copied, button-text is the label.

[copy preset="button" text="code here" button-text="Copy Snippet"]

Combining Multiple Attributes

Use preset="button" with text (copy payload), button-text, success-text, link, and class.

[copy preset="button" text="PROMO2024" button-text="Copy & Visit" success-text="Copied! Redirecting..." link="https://example.com" class="promo-btn"]

Using in Page Builders

Shortcodes work in most page builders.

Elementor: Use the Shortcode widget or HTML widget
Beaver Builder: Use the HTML module
Divi: Use the Code module or Text module
Gutenberg: Use the Shortcode block

# 6 Troubleshooting

Common issues and how to fix them.

Shortcode shows as plain text

Ensure the plugin is activated
Check for typos in the shortcode name
Make sure you're using square brackets [ ]
Verify shortcodes are enabled for your content type

Copy button doesn't work

Check for JavaScript errors in browser console (F12)
Ensure no conflicting JavaScript from other plugins
Verify the site uses HTTPS (required for clipboard API)
Clear browser and plugin caches

Styling looks wrong

Check for theme CSS conflicts
Use browser DevTools to inspect applied styles
Add more specific CSS selectors to override
Use !important if necessary

Special characters not copying correctly

Use HTML entities for special characters
Use the text attribute to specify exact copy text
Avoid smart quotes from word processors