Yiannis Christodoulou

<p>The <strong><a href="https://www.web357.com/easy-custom-code-wordpress-plugin?utm_source=wp_ecc_repo&utm_medium=wp_listing_ecc&utm_campaign=wp_repo_link_ecc&utm_content=wp_repo_link_to_plugin_page_ecc" rel="nofollow ugc">Easy Custom Code WordPress Plugin</a></strong> easily customize your WordPress website by adding your own <strong>LESS</strong>, <strong>CSS</strong>, and <strong>JavaScript code</strong> directly via the built-in WP Customizer. With this plugin, there’s <strong>no need for a child theme</strong> or additional files. Simply insert your custom code, and it will be compiled into a minified CSS file for styles and a JavaScript file for scripts.</p>
<p>This lightweight plugin is designed for ease of use, providing a seamless and organized way to manage custom styling and scripts without affecting core theme files.</p>
<h3>VIDEO (How it works?)</h3>
<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/Z9GE54_e6zE?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>
<h3>FEATURES</h3>
<ul>
<li>Easily add custom LESS, CSS, and JavaScript to your site.</li>
<li>Manage unlimited external stylesheets and scripts via a modal window.</li>
<li>Control JavaScript placement (head or footer) for optimized performance.</li>
<li>Insert custom HTML in key areas:
<ul>
<li>Inside the <code><head></code> tag.</li>
<li>Immediately after the opening <code><body></code> tag.</li>
<li>Before the closing <code></body></code> tag.</li>
</ul>
</li>
</ul>
<h3>PRO FEATURES</h3>
<ul>
<li><strong>Minified CSS Output</strong> – Option to enable automatic minification of compiled CSS.</li>
<li><strong>Full-Screen Editor</strong> – Maximize the code editor for a distraction-free coding experience.</li>
</ul>
<h3>What is LESS?</h3>
<p>LESS is a CSS preprocessor that allows for variables, nested rules, mixins, and more, making your stylesheets more efficient and maintainable.</p>
<h4>LESS code:</h4>
<pre><code>   @global_color: #FF0000;
   @global_font_size: 14px;
   @secondary_color: #CCC;

   body {
      color: @global_color;
      font-size: @global_font_size;
   }
   .container {
      color: @secondary_color;
      font-size: @global_font_size * 2;
   }
</code></pre>
<h4>Outputs the following CSS:</h4>
<pre><code>   body {
      color: #FF0000;
      font-size: 14px;
   }
   .container {
      color: #CCC;
      font-size: 24px;
   }
</code></pre>
<p>For full LESS documentation, visit <a href="http://lesscss.org/" rel="nofollow ugc">lesscss.org</a>.</p>
<h3>Demo</h3>
<p><a href="https://demo.web357.com/wordpress/easy-custom-code/wp-admin/" rel="nofollow ugc">Try Demo</a><br />
    <code>Username: demo<br />
Password: demo</code></p>


Easy Custom Code (LESS/CSS/JS) – Live Editing

Easiest way to add code on your site. This functionality is a must for any one. Well done.

Perfect plugin

Easy Custom Code plugin lets you easily add custom LESS, CSS, and JavaScript code, along with external stylesheets and scripts, directly into your Wor …

SilkyPress

<p>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.</p>
<h4>Features</h4>
<ul>
<li><strong>Text editor</strong> with syntax highlighting </li>
<li>Print the code <strong>inline</strong> or included into an <strong>external file</strong></li>
<li>Print the code in the <strong>header</strong> or the <strong>footer</strong></li>
<li>Add CSS or JS to the <strong>frontend</strong> or the <strong>admin side</strong></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.

Easy Custom Code (LESS/CSS/JS) – Live Editing vs Simple Custom CSS and JS