Mustapha Samios

MD Click Copyboard is a powerful WordPress plugin that allows you to create beautiful, customizable click-to-copy input boxes for sharing information on your website. Whether you need to share API keys, passwords, code snippets, email addresses, or any other content, this plugin makes it easy and elegant.
Perfect for: 
* Documentation sites 
* Client portals 
* API documentation 
* Support sites 
* Developer resources 
* Sharing sensitive information securely
<h3>Features</h3>
<h4>Core Functionality</h4>
<ul>
<li>Custom Post Type Management – Dedicated admin interface for managing copy elements</li>
<li>Shortcode Support – Simple <code>[mdcc id="123"]</code> shortcode syntax</li>
<li>Visual Feedback – Clear visual indicators when content is copied</li>
<li>Fallback Support – Works with modern Clipboard API and older browsers</li>
<li>Non-Intrusive – Doesn’t interfere with existing WordPress functionality</li>
</ul>
<h4>Customization Options</h4>
<ul>
<li>Button Location: Choose between “Inside Input Box” or “Outside Input Box”</li>
<li>Button Styles: Three options – Icon Only, Text Only, or Icon and Text</li>
<li>Input Styles: Label above the content or label inside (left aligned)</li>
<li>Label Control: Show or hide labels completely for a clean look</li>
<li>Auto-sizing: Automatic height calculation for single-line and multi-line content</li>
</ul>
<h4>User Experience</h4>
<ul>
<li>Modern Design – Clean, professional appearance that blends with any theme</li>
<li>Responsive – Works perfectly on desktop, tablet, and mobile devices</li>
<li>Accessible – Keyboard navigation and screen reader support</li>
<li>Fast Performance – Optimized database queries for lightning-fast load times</li>
<li>WordPress Native – Follows WordPress coding standards and best practices</li>
</ul>
<h4>Security</h4>
<ul>
<li>Sanitized Output – All user input is properly sanitized and escaped</li>
<li>Nonce Verification – All form submissions are verified with nonces</li>
<li>Permission Checks – Only users with appropriate permissions can manage elements</li>
</ul>
<h3>Usage</h3>
<h4>Creating Your First Copy Element</h4>
<ol>
<li>Navigate to Copy Elements in your WordPress admin menu</li>
<li>Click New Element button (opens in a new tab for your convenience)</li>
<li>Fill in the configuration options:</li>
</ol>
Basic Settings: 
* Element Title (top field) – Internal name for your own reference, not shown to visitors 
* Content – The actual text that will be copied when users click the button
Appearance Options: 
* Show Label – Toggle this checkbox to show or hide the label 
 * ✅ Checked – Shows a label with your content (professional look) 
 * ☐ Unchecked – Clean, browser address bar style (no label)
<ul>
<li>
Button Location – Where the copy button appears
<ul>
<li>Inside Input Box – Button appears inside the right side of the input box</li>
<li>Outside Input Box – Button appears as a separate button below the input box</li>
</ul>
</li>
<li>
Button Style – How the button looks
<ul>
<li>Icon Only – Just the clipboard icon (most common)</li>
<li>Text Only – Just the word “Copy”</li>
<li>Icon and Text – Both icon and “Copy” text</li>
</ul>
</li>
<li>
Input Style (only when label is shown) – How the label appears with content
<ul>
<li>Label Above – Label appears as a separate line above the content</li>
<li>Label Inside – Label appears inside the left side of the input box (like “Email: content”)</li>
</ul>
</li>
</ul>
<ol>
<li>Click Update to save your copy element</li>
</ol>
<h4>Managing Copy Elements</h4>
From the Copy Elements list page, you can: 
* View All Elements – See a table of all your copy elements with their IDs 
* Edit – Opens the element in a new tab for editing 
* Delete – Permanently delete an element 
* Copy Shortcode – Click to copy the shortcode to your clipboard
<h4>Using Shortcodes</h4>
The plugin generates shortcodes automatically. After creating a copy element, you’ll see its shortcode displayed in the Copy Elements list.
Basic Shortcode: 
 <code>[mdcc id="123"]</code>
