Get started

sandywp / plugins / wp-add-custom-css-and-javascript

WP Add Custom CSS and JS

5.0 out of 5 stars. 5.0 1 reviews

Add unlimited custom CSS and custom JavaScript to WordPress from the admin panel, with a live code editor, autocomplete, and minified output.

Launch a sandbox with this plugin → No signup.
Ready in seconds.

v2.0.1 20+ installs WP 4.7+ PHP 7.0+

By D3 LOGICS · Read the readme on WordPress.org

your-sandbox.sandywp.com/wp-admin
WP Add Custom CSS and JS running inside a SandyWP sandbox

What you get inside

3 screens

  • Manage all your custom CSS and JS snippets from one table.

  • The custom CSS editor with syntax highlighting and autocomplete.

  • The custom JS editor with per-snippet options (internal/external, header/footer, frontend/admin).

screenshot 1 of 3
Manage all your custom CSS and JS snippets from one table.

Manage all your custom CSS and JS snippets from one table.

About this plugin

WP Add Custom CSS and JS lets you add custom CSS and custom JavaScript to your WordPress website directly from the admin panel — without editing your theme, child theme, or plugin files. Write your code in a professional editor with syntax highlighting and autocomplete, and it is applied to your site instantly.

Add as many separate snippets as you want, manage them all from one screen, and decide exactly how and where each one loads. Every snippet can be automatically minified (compressed) so your custom code never slows your site down.

This plugin is developed and maintained by d3logics. Browse all of our free WordPress plugins at d3logics.com/plugins.

New to this? Read our full step-by-step guide: How to Add Custom CSS and JavaScript in WordPress.

Why use this plugin?

  • Add custom CSS to restyle your theme without touching theme files.
  • Add custom JavaScript for tracking codes, animations, widgets, and tweaks.
  • Your code is safe when you switch or update your theme.
  • Perfect for quick design fixes and adding third-party snippets.

Key Features

  • Unlimited snippets — add as many custom CSS and JS codes as you want.
  • Management screen — every snippet is listed in a table (like Posts) where you can edit, enable/disable, and delete.
  • Live code editor with syntax highlighting, line numbers, bracket matching, search, and CSS / JavaScript autocomplete (powered by CodeMirror).
  • Per-snippet options:
    • Print the code inline (internal) or save it to an external cached file.
    • Load the code in the header or the footer.
    • Apply the code on the front end, the admin area, or both.
  • Automatic minification — compress your CSS/JS for the fastest possible load time.
  • External files are cached — no database queries on the front end, so there is no performance hit.
  • Keeps your code when you change themes.
  • Secure — capability checks and WordPress nonces on every action.
  • Lightweight, translation-ready, and works with any theme.

Made by d3logics

Need a custom WordPress plugin, theme, or website? The team at d3logics builds custom WordPress solutions. See more of our work and free plugins at https://d3logics.com/plugins.

Questions

How do I add custom CSS in WordPress?

Go to Add Custom CSS & JS → Add Custom CSS, write your CSS in the editor, choose where it should load, and click Publish. It is applied to your whole site instantly — no theme files touched. For a full walkthrough, see our guide: How to Add Custom CSS and JavaScript in WordPress.

How do I add custom JavaScript in WordPress?

Go to Add Custom CSS & JS → Add Custom JS, write your JS, and click Publish.

Can I add more than one CSS or JS code?

Yes. You can add unlimited separate snippets. Each one has its own title, options, and on/off state, and they are all listed in the management table.

What is the difference between “Internal” and “External”?

Internal prints the code inline directly in the page. External saves the code to a cached .css/.js file that loads as a normal file — best for larger code and performance.

Does it minify (compress) my code?

Yes. With “Minify output” enabled (the default), each snippet is automatically compressed when you save it.

Will this plugin slow down my site?

No. External snippets are served as cached static files and minified output keeps them small, so there are no extra database queries on the front end.

My code does not show on the website. What should I do?

  1. If you use a caching plugin, clear the cache after saving.
  2. Make sure the snippet status is Published (not Draft or Trash).
  3. Confirm the snippet’s “Apply on” option matches where you are looking (Front end vs Admin).
  4. Check that the wp-content/uploads/wp-add-custom-css-and-javascript folder exists and is writable (used for external files).

Will my code be lost if I change my theme?

No. Your custom CSS and JS are stored independently of the theme, so they stay active when you switch or update themes.

5.0

1 reviews

  • 5 ★ 1
  • 4 ★ 0
  • 3 ★ 0
  • 2 ★ 0
  • 1 ★ 0

Ratings come from WordPress.org. SandyWP does not collect its own reviews.

sandywp / also on the shelf

Try another plugin

  • Simple Custom CSS and JS

    4.4 · 600K+ installs

    Easily add Custom CSS or JS to your website with an awesome editor.

    Try demo

  • WP Smart Content

    10+ installs

    Easily inject HTML, CSS, JS, styles, scripts & tracking code via hooks / shortcodes with safe mode, scheduling, revisioning…

    Try demo

Spin up a real WordPress site in seconds.

Test plugins, build a demo, hand a client a link — then squash it and start again. No local setup, no Docker.

Create a site → See pricing