Automattic

Daniel Bachhuber

Josh Betz

<p>Add custom JavaScript to your site from an editor in the WordPress admin.</p>
<p>Your code is stored and revisioned with a custom post type, so you can always go back to a previous working state.</p>
<p>If you’d like to check out the code and contribute, <a href="https://github.com/Automattic/Custom-Javascript-Editor" rel="nofollow ugc">join us on GitHub</a>. Pull requests are more than welcome!</p>


Custom JavaScript Editor

Add custom JavaScript to your site from an editor in the WordPress admin

Wow-Company

DmtLo

WPCoder

<p>Tired of editing theme files to add custom scripts or styles?<br />
<strong>WP Coder</strong> lets you insert custom HTML, CSS, JavaScript, and PHP snippets directly from your dashboard — no coding in theme files required. Gain full control and flexibility over your site.</p>
<p><a href="https://wpcoder.pro/category/documentation/" rel="nofollow ugc">Documentation</a> | <a href="https://wpcoder.pro/" rel="nofollow ugc">Upgrade to Pro</a></p>
<h3>Why WP Coder?</h3>
<ul>
<li><strong>All-in-One Code Editor:</strong> Tabbed editor for HTML, CSS, JS & PHP with CodeMirror syntax highlighting.</li>
<li><strong>Gutenberg Block:</strong> Insert snippets directly in the block editor with live preview and custom attribute support.</li>
<li><strong>Shortcode Integration:</strong> Use <code>[wp_code id="X"]</code> to embed snippets anywhere.</li>
<li><strong>Live Preview:</strong> Instantly preview HTML & CSS without reloads in both the backend and Gutenberg.</li>
<li><strong>Performance Ready:</strong> Minify CSS/JS, obfuscate JavaScript, and control script loading with <code>async</code> / <code>defer</code>.</li>
</ul>
<h3>Ideal For</h3>
<ul>
<li><strong>Developers:</strong> Test snippets, hooks, and debug quickly.</li>
<li><strong>Marketers:</strong> Insert tracking pixels, analytics, and ad scripts.</li>
<li><strong>Designers & Bloggers:</strong> Customize layouts, styles, and enhance engagement.</li>
</ul>
<h3>Key Features</h3>
<ul>
<li>Insert <strong>HTML, CSS, JS, and PHP</strong> via powerful shortcodes.</li>
<li>Smart PHP handling: run in admin, front-end, everywhere, or only where inserted.</li>
<li>Include external libraries (Google Fonts, CDN scripts & styles).</li>
<li><strong>Test Mode:</strong> Preview snippets safely before going live.</li>
<li>Import/Export snippets and settings between sites.</li>
<li><strong>JavaScript Obfuscation:</strong> Protect your scripts with Dean Edwards’ Packer.</li>
<li><strong>Customizable Interface:</strong> Hide unused editor tabs (HTML, CSS, JS, etc.) for a cleaner workflow.</li>
<li><strong>NAV comments:</strong> Add inline navigation markers for faster code editing.</li>
<li>Lightweight & secure — built for performance.</li>
</ul>
<h3>Included Tools:</h3>
<h4>Integrations</h4>
<ul>
<li>Google Tag Manager (GTM) integration with user role controls.</li>
<li>Google Analytics, Facebook Pixel, and Pinterest Pixel integration.</li>
<li>Google AdSense integration with the option to disable ads for selected user roles.</li>
</ul>
<h4>Content & Templates</h4>
<ul>
<li>Markdown Editor – Disables Gutenberg and TinyMCE, replacing them with a Markdown editor powered by CodeMirror.</li>
</ul>
<h4>Developer Tools</h4>
<ul>
<li>Debug Log management (enable/disable and clear log).</li>
<li>Show Page Debug Info – Display technical info for the current request in the Admin Bar (template, query type, object, body classes). Admins only.</li>
<li>Theme Switcher –  Quickly switch between installed themes directly from the admin bar.</li>
</ul>
<h3>Included Snippets:</h3>
<h4>Editor & Content</h4>
<ul>
<li>Disable Gutenberg Editor</li>
<li>Remove Gutenberg Block CSS</li>
<li>Disable Widget Blocks</li>
<li>Enable Shortcode Execution in Widgets</li>
<li>Enable Excerpt for Pages</li>
<li>Open External Links in New Tabs</li>
<li>Change “Read More” Text</li>
</ul>
<h4>Admin Interface Tweaks</h4>
<ul>
<li>Disable Screen Options Tab</li>
<li>Disable Welcome Panel</li>
<li>Duplicate Posts</li>
<li>Disable Admin Bar</li>
</ul>
<h4>Login & User Access</h4>
<ul>
<li>Disable Login Page Language Switcher</li>
<li>Disable Login by Email</li>
<li>Disable Admin Password Reset Emails</li>
<li>Custom Login Logo</li>
<li>Custom Login Redirect URLs</li>
<li>Change Redirect After Login</li>
<li>Change Redirect After Logout</li>
</ul>
<h4>Media & Embeds</h4>
<ul>
<li>Enable SVG Upload</li>
<li>Force Lowercase Filenames</li>
<li>Default ALT Text for Avatars</li>
<li>Enable/Disable Lazy Load</li>
<li>Disable Embeds</li>
<li>Adjust oEmbed Max Dimensions</li>
</ul>
<h4>Core Functionality</h4>
<ul>
<li>Disable XML-RPC</li>
<li>Disable REST API</li>
<li>Disable Automatic Updates</li>
<li>Disable Automatic Updates Emails</li>
<li>Disable Emojis</li>
<li>Disable Shortlinks</li>
<li>Limit Post Revisions</li>
</ul>
<h4>Comments & Feedback</h4>
<ul>
<li>Disable Comments Globally</li>
<li>Disable Comment URL Field</li>
<li>Disable Self Pingbacks</li>
<li>Disable Trackbacks & Pingbacks</li>
<li>Disable HTML in Comments</li>
<li>Limit Comment Length</li>
</ul>
<h4>Cleanup & Optimization</h4>
<ul>
<li>Remove WP Version</li>
<li>Disable Attachment Pages</li>
<li>Disable RSS Feeds</li>
<li>Disable Built-in Search</li>
<li>Disable wlwmanifest Link</li>
<li>Disable Automatic Trash Emptying</li>
<li>Redirect 404 to Homepage</li>
</ul>
<p>WP Coder simplifies your WordPress development workflow and makes customization safe, fast, and flexible!</p>
<p>Get started today and simplify your WordPress development workflow with <strong>WP Coder</strong>!</p>
<h3>Quick Start Video</h3>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/BgY3R8j1uWM?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h3>Plugin Demo:</h3>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/YF4X7sU0iFY?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>Support</h4>
<p>Need help? Ask questions and get quick answers in our <a href="https://wordpress.org/support/plugin/wp-coder" rel="ugc">support center</a>.</p>


WP Coder – Insert & Manage Code Snippets


I install it on every site I build. Does the job well.


I love this plugin. Standard on all sites I build.

Snippets made simple — easily insert and manage custom PHP, CSS, JS & HTML without coding in theme files.

Custom JavaScript Editor vs WP Coder – Insert & Manage Code Snippets