This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

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

Description

Add quickly and easily your own custom LESS/CSS/JAVASCRIPT code and external resources (stylesheets and scripts) to your website, via the core WP Customizer. You don’t even need to create a child-theme or create any other files in your current theme if you use this plugin. Just add your javascript, LESS/CSS code and everything will be stored automatically, in a compiled CSS file for the styles, and a JavaScript file for the scripts.

VIDEO (How it works?)

FEATURES

  • Add custom LESS/CSS to your site.
  • Unlimited external Stylesheets (modal window).
  • Custom JavaScript code.
  • Unlimited external Scripts (modal window).
  • JavaScript Position (head or footer) (Choose where to place the JavaScript custom code and the external JS Scripts.)
  • Add custom HTML code in the <head> tag.
  • Add custom HTML code right after open <body> tag.
  • Add custom HTML code before closing </body> tag.

PRO FEATURES

  • Minified CSS code (You are able to choose from settings if you would like to have a minified CSS code after the LESS/CSS compiling.)
  • Maximize editor (You can open each code editor in a maximized modal window.)

expore the pro feautures

What is LESS?

Here is an example how to write LESS/CSS code.
Full documentation and less syntax in the official website lesscss.org

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

Which outputs (CSS):

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

Demo

Try Demo

    Username: demo
    Password: demo

Screenshots

  • Add custom LESS/CSS to your site. All LESS theme variables and mixins are available.
  • Add custom JavaScript to your site.
  • Add external Stylesheets into your site.
  • Add external Scripts into your site.
  • Add custom HTML code (in head, after body tag and before closing body).
  • Maximize editor link.
  • Maximize editor.
  • Minified CSS code.
  • Settings.

Installation

The plugin is simple to install:

  1. Download the file easy-custom-code.zip.
  2. Unzip it.
  3. Upload easy-custom-code directory to your /wp-content/plugins directory.
  4. Go to the plugin management page and enable the plugin.
  5. Configure the options from the Settings > Easy Custom Code page.

FAQ

My custom code (CSS and JS) which added in this plugin only, will be deleted after uninstalling the plugin?

Yes, your custom code (LESS/CSS/JS) will be deleted. Also, the created css file will be deleted.

Why I need this plugin?

Because, you can quickly and easily add your own custom code LESS/CSS/JAVASCRIPT and external resources (stylesheets and scripts) into your site, without creating a child-theme or create any other files in your current theme.

Reviews

March 31, 2020
Easiest way to add code on your site. This functionality is a must for any one. Well done.
October 11, 2019
A must-have plugin for adding external libraries and custom css or js code in the website, awesome work!
Read all 3 reviews

Contributors & Developers

“Easy Custom Code (LESS/CSS/JS) – Live editing” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

16-Oct-2019 : v1.0.1

  • [New Option] Add custom code in the head tag.
  • [New Option] Add custom code right after open body tag.
  • [New Option] Add custom code before closing body tag.
  • [New Feature] You can now open each code editor in a maximized modal window (Only in PRO version).
  • [Improvement] The generated CSS file (.css) is now stored with a unique name, into the folder /wp-content/uploads/easy-custom-code/css/style_123456.css, instead of the /wp-content/uploads/custom.css as it was before.
  • [Improvement] The generated JavaScript file (.js) is now stored with a unique name, into the folder /wp-content/uploads/easy-custom-code/js/script_123456.js/, instead in head.
  • [Improvement] The CSS file name option has been removed. The generated CSS file name will be unique now.
  • [Improvement] New strings have been added to the language file (.pot).

08-Oct-2019 : v1.0.0

  • First beta release