Easy Custom Code (LESS/CSS/JS) — Live Editing
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.
- Inside the
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