=== Sticky Copy Button for Code Blocks === Contributors: Kasuga16 Donate link: https://www.paypal.me/kasuga16 Tags: code, copy, button, line-numbers, easy Requires at least: 5.0 Requires PHP: 7.4 Tested up to: 6.9 Stable tag: 1.6.0 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: stick-copy-button-codeblock Domain Path: /languages Adds a floating "Copy" button to every code block, with extensive styling options, optional line numbers, max-height control, and custom CSS support. == Description == **Sticky Copy Button for Code Blocks** automatically adds a floating copy button to each `
` block on your website.
It provides convenient front-end copying for developers, readers, and tutorial users.
== Features ==
This plugin is light, fast, and highly customizable:
- Adjustable button position (up/down and left/right)
- Customizable labels (“Copy” / “Copied”)
- Adjustable font size
- Background color, text color, or transparent mode
- Max-height option for large code blocks (with scroll support)
- **Optional line numbers** (simple native implementation)
- Custom CSS that is safely sanitized
No dependencies such as Prism or Highlight.js are required.
== Installation ==
1. 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.
2. 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.
== Detailed Settings Guide ==
The following explains **every option** in the plugin settings page.
---
### 1. **Button Position**
**Adjust vertical position (top offset in px)**
Moves the button up or down relative to the top of the code block.
Use positive or negative values to fine-tune vertical alignment.
**Adjust horizontal position (right offset in px)**
Moves the button left or right by adjusting how far it sits from the right edge of the code block.
Use positive or negative values to fine-tune horizontal alignment.
These values help fine-tune button alignment to avoid overlapping with theme elements.
---
### 2. **Button Text and Behavior**
**Copy button label**
The label shown normally (default: “Copy”).
**Label after copying (2 seconds)**
Once the text is copied, the button temporarily displays this label.
Default: “Copied”.
---
### 3. **Button Size**
**Button size (8–36 px)**
Controls the font size of the button.
Padding is automatically adjusted based on this value.
---
### 4. **Button Colors**
**Button text color**
Hex color of button text.
**Button background color**
Hex background color.
When copying, the plugin automatically swaps the text and background colors for visual feedback.
However, if the background is transparent, only the text color is swapped.
**Always transparent background**
If enabled:
- The button background always becomes transparent.
- Only text + border remain visible
---
### 5. **Code Block Max Height**
**Enable**
Must be checked for the value to apply.
**Code block max height (px)**
Sets a maximum height (minimum: 100px).
Content taller than this becomes scrollable.
This prevents long code blocks from stretching your page layout.
---
### 6. **Display Line Numbers**
**Display Line Numbers (Enable)**
Shows simple line numbers next to each line. You can also fine-tune the position of the line numbers (offset adjustment is available).
Notes:
- Line height is unified for consistency.
- Theme-specific code styling is preserved.
- Line wrapping is forcibly disabled.
This is a built-in lightweight alternative to syntax-highlighter libraries.
---
### 7. **Custom Styles (CSS)**
You can add any custom CSS to adjust:
- Button design
- Wrapper layout
- Code spacing
- Line number appearance
Optionally, you can enable **"Add !important to CSS declarations automatically"** to force your custom styles to take effect even when the theme's CSS has higher specificity.
Usable Selectors (CSS) :
- **.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 `` element)
- **.line-numbers** → The container holding the line numbers
- Example:
`.copy-code-btn {`
`font-family: "Comic Sans MS", cursive;`
`font-weight: 700;`
`border: none;`
`}`
Note: Do not include any comments.
== Frequently Asked Questions ==
= Which code blocks does this plugin support? =
It supports only code blocks marked up in the `pre > code` format.
== Screenshots ==
1. Plugin settings screen
2. Button display in an actual blog post
3. Line numbers displayed on a code block.
== Changelog ==
= 1.6.0 =
* Refactored CSS settings for broader theme compatibility.
* Improved stability of line number display.
* Added line number offset adjustment option.
* Added automatic !important appending feature for custom CSS.
= 1.5.1 =
* Minor fix to the conditional script loading logic introduced in 1.5.0.
= 1.5.0 =
* Load scripts only when code blocks are detected.
= 1.4.0 =
* Added an option to display line numbers.
* Minor bug fixes.
* Updated readme.txt.
= 1.3.0 =
* Changed the method for limiting code block height from line count to pixel-based sizing.
* Minor bug fixes.
= 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 style the copy button or code blocks.
= 1.1.0 =
* Changed button size settings from a size selector to a numeric input field.
* Minor improvements and cleanup.
= 1.0.1 =
* Minor bug fixes
= 1.0.0 =
* Initial release
* Optimized and fixed code for official distribution.
* Added internationalization support.
== Donate ==
If you find this plugin useful and would like to support its development,
you can make a voluntary donation via PayPal.
Your support helps keep this plugin maintained and improved.
Thank you!
PayPal: https://www.paypal.me/Kasuga16