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

The Easy Custom Code WordPress plugin adds LESS, CSS, JavaScript and HTML editors to the WordPress Customizer.

You want to change a colour, hide a button or add a tracking code. Editing the theme means your change is gone after the next theme update. With this plugin you write the code in the Customizer, preview it, and click Publish. The code is saved in its own files, so theme updates leave it alone.

Setup and every editor are explained in the official documentation.

👉 See it on our demo site.

How it works

1. Go to Appearance → Customize → Easy Custom Code.
2. Write CSS or LESS, JavaScript, or HTML in the editor you need. The preview updates as you type.
3. Click Publish. Your styles are compiled into one CSS file and your scripts into one JS file.

Free features

• CSS and LESS editor: plain CSS works as it is; LESS adds variables, nesting and mixins. CSS and LESS »
• JavaScript editor: add JavaScript or jQuery without script tags. JavaScript »
• Unlimited external stylesheets and scripts: paste the URL of a library such as Bootstrap or Font Awesome and the plugin adds the tag for you.
• JavaScript position: load your scripts in the footer (default) or in the head. Settings »
• Custom HTML in three places: inside the head tag, right after the opening body tag, and before the closing body tag, for tracking codes, verification tags and widgets. HTML code »
• Live preview: see every change in the Customizer before you publish it.
• Cache-friendly files: compiled CSS and JS files get new names when they change, so caching plugins and CDNs pick up the new version.

PRO features

Upgrade to Easy Custom Code PRO for a smaller stylesheet and more room to write. Plans cover 1, 3, 5 or unlimited sites and include 1 year of updates and support, with a 30-day money-back guarantee.

• Minified CSS: the compiled stylesheet is written without spaces and comments after each publish.
• Full-screen editor: open any editor in a large window for long stylesheets and scripts.

What is LESS?

LESS is a CSS preprocessor. It adds variables, nested rules and mixins, so your stylesheets are shorter and easier to change.

LESS 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;
   }

Outputs the following CSS:

   body {
      color: #FF0000;
      font-size: 14px;
   }
   .container {
      color: #CCC;
      font-size: 24px;
   }

For the full LESS documentation, visit lesscss.org.

Documentation

• Introduction
• Installation
• Accessing the settings
• CSS and LESS
• JavaScript
• HTML code
• Settings
• FAQ
• Get support

Source Code

The PHP source of this plugin is readable in the distributed files. The bundled LESS compilers are third-party libraries: lessphp (includes/libs/lessphp.php, used to compile on publish) and less.js (public/js/less.min.js, used only for the live preview in the Customizer), whose source is at https://github.com/less/less.js.

External Services

The plugin does not send your data to Web357 or any other service. It only loads the external stylesheets and scripts whose URLs you add yourself; those files are requested by your visitors’ browsers from the servers you chose. A LESS @import of a remote URL is fetched by your server when you publish.