Title: Sticky Copy Button for Code Blocks
Author: Kasuga
Published: 23. august 2025
Last modified: 20. mars 2026
---
Søk gjennom innstikk
# Sticky Copy Button for Code Blocks
Av [Kasuga](https://profiles.wordpress.org/kasuga16/)
[Last ned](https://downloads.wordpress.org/plugin/stick-copy-button-codeblock.1.5.1.zip)
* [Detaljar](https://nn.wordpress.org/plugins/stick-copy-button-codeblock/#description)
* [Omtalar](https://nn.wordpress.org/plugins/stick-copy-button-codeblock/#reviews)
* [Installasjon](https://nn.wordpress.org/plugins/stick-copy-button-codeblock/#installation)
* [Utvikling](https://nn.wordpress.org/plugins/stick-copy-button-codeblock/#developers)
[Hjelp](https://wordpress.org/support/plugin/stick-copy-button-codeblock/)
## Skildring
**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.
### 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**
**Code block max height (px)**
Sets a maximum height (minimum: 100px). Content
taller than this becomes scrollable.
**Enable**
Must be checked for the value to apply.
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.
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
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.
### 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
## Skjermbilete
* [[
* Plugin settings screen
* [[
* Button display in an actual blog post
* [[
* Line numbers displayed on a code block.
## Installasjon
1. Upload via WordPress Dashboard:
2. – 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.
3. Manual Installation via FTP:
4. – 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.
## Vanlege spm.
### Which code blocks does this plugin support?
It supports only code blocks marked up in the `pre > code` format.
## Omtalar
### [Simple and works well](https://wordpress.org/support/topic/simple-and-works-well-56/)
[Jon Henshaw](https://profiles.wordpress.org/jonhenshaw/) 26. desember 2025
This is an excellent companion to the native code block in WordPress. It adds a
code button inside the code block, which I prefer so it doesn’t take up too much
room. I had to add some CSS overrides in my theme to maintain the appearance of
my code block style, and to move the button to the far right of the block where
I wanted it. I’m giving it 4 stars because of that, but I otherwise would have given
it 5 stars for ease of use. /* Removes 50px padding added by the plugin’s CSS */.
code-block-wrapper { padding-right: 0 !important; }/* Forces the button to move
to the right after removing the 50px padding */.copy-code-btn { right:4px !important;}
[ Les 1 omtale ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/)
## Bidragsytarar og utviklarar
“Sticky Copy Button for Code Blocks” is open source software. The following people
have contributed to this plugin.
Contributors
* [ Kasuga ](https://profiles.wordpress.org/kasuga16/)
[Omset “Sticky Copy Button for Code Blocks” til ditt eige språk.](https://translate.wordpress.org/projects/wp-plugins/stick-copy-button-codeblock)
### Interested in development?
[Les kjeldekoden](https://plugins.trac.wordpress.org/browser/stick-copy-button-codeblock/),
sjekk [SVN-lageret](https://plugins.svn.wordpress.org/stick-copy-button-codeblock/)
eller abonner på [utviklingsloggen](https://plugins.trac.wordpress.org/log/stick-copy-button-codeblock/)
med [RSS](https://plugins.trac.wordpress.org/log/stick-copy-button-codeblock/?limit=100&mode=stop_on_copy&format=rss).
## Endringslogg
#### 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.
## Om
* Version **1.5.1**
* Last updated **3 veker sidan**
* Active installations **30+**
* WordPress version ** 5.0 eller nyare **
* Tested up to **6.9.4**
* PHP version ** 7.4 eller nyare **
* Language
* [English (US)](https://wordpress.org/plugins/stick-copy-button-codeblock/)
* Tags
* [button](https://nn.wordpress.org/plugins/tags/button/)[code](https://nn.wordpress.org/plugins/tags/code/)
[copy](https://nn.wordpress.org/plugins/tags/copy/)[easy](https://nn.wordpress.org/plugins/tags/easy/)
* [Avansert vising](https://nn.wordpress.org/plugins/stick-copy-button-codeblock/advanced/)
## Vurderingar
4 out of 5 stars.
* [ 0 5-star reviews ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=5)
* [ 1 4-star review ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=4)
* [ 0 3-star reviews ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=3)
* [ 0 2-star reviews ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=2)
* [ 0 1-star reviews ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=1)
[Legg til vurderinga mi](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/#new-post)
[See all reviews](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/)
## Contributors
* [ Kasuga ](https://profiles.wordpress.org/kasuga16/)
## Hjelp
Har du noko å seia? Treng du hjelp?
[Sjå hjelpeforumet](https://wordpress.org/support/plugin/stick-copy-button-codeblock/)
## Donate
Would you like to support the advancement of this plugin?
[ Donate to this plugin ](https://www.paypal.me/kasuga16)