Description
This plugin adds a convenient copy button to every code block on your blog posts, allowing users to copy code with a single click.
Highlights:
-
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.
Screenshots
Plugin settings screen 
Button display in an actual blog post
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.
FAQ
-
Which code blocks does this plugin support?
-
It supports code blocks marked up in the
pre > codeformat. -
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;
}
-
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Sticky Copy Button for Code Blocks” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Sticky Copy Button for Code Blocks” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
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.