Locked Code Snippets: Password-Protect Code on Your WordPress Blog

Sometimes you want to share code on your blog, but only with certain people, like clients, students or paying members. The Locked Code Snippets plugin shows a blurred preview first, then reveals the full code in place once the visitor enters the right password.

What it does

• Shows a blurred preview, so readers know what they're unlocking
• Unlocks the full code with a password checked on the server
• Shows the code in a clean block with a Copy button
• Stays readable in both themes: black on white in light mode, white on black in dark mode
• Follows your site's theme toggle automatically
• Keeps all its styles inside its own wrapper, so your theme is never affected

Who it's for

• Agencies and freelancers sharing snippets with clients
• Teachers hiding answers behind a simple password
• Bloggers teasing premium content
• Developers who want clean code display with easy copying

How it works

Your code is saved in a private post type. The page only ever contains an obfuscated preview, made of dots, which can't be read even in the page source. When the right password is entered, the real code is fetched via AJAX and dropped into the same spot.

That's the key difference from hiding code with CSS or JavaScript: with this plugin, the real code is never in the HTML until it's unlocked.

Setup

1. Go to Plugins → Add New → Upload Plugin, upload the ZIP and activate it.
2. Open Locked Code → Add New and give the snippet a clear title.
3. Paste your code into the editor.
4. In Locked Code Settings, set a password and, optionally, a language label such as php.
5. Publish.

Only turn on Render raw HTML or JS if you fully trust the code.

Add it to a post

Use the shortcode with your snippet's ID. You'll find the ID in the editor URL, for example post=1822:

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

It works in the Block Editor (Shortcode block) and Elementor (Shortcode widget).

Shortcode options

• preview="blur" shows the blurred preview, and preview="none" hides it
• preview_lines="8" sets how many preview lines to show
• label and placeholder change the button and input text

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

Security

• Passwords are hashed with password_hash and checked with password_verify
• The preview is obfuscated on the server, not just hidden with CSS
• The real code is sent only after a correct password

Performance

Minimal CSS and JS, scoped to the plugin. It's compatible with caching plugins because unlocking happens over AJAX, and it works in Gutenberg, the Classic editor and Elementor.

Troubleshooting

Right password, nothing happens. Make sure the snippet is published and the shortcode ID matches.

Odd colours after unlocking. Very aggressive global CSS can leak in. Message me and I'll map your theme colours into the plugin.

Copy doesn't work on some phones. Clipboard support varies by mobile browser, so ask users to update theirs.

Want a custom version?

I can match it to your exact brand colours and theme toggle, or add a block-editor picker for snippets. Get in touch.

Need something like this built?

I build custom WordPress plugins, websites and web apps. Tell me what you need.

Let’s talk