Title: Sticky Copy Button for Code Blocks
Author: Kasuga
Published: 23 agosto, 2025
Last modified: 20 março, 2026
---
Pesquisar plugins
# Sticky Copy Button for Code Blocks
Por [Kasuga](https://profiles.wordpress.org/kasuga16/)
[Baixar](https://downloads.wordpress.org/plugin/stick-copy-button-codeblock.1.5.1.zip)
* [Detalhes](https://br.wordpress.org/plugins/stick-copy-button-codeblock/#description)
* [Avaliações](https://br.wordpress.org/plugins/stick-copy-button-codeblock/#reviews)
* [Instalação](https://br.wordpress.org/plugins/stick-copy-button-codeblock/#installation)
* [Desenvolvimento](https://br.wordpress.org/plugins/stick-copy-button-codeblock/#developers)
[Suporte](https://wordpress.org/support/plugin/stick-copy-button-codeblock/)
## Descrição
**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
## Capturas de tela
* [[
* Plugin settings screen
* [[
* Button display in an actual blog post
* [[
* Line numbers displayed on a code block.
## Instalação
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.
## Perguntas frequentes
### Which code blocks does this plugin support?
It supports only code blocks marked up in the `pre > code` format.
## Avaliações
### [Simple and works well](https://wordpress.org/support/topic/simple-and-works-well-56/)
[Jon Henshaw](https://profiles.wordpress.org/jonhenshaw/) 26 dezembro, 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;}
[ Leia a 1 avaliação ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/)
## Colaboradores e desenvolvedores
“Sticky Copy Button for Code Blocks” é um programa de código aberto. As seguintes
pessoas contribuíram para este plugin.
Colaboradores
* [ Kasuga ](https://profiles.wordpress.org/kasuga16/)
[Traduzir o “Sticky Copy Button for Code Blocks” para seu idioma.](https://translate.wordpress.org/projects/wp-plugins/stick-copy-button-codeblock)
### Interessado no desenvolvimento?
[Navegue pelo código](https://plugins.trac.wordpress.org/browser/stick-copy-button-codeblock/),
consulte o [repositório SVN](https://plugins.svn.wordpress.org/stick-copy-button-codeblock/)
ou assine o [registro de desenvolvimento](https://plugins.trac.wordpress.org/log/stick-copy-button-codeblock/)
por [RSS](https://plugins.trac.wordpress.org/log/stick-copy-button-codeblock/?limit=100&mode=stop_on_copy&format=rss).
## Registro de alterações
#### 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.
## Meta
* Versão **1.5.1**
* Última atualização **2 semanas atrás**
* Instalações ativas **30+**
* Versão do WordPress ** 5.0 ou superior **
* Testado até **6.9.4**
* Versão do PHP ** 7.4 ou superior **
* Idioma
* [English (US)](https://wordpress.org/plugins/stick-copy-button-codeblock/)
* Tags
* [button](https://br.wordpress.org/plugins/tags/button/)[code](https://br.wordpress.org/plugins/tags/code/)
[copy](https://br.wordpress.org/plugins/tags/copy/)[easy](https://br.wordpress.org/plugins/tags/easy/)
* [Visualização avançada](https://br.wordpress.org/plugins/stick-copy-button-codeblock/advanced/)
## Classificações
4 de 5 estrelas.
* [ 0 avaliação com 5 estrela ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=5)
* [ 1 avaliação com 4 estrela ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=4)
* [ 0 avaliação com 3 estrela ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=3)
* [ 0 avaliação com 2 estrela ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=2)
* [ 0 avaliação com 1 estrela ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=1)
[Adicionar minha avaliação](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/#new-post)
[Ver todas avaliações](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/)
## Colaboradores
* [ Kasuga ](https://profiles.wordpress.org/kasuga16/)
## Suporte
Tem algo a dizer? Precisa de ajuda?
[Ver fórum de suporte](https://wordpress.org/support/plugin/stick-copy-button-codeblock/)
## Doar
Gostaria de contribuir para o desenvolvimento deste plugin?
[ Doe para este plugin ](https://www.paypal.me/kasuga16)