Ozan Canakli

This plugin allows you to add custom site-wide CSS, JavaScript, Header, Footer Code to your WordPress site. The changes appear instantly on your website with help of WordPress Live Customizer.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/gP78wXPayvU?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>
In your WordPress Dashboard, navigate to Customize > Live Code Editor to get started.
When you Change or Update your WordPress Theme, Your Custom Code isn’t effected from these changes.
NEW FEATURES as Version 1.0.5: 
* Add Custom CSS to WordPress Admin dashboard. 
* Add Custom JavaScript to WordPress Admin dashboard.
MAIN FEATURES:
<ul>
<li>Custom CSS code</li>
<li>Custom Javascript code</li>
<li>Custom Header Code (Inside tags)(Google Analytics and Facebook Pixel compatible.)</li>
<li>Custom Footer Code (Before closing tag aka wp_footer function)</li>
<li>See Your Changes Immediately on your WordPress Site</li>
<li>Built in Syntax Code Highlighter</li>
<li>16 Color Schemes (Monokai, Chrome, GitHub, Twilight, Dreamweaver, XCode, Eclipse etc. 8 Light, 8 Dark)</li>
<li>Live Syntax Checking (CSS, JavaScript, HTML)</li>
<li>Syntax Highlighting</li>
<li>Line wrapping</li>
<li>Code folding</li>
<li>Multiple cursors and selections</li>
<li>Handles huge code blocks (four million lines seems to be the limit!)</li>
</ul>
Special thanks to <a href="https://profiles.wordpress.org/justinbusa/" rel="nofollow ugc">Justin Busa</a> of <a href="https://wordpress.org/plugins/beaver-builder-lite-version/" rel="ugc">Beaver Builder</a> for the inspiration.

Live Custom CSS JS Code Editor

Live Custom CSS JS Code Editor allows you to easily add custom CSS, JavaScript, Header, Footer Code to your site, straight from your WordPress Customi …

AppsCreo

