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 …

SilkyPress

Customize your WordPress site’s appearance by easily adding custom CSS and JS code without even having to modify your theme or plugin files. This is perfect for adding custom CSS tweaks to your site.
<h4>Features</h4>
<ul>
<li>Text editor with syntax highlighting </li>
<li>Print the code inline or included into an external file</li>
<li>Print the code in the header or the footer</li>
<li>Add CSS or JS to the frontend or the admin side</li>
<li>Add as many codes as you want</li>
<li>Keep your changes also when you change the theme</li>
</ul>

Simple Custom CSS and JS


When saving CSS as external file, I'm disappointed that you can't name the css file, you can change the permalink and then a duplicate CSS file is created with the name but it is still not used by this plugin.It is much better than Jetpack's version which is horrible.



I have now stopped using it as it also forces you to load the CSS where I needed to conditionally include it, I am now using a text editor, FTP, and wp_enqueue_style() in a child functions.php.  Much easier (at least after working it out), the below code added before the html header started (not sure if that matters):



//===========================================================================
function CompanyHeaderAssets()
//===========================================================================
{
    //--- Main Company CSS ------------------------------------------------
    $CssDir  = '/wp-content/themes/oceanwp-child-theme-master/';
    $CssName = 'Company CSS for Dynamic Pages.css';
    wp_enqueue_style("CompanyCss4All", "{$CssDir}{$CssName}", '', time());

    //--- Main Company CSS 4 ADMINS ---------------------------------------
    if  (IsCompanyVolunteer())
    {
        //--- Not displaying to visitors ------------------------------------
        $CssName = 'Company CSS for Image Gallery Metadata Tooltips (Volunteers Only).css';
        wp_enqueue_style("CompanyCss4StaffOnly4ImageMetadata", "{$CssDir}{$CssName}", '', time());
    }
}
add_action( 'wp_enqueue_scripts', 'CompanyHeaderAssets' );


Good Except Can't Name Files (4567.css etc)


This is a nice handy plugin, but it seems to not load CSS on Elementor pages for some reason. Otherwise nice plugin.


Handy plugin but...


This plugin does flush all permalinks settings on install, without confirmation of Admin, which impacted the whole permalinks settings, and required me to deactivate and reactivate multiple plugins to get their permalinks settings setup again, which is loss of time and requires a clear confirmation before doing that on install.


Impacted the permalinks

Just what I was looking for

Easily add Custom CSS or JS to your website with an awesome editor.

Live Custom CSS JS Code Editor vs Simple Custom CSS and JS