# Easy Custom CSS, LESS and JS for WordPress

> Add your own LESS, CSS, JavaScript and HTML from the WordPress Customizer, without a child theme or editing theme files.

- URL: https://www.web357.com/easy-custom-code-wordpress-plugin
- Platform: WordPress
- Edition: Free and PRO
- Latest version: 1.1.5
- Compatibility: WordPress 5.x, WordPress 6.x, WordPress 7.x
- Price: From €39 per year
- Pricing page: https://www.web357.com/easy-custom-code-wordpress-plugin/pricing
- Changelog: https://www.web357.com/easy-custom-code-wordpress-plugin/changelog
- Documentation: https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/intro/
- Demo: https://demo-wordpress.web357.com/try-the-easy-custom-code-less-css-js-wordpress-plugin/
- wordpress.org: https://wordpress.org/plugins/easy-custom-code/
- Free download: https://wordpress.org/plugins/easy-custom-code/
- Included in: [WordPress All Access Bundle](https://www.web357.com/wordpress-bundle)

_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._

**Easy Custom Code** adds LESS, CSS, JavaScript and HTML editors to the WordPress Customizer. You write the code, preview it, and click **Publish**. The plugin saves it in its own files, so theme updates leave it alone.

The free version includes every editor and external files. PRO adds minified CSS and a full-screen editor.

Your changes survive theme updates, because the code lives in the plugin, not in the theme. **Easy Custom Code** is free on [wordpress.org](https://wordpress.org/plugins/easy-custom-code/), and the [CSS and LESS guide](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/css-and-less/) shows the first steps.

## Features

### 🎨 Custom LESS and CSS

**Change the look of your site without a child theme.**

Open **Appearance → Customize → Easy Custom Code** and write [CSS or LESS](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/css-and-less/) in the editor. Plain CSS works as it is, and LESS adds variables, nesting and mixins.

- The preview updates before you publish
- The code is compiled into one stylesheet
- It survives theme updates

![The CSS or LESS editor in the Customizer with LESS color variables applied to headings, links and tables](https://www.web357.com/content/images/ecc-less-css-code.png)

### 🌐 Unlimited External Stylesheets

**Load a CSS library from a URL.**

Paste the address of Bootstrap, Font Awesome or any other stylesheet in the [external stylesheets](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/css-and-less/#external-stylesheets) window. The plugin adds the link tag for you.

- As many stylesheets as you need
- Reorder, add and remove rows in one window
- No theme file to edit

![The Add External Stylesheets window with a Bootstrap stylesheet URL, reorder arrows and an add another resource button](https://www.web357.com/content/images/ecc-external-stylesheets.png)

### 📜 Custom JavaScript

**Add a script without touching the theme.**

Write [JavaScript](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/javascript/) or jQuery in its own editor. You do not need script tags, and the code is saved to a separate file.

- Loads in the footer by default
- Can be moved to the head in Settings
- Survives theme updates

![The JavaScript editor in the Customizer with a jQuery snippet that adds a Hello World element after the title](https://www.web357.com/content/images/ecc-javascript-code.png)

### 📥 Unlimited External Scripts

**Load a script from a URL, in the head or the footer.**

Paste the address of an SDK, a widget or any other script in the [external scripts](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/javascript/#external-scripts) window. The plugin adds the script tags in the position you chose.

- As many scripts as you need
- Same position setting as your own JavaScript
- No theme file to edit

![The external scripts window with a list of script URLs and buttons to add and remove rows](https://www.web357.com/content/images/ecc-external-scripts.png)

### 🧹 Minified CSS Output

**Serve a smaller stylesheet.**

*Minified CSS is in [PRO](https://www.web357.com/easy-custom-code-wordpress-plugin/pricing).* Turn on [Minify CSS](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/settings/#minify-css) and the compiled stylesheet is written without spaces and comments after each publish.

- One switch in Settings
- Your editor keeps the readable version
- Works with caching and CDN plugins

![A line of compiled CSS with all whitespace removed](https://www.web357.com/content/images/ecc-minified-css.png)

### 🧾 Custom HTML in Head and Body

**Paste tracking codes and verification tags where they belong.**

The [HTML code](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/html-code/) section has three editors: inside the head tag, right after the opening body tag, and before the closing body tag.

- Google Analytics, Tag Manager or Meta Pixel snippets
- Site verification meta tags
- Chat widgets and other third-party code

![The HTML code section of the Customizer with editors for In head, After body and Before closing body](https://www.web357.com/content/images/ecc-html-code.png)

### ⚙️ Script Position and CSS Settings

**Decide where scripts load and how CSS is written.**

On the [Settings](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/settings/) page, choose whether your JavaScript and external scripts load in the footer or in the head.

- Footer is the default and the faster choice
- Head is there for scripts that must run first
- *Minify CSS is in [PRO](https://www.web357.com/easy-custom-code-wordpress-plugin/pricing)*

![The Settings page with JavaScript Position set to Footer and Minify CSS set to Minified CSS](https://www.web357.com/content/images/ecc-settings-1.png)

### 🖥 Maximize Editor Link

**Open the editor full screen for longer code.**

*The full-screen editor is in [PRO](https://www.web357.com/easy-custom-code-wordpress-plugin/pricing).* Click **[Maximize editor]** under any editor to [open it full screen](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/javascript/#full-screen-editor).

- Works for CSS, JavaScript and HTML
- Click **Minimize** to return to the Customizer
- More lines in view on small screens

![The Maximize editor link under a code editor in the Customizer](https://www.web357.com/content/images/ecc-maximize-editor-link.png)

### 🧊 Full-Screen Code Editor

**Write and review code without the Customizer's narrow column.**

*In [PRO](https://www.web357.com/easy-custom-code-wordpress-plugin/pricing).* The [full-screen editor](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/css-and-less/#full-screen-editor) gives the code the whole window, so long stylesheets and scripts are easier to read.

- Same editor, more space
- Your changes stay in the Customizer preview
- Close it when you are done

![The maximized code editor in a large modal window above the Customizer](https://www.web357.com/content/images/ecc-maximize-editor-modal-window-1.png)

## Good to know

- **💻 Code in the right place**: Add HTML inside the head tag, right after the opening body tag, or before the closing body tag, from the [HTML code](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/html-code/) section, without touching theme files.
- **🔁 Survives theme updates**: Your code is stored by the plugin and written to its own files, so switching or updating the theme does not wipe it. The [FAQ](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/faq/#where-are-the-compiled-files-stored) shows where the files are.
- **🧪 Try it before you install**: Open the [live demo](https://demo-wordpress.web357.com/try-the-easy-custom-code-less-css-js-wordpress-plugin/) to see the editors in the Customizer, then install the free version from wordpress.org.

## Free vs PRO

| Feature | Free | PRO |
| --- | --- | --- |
| **Custom LESS/CSS code**: Add custom CSS or LESS to your site. All LESS theme variables and mixins are available. | ✓ | ✓ |
| **Unlimited external Stylesheets**: Add external Stylesheets into your site. | ✓ | ✓ |
| **Custom JavaScript code**: Add custom JavaScript to your site. | ✓ | ✓ |
| **Unlimited external Scripts**: Add external Scripts into your site. | ✓ | ✓ |
| **JavaScript Position (head or footer)**: Choose where to place the JavaScript custom code and the external JS Scripts. | ✓ | ✓ |
| **Add custom HTML code**: Add custom HTML code in the head tag, right after open body tag and before closing body tag. | ✓ | ✓ |
| **Maximize editor**: You can open each code editor in a maximized modal window. | – | ✓ |
| **Minified CSS code**: Choose if you would like to have a minified CSS code after the LESS/CSS compiling. The custom.css file will be minified after enabling this option. | – | ✓ |

## Pricing

Each license is a subscription that renews every year. It includes updates and support while it is active. Prices are in EUR. Buy or compare licenses at https://www.web357.com/easy-custom-code-wordpress-plugin/pricing.

| License | Price per year |
| --- | --- |
| 1 site | €39 |
| 3 sites | €59 |
| 5 sites | €79 |
| Unlimited sites | €99 |

## Frequently asked questions

### Which WordPress versions are supported?

WordPress **5.3** or newer, tested up to **7.1**, with **PHP 7.3** or newer. The [installation guide](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/getting-started/installation/) has the steps.

### What is free, and what is PRO?

**Free:** the LESS/CSS, JavaScript and HTML editors, unlimited external stylesheets and scripts, and the JavaScript position setting.

**[PRO](https://www.web357.com/easy-custom-code-wordpress-plugin/pricing):** minified CSS output, the full-screen editor, and 1 year of updates and support.

### Do I need to know LESS?

No. Plain CSS works in the same editor. LESS is there if you want variables, nesting and mixins, as the [CSS and LESS guide](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/css-and-less/#writing-less) shows.

### Can I add Google Analytics, Tag Manager or a chat widget?

Yes. Paste the snippet in one of the three [HTML code](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/html-code/) editors, usually in the head tag or before the closing body tag.

### Can I load code on some pages only?

No. The code is added to every page of the site, as the [FAQ](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/faq/#can-i-target-specific-pages-only) explains. For page-specific scripts, use the conditions of your tag manager.

### My changes do not show on the site. What should I check?

Click **Publish** in the Customizer, then clear your caching plugin and browser cache. The [FAQ](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/faq/#why-are-my-changes-not-showing-on-the-site) has the full checklist.

### What happens after my PRO subscription expires?

PRO keeps working on your sites. You can continue using the version you downloaded, but new releases and support stop until you renew, which you can do at any time from your Web357 account at the current [plan prices](https://www.web357.com/easy-custom-code-wordpress-plugin/pricing).

## Documentation

- [Introduction](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/intro/)
- [Installation](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/getting-started/installation/)
- [Accessing the Settings Panel](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/getting-started/accessing-the-settings/)
- [CSS and LESS](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/css-and-less/)
- [JavaScript](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/javascript/)
- [HTML Code](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/customizer/html-code/)
- [Settings](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/settings/)
- [FAQ](https://docs.web357.com/easy-custom-code-less-css-js-wordpress-plugin/faq/)

---

Part of [Web357](https://www.web357.com). Site map for agents: [llms.txt](https://www.web357.com/llms.txt), [llms-full.txt](https://www.web357.com/llms-full.txt). Documentation: https://docs.web357.com/. Support: https://www.web357.com/support. Append `.md` to any page URL on this site to read it as Markdown.