Simply replace <code>123</code> with the ID of your copy element. You can find the ID in the Copy Elements list table.
Where to Use Shortcodes:
<ul>
<li>Posts and Pages – Insert shortcode directly in the WordPress editor</li>
<li>Page Builders – Works with Gutenberg, Elementor, Divi, Beaver Builder, etc.</li>
<li>Widget Areas – Use in Text Widgets or Custom HTML widgets</li>
<li>Templates – Place directly in PHP template files: 
 <code><?php echo do_shortcode('[mdcc id="123"]'); ?></code></li>
</ul>
Finding Element IDs: 
The element ID appears in the Copy Elements list table in the first column. You can also see it in the shortcode column next to each element.
<h3>Examples</h3>
Here are common use cases for the plugin:
<h4>Example 1: Email Address with Label</h4>
Use Case: Sharing email addresses in documentation
Configuration: 
* Show Label: ✅ Yes 
* Label: “Email” 
* Content: “user@example.com” 
* Button Location: Inside Input Box 
* Button Style: Icon Only 
* Input Style: Label Above
Result: Professional email display with clear label
<h4>Example 2: URL Without Label (Browser Bar Style)</h4>
Use Case: Sharing URLs in a minimal, clean format
Configuration: 
* Show Label: ☐ No 
* Content: “https://www.youtube.com/” 
* Button Location: Inside Input Box 
* Button Style: Icon Only
Result: Clean address bar style without any label
<h4>Example 3: API Key with Bold Display</h4>
Use Case: Sharing API keys or authentication tokens
Configuration: 
* Show Label: ✅ Yes 
* Label: “API Key” 
* Content: “sk_live_1234567890abcdef” 
* Button Location: Outside Input Box 
* Button Style: Icon and Text 
* Input Style: Label Above
Result: Prominent display perfect for sharing sensitive codes
<h4>Example 4: Phone Number</h4>
Use Case: Contact information display
Configuration: 
* Show Label: ✅ Yes 
* Label: “Phone” 
* Content: “+61 2 1234 5678” 
* Button Location: Inside Input Box 
* Button Style: Text Only
Result: Clear label with professional appearance
<h4>Example 5: Code Snippet (Multi-line)</h4>
Use Case: Sharing multi-line code or commands
Configuration: 
* Show Label: ✅ Yes 
* Label: “Command” 
* Content: <code>git clone https://github.com/user/repo.git</code> 
* Button Location: Outside Input Box 
* Button Style: Icon Only
Result: Auto-sized box that expands for longer content
<h3>Customization</h3>
The plugin is highly customizable through CSS. All styles are contained in <code>css/mdcc-global.css</code> and can be modified to match your theme.
<h4>CSS Customization</h4>
Main CSS Variables (in <code>:root</code>): 
 <code>css 
--mdcc-accent: #6400f0; /* Primary accent color */ 
--mdcc-accent-transparent: color-mix(...); /* Transparent accent */ 
--mdcc-error-bg: #cd5c5c; /* Error/destructive actions */ 
--mdcc-success-bg: #28a745; /* Success notifications */</code>
Key CSS Classes: 
* <code>.mdcc_wrapper</code> – Main container wrapper 
* <code>.mdcc_copy-input</code> – The textarea/input field 
* <code>.mdcc_copy-button</code> – The copy button 
* <code>.mdcc_copy-label</code> – Label text styling 
* <code>.inside-button</code> / <code>.outside-button</code> – Button location modifiers 
* <code>.logo_only-style</code> / <code>.text_only-style</code> / <code>.logo_and_text-style</code> – Button style classes 
* <code>.mdcc_single-line</code> – Single-line content modifier 
* <code>.label_inside-style</code> – Label inside input styling
Admin Interface Classes: 
* <code>.mdcc_admin_form</code> – Admin form container 
* <code>.mdcc_btn-save</code> / <code>.mdcc_btn-delete</code> / <code>.mdcc_btn-copy</code> – Admin button styles 
* <code>.mdcc_custom_actions_table</code> – List page custom actions
<h4>Advanced Customization</h4>
Modifying Colors: 
Change the CSS variables in <code>css/mdcc-global.css</code> to match your brand colors. The plugin uses a modern color-mix() approach that automatically generates transparent variations.
Hiding Labels: 
You can either use the “Show Label” checkbox or add this CSS: 
 <code>css 
