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

Description

The Easy Custom Code WordPress Plugin 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

Screenshots

  • Add custom LESS/CSS styling directly from the WordPress Customizer.
  • Insert custom JavaScript with ease.
  • Manage external stylesheets.
  • Add external scripts and choose their placement.
  • Insert custom HTML snippets in key sections (head, body open, body close).
  • Full-screen editor mode for an enhanced coding experience.
  • View and edit minified CSS for optimal performance.
  • Plugin settings panel for easy configuration.

Installation

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.

FAQ

Will my custom CSS and JS be deleted if I uninstall the plugin?

Yes, all custom LESS, CSS, and JavaScript added through this plugin will be deleted, including the compiled CSS file.

Why do I need this plugin?

This plugin allows you to quickly and efficiently add custom styling and scripts to your site without modifying theme files, creating a child theme, or manually enqueuing scripts.

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

31-Jan-2025 : v1.1.2

  • Full compatibility with WordPress 6.7.x.

27-Nov-2024 : v1.1.1

  • Bug Fix: HTML entities (e.g., &gt;, &lt;) are now properly decoded.
  • Minor fixes and performance improvements.

12-Aug-2024 : v1.1.0

  • Bug Fix: LESS syntax errors for &:focus and &:hover resolved.

19-Jul-2024 : v1.0.9

  • Full compatibility with WordPress 6.6.x.
  • LESS CSS compiler updated to v0.8.0.
  • Minor fixes and improvements.

18-Apr-2024 : v1.0.8

  • Full compatibility with WordPress 6.5.x.
  • Minor fixes and improvements.

23-Oct-2023 : v1.0.7

  • Full compatibility with WordPress 6.3.x.
  • Minor fixes and improvements.

07-Jun-2023 : v1.0.6

  • Compatibility: Fully compatible with WordPress 6.2.
  • Minor fixes and improvements.

14-Jun-2022 : v1.0.5

  • Compatibility: Fully compatible with WordPress 6.0.
  • Minor fixes and improvements.

11-Feb-2022 : v1.0.4

  • Compatibility: Fully compatible with WordPress 5.9.
  • Minor fixes and improvements.

28-Jul-2021 : v1.0.3

  • Compatibility: Fully compatible with WordPress 5.8.
  • Minor fixes and improvements.

09-Apr-2021 : v1.0.2

  • Compatibility: Fully compatible with WordPress 5.7.
  • Minor fixes and improvements.

16-Oct-2019 : v1.0.1

  • New Feature: Add custom code in the head tag.
  • New Feature: Add custom code right after the body tag opens.
  • New Feature: Add custom code before the closing body tag.
  • Improvement: Unique CSS and JS file names for better cache handling.
  • Improvement: Removed the manual CSS file name option; now, files are generated dynamically.
  • Improvement: Enhanced language file (.pot) with additional strings.

08-Oct-2019 : v1.0.0

  • Initial beta release.