Simple Custom Code – CSS, JS, and HTML is a powerful yet easy-to-use plugin that lets you create, edit, and manage custom CSS, JavaScript, and HTML snippets — visually or through code. Instantly apply styles to any element using an intuitive Visual CSS Customizer, or write your own custom code snippets with full control. All code is stored as optimized, file-based snippets for better performance, caching, and portability — no database clutter, no complicated setup.
Whether you prefer point-and-click design or hands-on coding, the plugin adapts to your workflow. Use the live visual editor to experiment with fonts, colors, and layouts in real time, or add precise styling and scripting through the built-in code editor with syntax highlighting and autocomplete. Both methods integrate seamlessly, so your visual changes are automatically translated into clean, optimized code.
Designed for speed and flexibility, this plugin supports unlimited CSS, JS, and HTML snippets, advanced file-based management, AI-powered code generation, and a Gravity Forms visual CSS customizer. It’s perfect for customizing your WordPress site’s appearance, extending functionality, and keeping your changes safely organized — without touching theme files.
<h3>🎨 Live Visual CSS Customizer</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/waO2WUFMMLk?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>
Create beautiful, responsive designs directly from your site’s frontend using the built-in Visual CSS Editor. Perfect for both beginners and professionals, it combines visual controls with real CSS generation for complete flexibility.
Key Features:
<ul>
<li>One-Click Activation: Launch the CSS Customizer instantly from your site’s admin bar.</li>
<li>Point, Click, Style: Select any element visually — no need to inspect HTML or write selectors manually.</li>
<li>Real-Time Visual Controls: Adjust fonts, colors, spacing, borders, transitions, and hover effects with instant live preview.</li>
<li>Automatic CSS Code Generation: Every visual change automatically produces clean, performance-optimized CSS.</li>
<li>Safe Testing Environment: Preview your changes without affecting your live site until you hit “Save.”</li>
</ul>
<h3>🌐 Gravity Forms Visual CSS Customizer</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/AOhsZmQdy48?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>
Style your Gravity Forms effortlessly with the dedicated Gravity Forms CSS live customizer. Accessible directly from the admin bar under CSS Customize → Gravity Forms, it allows you to visually fine-tune form fields, labels, buttons, and layouts — all in real time, with zero code required. Perfect for matching your forms to your brand without writing a single line of CSS manually.
<h3>⚡ Unlimited CSS, JavaScript & HTML Snippets</h3>
Go beyond CSS. With version 1.3, you can now create and manage unlimited snippets for CSS, JavaScript, and HTML — all from a single, unified interface. Each snippet type is purpose-built for its use case, giving you the flexibility to style, script, and structure your site exactly the way you want.
Highlights:
<ul>
<li>Unlimited Snippets: Create as many snippets as you need for CSS, JS, or HTML — dedicated to different themes, layouts, components, or site sections.</li>
<li>File-Based Storage: All snippets are saved as external files in <code>/wp-content/uploads/simple-custom-code/</code> for better caching, performance, and portability — no database clutter.</li>
<li>Granular Control Per Snippet:
<ul>
<li>Activate or deactivate snippets anytime.</li>
<li>Load externally or inline for speed optimization.</li>
<li>Choose code position (<code><head></code>, before <code></body></code>, or right after <code><body></code>).</li>
<li>Set priority levels to control load order.</li>
<li>Rename snippet files for better organization.</li>
</ul>
</li>
</ul>
<h3>📍 Flexible Loading Locations</h3>
One of the most powerful aspects of the plugin is where your code gets loaded. Unlike basic custom CSS plugins, Simple Custom Code – CSS, JS, and HTML gives you granular control over the context and location of each snippet:
<ul>
<li>Frontend: Load CSS, JS, or HTML on the public-facing side of your site.</li>
<li>Backend (wp-admin): Inject code into the WordPress admin dashboard — useful for custom admin styles or admin-only scripts.</li>
<li>Login Page: Target the WordPress login screen specifically — great for branded login pages.</li>
<li>Block Editor: Load code inside the Gutenberg block editor environment for editor-specific tweaks.</li>
</ul>
This level of contextual control means you’re never loading unnecessary code where it doesn’t belong, keeping your site lean and fast.
<h3>✍️ Advanced Code Editor with Autocomplete & Syntax Highlighting</h3>
The built-in code editor is designed for professional developers and beginners alike. It’s not just a plain text area — it’s a smart, IDE-like editing experience inside your WordPress admin:
<ul>
<li>Syntax Highlighting: CSS, JavaScript, and HTML are visually color-coded for easy reading and editing.</li>
<li>Real-Time Autocomplete: As you type, the editor suggests CSS properties, JavaScript functions, and WordPress hooks — dramatically speeding up your workflow and reducing typos.</li>
<li>Code Beautifier: Automatically format and indent messy code with one click, turning unreadable code into clean, maintainable snippets.</li>
<li>Smart Error Detection & Validation: The editor flags syntax errors and potential issues in real time, before you save — so you can fix mistakes before they ever reach your site.</li>
</ul>
<h3>🤖 AI-Powered Code Generation</h3>
Not sure how to write the code you need? Simply describe what you want in plain English, and the AI assistant will generate ready-to-use CSS, JavaScript, or HTML for you. Whether it’s a sticky header, a custom button style, a scroll animation, or an admin tweak — just tell the AI what you need and it does the heavy lifting.
<ul>
<li>Works with CSS, JavaScript, and HTML snippets.</li>
<li>Uses your own OpenAI API key — you stay in control of your API usage and costs.</li>
<li>Generated code is inserted directly into the editor, where you can review, adjust, and save it as a snippet.</li>
</ul>
This feature is especially powerful for site owners and designers who want to extend their site’s functionality without being full-time developers.
<h3>🔐 Smart Plugin Settings & Configuration</h3>
The Simple Custom Code – CSS, JS, and HTML plugin is built for flexibility and speed. Whether you manage a single website or multiple client projects, its settings give you total control over how and where your code snippets are loaded.
Core Settings & Controls:
<ul>
<li>Role-Based Access Control: Limit access to the code editor for specific WordPress roles (Administrator, Editor, etc.) — perfect for maintaining control in multi-user or agency environments.</li>
<li>Cache-Busting File Versions: Automatically append version numbers to ensure browsers always load the most recent changes.</li>
<li>Performance-Optimized Output: Choose between inline or external file loading to balance speed and caching efficiency.</li>
<li>Clean, Intuitive Interface: A lightweight admin panel that keeps configuration simple — no unnecessary options or clutter.</li>
<li>Advanced Control Options: Adjust snippet loading priority, file naming, and execution location directly from your settings page.</li>
</ul>
<h3>🚀 Upgrade to Pro – Developer-Grade Power</h3>
The free version is powerful, but the <a href="https://simplecustomcode.com/" rel="nofollow ugc">Pro upgrade</a> unlocks a suite of advanced performance, automation, and precision features built for developers, agencies, and power users who need complete control over their site’s code delivery.
Pro Features:
<ul>
<li>Fine-Tuned Conditional Loading: Target your snippets to load only on specific URLs, post types, pages, or user conditions — not site-wide. This means faster pages and cleaner code delivery exactly where it’s needed.</li>
<li>Defer JavaScript Loading: Mark external JavaScript snippets to load with the <code>defer</code> attribute, preventing render-blocking scripts from slowing down your page load speed.</li>
<li>Asynchronous CSS Loading: Load CSS files asynchronously to prevent stylesheet render-blocking — a key technique for improving Core Web Vitals and Lighthouse scores.</li>
<li>SCSS & Less Compiler: Write your styles using SCSS or Less syntax and let the plugin compile them automatically into valid CSS. No build tools or command-line setup required.</li>
<li>Automatic Code Minification: Automatically minify your CSS and JavaScript snippets on save. Minified versions are stored separately so you always have access to the readable original.</li>
<li>Cache Mode: Combine all active snippets for a given page into a single cached file, dramatically reducing the number of HTTP requests and improving Time to First Byte (TTFB).</li>
<li>Clean Source Code Output: Remove snippet loading comments from your site’s HTML source code for a cleaner, more professional output.</li>
<li>Fewer HTTP Requests: Pro’s optimized snippet handling intelligently consolidates code delivery to minimize round-trips and maximize site speed.</li>
<li>Priority Technical Support: Get faster responses, dedicated assistance, and early access to new features and updates.</li>
</ul>
Pro is the ideal choice for performance-focused developers and agencies who need production-grade code management on WordPress. <a href="https://simplecustomcode.com/" rel="nofollow ugc">Learn more and upgrade at simplecustomcode.com →</a>
<h3>🎯 Perfect For:</h3>
This plugin is designed for anyone who wants to customize WordPress design and functionality quickly, safely, and without touching core files.
<ul>
<li>💻 Web Developers — Maintain full control of your site’s styling and scripting without modifying theme files.</li>
<li>🎨 Designers — Use the Visual CSS Customizer to fine-tune typography, colors, and layouts without touching code.</li>
<li>⚙️ Site Owners — Make small design adjustments or add scripts instantly without hiring a developer.</li>
<li>🧠 Agencies & Freelancers — Manage multiple client sites and store custom code snippets efficiently.</li>
<li>🌱 WordPress Beginners — Learn CSS and JavaScript interactively using visual controls, AI assistance, and instant preview feedback.</li>
</ul>

Simple Custom Code – Custom CSS, JS, and HTML, Visual CSS Customizer

Add custom CSS, JS, and HTML snippets to WordPress with a live visual editor, AI code generation, and file-based storage.

Live Custom CSS JS Code Editor vs Simple Custom Code – Custom CSS, JS, and HTML, Visual CSS Customizer