Locked Code Snippets: Blur, Protect, and Share Code Safely in WordPress

August 24, 2025

You often need to share code on your blog, but you do not want to expose it to everyone. Maybe you want to keep it for clients, students, or paid members. The Locked Code Snippets plugin solves this cleanly. It shows a short blurred preview first, then reveals the full code in the same place after the visitor enters the correct password. It also adapts to your site’s dark and light theme so the code stays readable in both modes.

What this plugin does

• Shows a blurred preview of your code so readers know what they will unlock
• Unlocks the full code with a password using a secure server check
• Displays code in a clean block with a Copy button
• Keeps code readable: black on white in light mode and white on black in dark mode
• Matches your theme toggle automatically by listening to your site’s scheme switch
• Scopes all styles to the plugin wrapper so your theme styling is never affected

Who should use it

• Agencies and freelancers who want to share snippets only with clients
• Educators who want to gate answers or solutions behind a simple password
• Bloggers who want to tease premium content and unlock it for selected readers
• Developers who need clean code presentation with safe copying

How it works

Your code is stored in a custom post type that is not public. The frontend only renders an obfuscated preview that cannot be read even from the page source. When the user enters the right password, the plugin fetches the real code via AJAX and injects it into the same spot. The switch happens smoothly and the Copy button appears immediately.

Key features

• Password protection with hashing on the server
• Blurred, unreadable preview that hints the shape of the code only
• AJAX unlock that keeps the page in place
• Copy to clipboard button for fast adoption
• Theme sync with your existing toggle and classes
• Minimal footprint with styles scoped to the plugin container.

Demo of the component:

Password: imran123

••••••••••••••
•• ••••• •••••••• ••••• ••••••
••••••••••• •
•• •••• ••• •••• •••••• ••••
•••••••• •••••••••• •
••••••••••••••••••••••••••••• • •••••••••••••••••
••••••••••••• ••••• •
••••••••••••••••••••••••••••• • •••••••••••••••

Installation

1. Go to Plugins → Add New → Upload Plugin.
2. Upload the ZIP file of Locked Code Snippets and activate it.
3. A new menu item called Locked Code will appear in your dashboard.

Create a protected snippet

1. Open Locked Code → Add New.
2. Give it a clear title.
3. Paste the code or text you want to protect in the main editor.
4. In the Locked Code Settings box on the right, set the Password.
5. Optional: add a Language label like javascript, php, or python.
6. Optional: enable Render raw HTML or JS only if you are certain the code is safe to execute.
7. Publish.

Add the snippet to a post or page

Use the shortcode with the snippet ID:

[locked_code id="1822" preview="blur" preview_lines="8"]

Where to find the ID: open your snippet in the dashboard and check the URL. You will see something like post=1822. That number is your ID.

Shortcode works in the Block Editor and in Elementor. In the Block Editor, add a Shortcode block and paste it. In Elementor, use the Shortcode widget.

Control the preview

• preview="blur" turns on the blurred preview. Use preview="none" to hide the preview completely
• preview_lines="8" controls how many obfuscated lines to show before unlock
• The preview cannot be read in the source. It shows bullet characters only

Theme sync and color readability

The plugin detects your theme mode in two common ways:

• html.dark class on the root element
• data-scheme="dark" on an element such as .cs-offcanvas

When your visitors toggle the theme, the plugin flips its wrapper to a dark variant and updates colors on the fly. The code block always stays readable:

• Light mode: white background with black text
• Dark mode: black background with white text

All colors live inside the plugin wrapper as CSS variables. This keeps the styling self contained and prevents conflicts with your theme.

Security notes

• Passwords are stored as hashes using password_hash and are verified with password_verify
• The blurred preview is obfuscated on the server, not just hidden with CSS
• The full code is only sent to the browser after a correct password
• Keep the Render raw HTML or JS option off unless you fully trust the content

Performance and compatibility

• The plugin injects minimal CSS and JavaScript scoped to its own wrapper
• It does not override your theme styles
• It works with caching plugins since unlock happens via AJAX
• It is editor agnostic. Gutenberg, Classic, and Elementor are all supported

Troubleshooting

I entered the correct password but nothing happened.
Make sure the snippet is published and not in draft. Also check that the shortcode ID matches the snippet ID.

The preview shows, but the unlocked code renders with strange colors.
Your site might use very strong global CSS. The plugin already scopes its styles. If you still see conflicts, contact me and I will map your site’s color variables into the plugin wrapper.

The Copy button does not copy on some mobile browsers.
Mobile clipboard support varies by browser. Ask users to update the browser. The button uses the standard Clipboard API.

The shortcode is not recognized.
Confirm the plugin is active. Clear cache if you use a caching plugin or CDN.

Shortcode cheat sheet

Basic:

[locked_code id="1822"]

With blurred preview and ten lines:

[locked_code id="1822" preview="blur" preview_lines="10"]

Custom button label and placeholder:

[locked_code id="1822" label="View code" placeholder="Enter password"]

Why this approach is better

Some sites try to hide code with CSS or JavaScript only. That is easy to bypass because the code still sits in the HTML. This plugin does the opposite. It sends only an obfuscated preview first, then the real code after a valid password. This design protects your content and keeps the user experience smooth.

Final tips

• Use short titles so you can find snippets quickly
• Keep passwords unique per snippet if you plan to share different codes with different groups
• Log in once as a normal user and test the flow on mobile and desktop

Need help or a custom version

If you want the block to follow your exact brand colors or your custom theme toggle, I can tailor it for you. I can also package a Gutenberg block UI so editors can pick a snippet from a dropdown.

Visit ctrlaltimran.com or email contactme@ctrlaltimran.com to get started.