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

The Easy Custom Code WordPress Plugin lets you easily customize your WordPress website by adding your own LESS, CSS, and JavaScript code directly via the built-in WP Customizer. With this plugin, there’s no need for a child theme 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.

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.

VIDEO (How it works?)

FEATURES

• Easily add custom LESS, CSS, and JavaScript to your site.
• Manage unlimited external stylesheets and scripts via a modal window.
• Control JavaScript placement (head or footer) for optimized performance.
• Insert custom HTML in key areas:
  • Inside the <head> tag.
  • Immediately after the opening <body> tag.
  • Before the closing </body> tag.

PRO FEATURES

• Minified CSS Output – Option to enable automatic minification of compiled CSS.
• Full-Screen Editor – Maximize the code editor for a distraction-free coding experience.

What is LESS?

LESS is a CSS preprocessor that allows for variables, nested rules, mixins, and more, making your stylesheets more efficient and maintainable.

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 full LESS documentation, visit lesscss.org.

Demo

Try Demo
Username: demo
Password: demo

This plugin is simple to install:

1. Download the easy-custom-code.zip file.
2. Extract the contents.
3. Upload the easy-custom-code directory to /wp-content/plugins/.
4. Navigate to the Plugins page in WordPress and activate the plugin.
5. Configure your settings under Settings > Easy Custom Code.