Sticky Copy Button for Code Blocks Reviews, Downloads & Maintenance

Easy One-Click Copying: Your blog visitors can instantly copy code to their clipboard by simply clicking a button on any code block.
Flexible Customization: From a dedicated settings page, you can freely adjust the button’s position, size, color, and labels (for both before and after copying) to perfectly match your site’s design.
Lightweight and Fast: The plugin only loads the necessary CSS and JavaScript, ensuring it won’t impact your site’s performance.

This plugin makes it super easy for your blog visitors to grab code snippets. By adding a simple copy button to every code block, it boosts convenience and makes your code content much more user-friendly.

Installation

Upload via WordPress Dashboard:

– In your WordPress dashboard, go to ‘Plugins’ ‘Add New’.
– Search for “stick-copy-button-codeblock” and click ‘Install Now’.
– Click ‘Activate’ once the installation is complete.
– (Optional) Go to ‘Settings’ ‘Stick Copy Button’ to configure options.
Manual Installation via FTP:

– Download the plugin’s zip file and extract it.
– Connect to your server via FTP and navigate to the “wp-content/plugins/” directory.
– Upload the extracted “stick-copy-button-codeblock” folder to this directory.
– Go to ‘Plugins’ in your WordPress dashboard and activate the plugin.
– (Optional) Go to ‘Settings’ ‘Stick Copy Button’ to configure options.

Frequently Asked Questions

Which code blocks does this plugin support?

It supports code blocks marked up in the pre > code format.

Can I control the height of the code blocks?

Yes, you can set a maximum height by specifying the number of lines in the plugin settings. If the content exceeds this height, a vertical scroll bar will automatically appear.

Can I add custom styles?

Yes, you can enter custom CSS to further style the copy button or code blocks in the Custom Styles (CSS) section of the settings menu.
Any CSS added here will be applied on the frontend.

Usable Selectors:
.copy-code-btn The copy button
.copy-code-btn.copied The button after Copying
.code-block-wrapper Wrapper of the code block (position: relative)
.code-block-wrapper pre Inner code text area (the <pre> element)
Example:
.copy-code-btn {
font-family: "Comic Sans MS", cursive;
font-weight: 700;
}

Review feed

No reviews available

Screenshots

Plugin settings screen
Button display in an actual blog post

Changelog

1.2.0

Added support for limiting code block height by line count.
Added a Custom CSS option, allowing users to apply their own CSS to further style the copy button or code blocks.

1.1.0

Changed button size adjustment from size selector to numeric input.

1.0.1

Minor bug fixes

1.0.0

Initial release
Optimized and fixed code for official distribution.
Added internationalization support.

Back to plugins