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 …

shubham715

D3 LOGICS

vinit sharma

WP Add Custom CSS and JS lets you add custom CSS and custom JavaScript to your WordPress website directly from the admin panel — without editing your theme, child theme, or plugin files. Write your code in a professional editor with syntax highlighting and autocomplete, and it is applied to your site instantly.
Add as many separate snippets as you want, manage them all from one screen, and decide exactly how and where each one loads. Every snippet can be automatically minified (compressed) so your custom code never slows your site down.
This plugin is developed and maintained by <a href="https://d3logics.com/" rel="nofollow ugc">d3logics</a>. Browse all of our free WordPress plugins at <a href="https://d3logics.com/plugins" rel="nofollow ugc">d3logics.com/plugins</a>.
New to this? Read our full step-by-step guide: <a href="https://d3logics.com/how-to-add-custom-css-and-javascript-in-wordpress/" rel="nofollow ugc">How to Add Custom CSS and JavaScript in WordPress</a>.
<h4>Why use this plugin?</h4>
<ul>
<li>Add custom CSS to restyle your theme without touching theme files.</li>
<li>Add custom JavaScript for tracking codes, animations, widgets, and tweaks.</li>
<li>Your code is safe when you switch or update your theme.</li>
<li>Perfect for quick design fixes and adding third-party snippets.</li>
</ul>
<h4>Key Features</h4>
<ul>
<li>Unlimited snippets — add as many custom CSS and JS codes as you want.</li>
<li>Management screen — every snippet is listed in a table (like Posts) where you can edit, enable/disable, and delete.</li>
<li>Live code editor with syntax highlighting, line numbers, bracket matching, search, and CSS / JavaScript autocomplete (powered by CodeMirror).</li>
<li>Per-snippet options:
<ul>
<li>Print the code inline (internal) or save it to an external cached file.</li>
<li>Load the code in the header or the footer.</li>
<li>Apply the code on the front end, the admin area, or both.</li>
</ul>
</li>
<li>Automatic minification — compress your CSS/JS for the fastest possible load time.</li>
<li>External files are cached — no database queries on the front end, so there is no performance hit.</li>
<li>Keeps your code when you change themes.</li>
<li>Secure — capability checks and WordPress nonces on every action.</li>
<li>Lightweight, translation-ready, and works with any theme.</li>
</ul>
<h4>Made by d3logics</h4>
Need a custom WordPress plugin, theme, or website? The team at <a href="https://d3logics.com/" rel="nofollow ugc">d3logics</a> builds custom WordPress solutions. See more of our work and free plugins at <a href="https://d3logics.com/plugins" rel="nofollow ugc">https://d3logics.com/plugins</a>.

WP Add Custom CSS and JS


Great plugin! Very easy to add custom CSS and JavaScript without modifying theme files. Lightweight, simple to use, and works exactly as expected. Highly recommended for WordPress users and developers.


Excellent Plugin for Adding Custom CSS & JavaScript

Add unlimited custom CSS and custom JavaScript to WordPress from the admin panel, with a live code editor, autocomplete, and minified output.

Live Custom CSS JS Code Editor vs WP Add Custom CSS and JS