.mdcc_copy-label { 
 display: none !important; 
}</code>
Custom Button Styling: 
Target specific button styles using the provided classes: 
 <code>css 
.mdcc_copy-button.logo_only-style { 
 /* Custom styling for icon-only buttons */ 
}</code>
<h3>Browser Support</h3>
Modern Browsers (Recommended): 
* Chrome 60+ (uses modern Clipboard API) 
* Firefox 55+ (uses modern Clipboard API) 
* Safari 10+ (uses modern Clipboard API) 
* Edge 79+ (uses modern Clipboard API)
Legacy Browser Support: 
* Internet Explorer 11+ (fallback to document.execCommand) 
* Older versions of Chrome/Firefox/Safari (fallback support)
Mobile Browsers: 
* iOS Safari 10+ 
* Chrome Mobile 
* Samsung Internet 
* Firefox Mobile
Important: For secure contexts (HTTPS), the plugin uses the modern Clipboard API. For non-secure contexts, it falls back to <code>document.execCommand()</code> with full browser compatibility.
<h3>Developer Information</h3>
GitHub Repository: [Available on request] 
Author: Motion Digital IT 
Author URI: https://motiondigital.com.au 
Plugin Homepage: https://motiondigital.com.au/plugins
File Structure: 
 <code>md-click-copyboard/ 
├── assets/ 
│ ├── banner-*.png # WordPress.org banner images 
│ ├── icon-*.png # Plugin icons 
│ └── screenshot-*.jpg # Screenshots for WordPress.org 
├── css/ 
│ └── mdcc-global.css # All styling (frontend & admin) 
├── js/ 
│ ├── mdcc-admin.js # Admin JavaScript functionality 
│ └── mdcc-copy.js # Frontend copy functionality 
├── languages/ 
│ └── md-click-copyboard.pot # Translation template 
├── md-click-copyboard.php # Main plugin file 
├── readme.txt # This file 
└── uninstall.php # Cleanup on deletion</code>
Hooks and Filters: 
* <code>save_post</code> – Handles saving of copy element meta data 
* <code>admin_enqueue_scripts</code> – Enqueues admin scripts and styles 
* <code>wp_enqueue_scripts</code> – Enqueues frontend scripts and styles 
* <code>post_row_actions</code> – Modifies edit links to open in new tab 
* Custom hooks for meta box rendering and column display
Functions for Developers: 
* <code>render_meta_box()</code> – Renders the copy element configuration form 
* <code>save_meta_boxes()</code> – Saves copy element configuration 
* <code>render_shortcode()</code> – Renders the shortcode output 
* <code>get_meta_data()</code> – Retrieves element meta data (optimized single query) 
* <code>render_custom_columns()</code> – Adds custom columns to admin list
<h3>Requirements</h3>
Minimum Requirements: 
* WordPress: 5.0 or higher 
* PHP: 7.4 or higher 
* MySQL: 5.6 or higher
Recommended: 
* WordPress: 6.8 or higher 
* PHP: 8.0 or higher 
* Modern browser for optimal Clipboard API support
Server Requirements: 
* HTTPS recommended (for modern Clipboard API) 
* JavaScript enabled in browser 
* Cookies enabled for admin functionality
<h3>License</h3>
This plugin is licensed under the GPL v2 or later.
<pre><code>`
</code></pre>
Copyright (C) 2024 Motion Digital IT
This program is free software; you can redistribute it and/or modify 
it under the terms of the GNU General Public License as published by 
the Free Software Foundation; either version 2 of the License, or 
(at your option) any later version.
This program is distributed in the hope that it will be useful, 
but WITHOUT ANY WARRANTY; without even the implied warranty of 
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 
GNU General Public License for more details. 
 `
<h3>Support</h3>
Getting Help: 
* Documentation: Full documentation available at https://motiondigital.com.au/docs 
* Support Forum: Available through WordPress.org plugin directory 
* Email: support@motiondigital.com.au 
* Website: https://motiondigital.com.au
Before Requesting Support: 
1. Check this FAQ section for common solutions 
2. Ensure you’re using the latest version of the plugin 
3. Test with default WordPress theme to rule out theme conflicts 
4. Deactivate other plugins to check for conflicts 
5. Clear your browser cache and WordPress cache
Reporting Issues: 
When reporting issues, please include: 
* WordPress version 
* PHP version 
* Browser and version 
* Description of the issue 
* Steps to reproduce 
* Any error messages 
* Screenshots if applicable
Feature Requests: 
We welcome feature requests! Contact us with your ideas for improving the plugin.
<h3>Credits</h3>
Development: 
* Built with WordPress best practices 
* Follows WordPress coding standards 
* Uses modern CSS and JavaScript 
* Optimized for performance
Thanks To: 
* WordPress Community for the amazing CMS platform 
* All beta testers who provided valuable feedback 
* Users who support open-source software

MD Click Copyboard

Create elegant click-to-copy input boxes for API keys, passwords, code snippets, and more. Perfect for documentation sites and client portals.

Freemius

Abu Hayat

bPlugins

btechnologies

Prosanta Roy

<a href="https://bplugins.com/products/code-snippets-block/" rel="nofollow ugc">Code Snippets Block</a> is a lightweight Gutenberg plugin that lets you display programming code in WordPress with syntax highlighting, copy-to-clipboard functionality, and customizable themes.
<a href="https://bplugins.com/products/code-snippets-block/" rel="nofollow ugc">Code Snippets Block</a> | <a href="https://bplugins.com/products/code-snippets-block/pricing/" rel="nofollow ugc">Pricing</a> | <a href="https://bplugins.com/support/" rel="nofollow ugc">Support</a> | <a href="https://bblockswp.com/demo/code-snippets-block-all-demo/" rel="nofollow ugc">Live Demos</a>
Perfect for developers, programmers, educators, technical writers, and bloggers, the plugin makes it easy to showcase code snippets, source code examples, developer documentation, programming tutorials, and technical guides in a clean and professional format.
Whether you’re sharing PHP, JavaScript, Python, HTML, CSS, JSON, SQL, or other programming languages, Code Snippets Block improves readability with syntax highlighting and allows visitors to copy code instantly with a single click.
Built specifically for WordPress and Gutenberg, the plugin is lightweight, responsive, SEO-friendly, and designed for modern developer-focused websites.
<h3>Key Features – Free Version</h3>
<ul>
<li>
One-Click Copy Button: Allow visitors to copy code instantly using a convenient copy-to-clipboard button.
</li>
<li>
Syntax Highlighting for Multiple Languages: Display programming code with proper syntax highlighting for better readability.
</li>
<li>
Seven Modern Color Themes: Choose from multiple built-in themes to customize the appearance of your code snippets.
</li>
<li>
Clean Code Presentation: Show code in a structured and readable layout that improves user experience.
</li>
<li>
Gutenberg Block Integration: Easily insert code snippets using a dedicated Gutenberg block.
</li>
<li>
Shortcode Support: Embed code snippets anywhere on your site using shortcodes.
</li>
<li>
Responsive Design: Code snippets automatically adapt to all screen sizes and devices.
</li>
</ul>
<h3>Code Snippets Block Pro – Unlock More Customization</h3>
Upgrade to the <a href="https://bplugins.com/products/code-snippets-block/pricing/" rel="nofollow ugc">Pro version</a> for additional layout and styling controls.
<h3>What’s Included in the Pro Version?</h3>
<ul>
<li>
Custom Copy Button Position: Place the copy button exactly where you want within the code block.
</li>
<li>
Premium Header Layouts: Use advanced header layouts to enhance the code snippet design.
</li>
<li>
Exclusive Premium Themes: Access additional professionally designed color themes.
</li>
<li>
Header Padding & Background Control: Adjust spacing and background styles for the code block header.
</li>
<li>
Custom Code Block Background: Apply custom background styles for better visual presentation.
</li>
<li>
Formatted Output Section: Display formatted output along with the code snippet.
</li>
</ul>
Try the <a href="https://bplugins.com/products/code-snippets-block/pricing/" rel="nofollow ugc">Code Snippets Block</a> – Unlock all premium features now!
<h3>How to Use Code Snippets Block – Step-by-Step Guide</h3>
Getting started with the Code Snippets Block is quick and easy!
<h3>Step-by-Step Instructions</h3>
<ol>
<li>
Install and activate the Code Snippets Block plugin.
</li>
<li>
Open the Gutenberg editor in WordPress.
</li>
<li>
Add the Code Snippets Block from the block inserter.
</li>
<li>
Paste your code into the block.
</li>
<li>
Select the programming language and theme from the block settings.
</li>
</ol>
Your code snippet will now appear with syntax highlighting and a copy button.
<ul>
<li>For installation help click on Installation Tab.</li>
</ul>
<a href="https://bblockswp.com/demo/code-snippets-block-all-demo/" rel="nofollow ugc">Live Demos</a> | <a href="https://bplugins.com/products/code-snippets-block/pricing/" rel="nofollow ugc">Get Code Snippets Block PRO</a>
<h3>Why Choose Code Snippets Block?</h3>
<ul>
<li>Instant copy-to-clipboard — visitors copy your code in one click</li>
<li>Syntax highlighting for all major languages — PHP, JavaScript, Python, HTML, CSS, and more</li>
<li>7 built-in color themes — match your site’s look and feel</li>
<li>Gutenberg-native — inserts just like any other block</li>
<li>Shortcode support — embed code snippets anywhere on your site</li>
<li>Fully responsive — looks great on desktop, tablet, and mobile</li>
<li>Lightweight — minimal impact on page load speed</li>
<li>Works with any WordPress theme — zero compatibility issues</li>
</ul>
<h3>Common Use Cases</h3>
The plugin is useful for many types of WordPress websites:
✔ Programming Tutorials: Make your snippets easy to read and copy. 
✔ Developer Documentation: Keep code examples clean and consistent. 
✔ Developer Portfolios: Showcase your clean code with pride. 
✔ Technical knowledge bases. 
✔ Educational coding resources.
<h4>Feedback</h4>
<ul>
<li>Liked that plugin? Hate it? Want a new feature? <a href="mailto:support@bplugins.com" title="Send feedback" rel="nofollow ugc">Send me some feedback</a></li>
</ul>
<h4>⭐ Check out the Parent Plugin of this plugin-</h4>
🔥 <a href="https://bblockswp.com/" rel="nofollow ugc">b Blocks</a> – Best gutenberg blocks collections for WordPress.
<h4>⭐ Check out our other WordPress Plugins-</h4>
🔥 <a href="https://audioplayerwp.com/" rel="nofollow ugc">Html5 Audio Player</a> – Best audio player plugin for WordPress.
🔥 <a href="https://wpvideoplayer.com/" rel="nofollow ugc">Html5 Video Player</a> – Best video player plugin for WordPress.
🔥 <a href="http://pdfposter.com/" rel="nofollow ugc">PDF Poster</a> – A fully-featured PDF Viewer Plugin for WordPress.
🔥 <a href="https://wordpress.org/plugins/streamcast" rel="ugc">StreamCast</a> – A fully-featured Radio Player Plugin for WordPress.
🔥 <a href="https://3d-viewer.bplugins.com/" rel="nofollow ugc">3D Viewer</a> – Display interactive 3D models on the webs.

Code Block – Embed Code with One-Click Copy Feature

Display beautifully highlighted code snippets on your WordPress site with a one-click copy feature. Fully responsive and Gutenberg compatible.

MD Click Copyboard vs Code Block – Embed Code with One-Click Copy Feature