About this plugin
Simple Custom Code – CSS, JS, and HTML lets you add custom CSS, JavaScript, and HTML to WordPress without touching theme files. Create and manage unlimited code snippets in one place. Every snippet is saved as a file in your uploads folder, so your code loads fast, caches well, and stays portable — no database clutter.
Choose the workflow that fits you. The live Visual CSS Customizer lets you point at any element on your page, click to select it, and style it with real-time visual controls. Or write code directly in the built-in editor with syntax highlighting, autocomplete, and error checking.
Both paths produce clean, ready-to-use code.
Free features include:
- Unlimited CSS, JavaScript, and HTML snippets
- File-based storage for better performance and caching
- Live Visual CSS Customizer with real-time preview
- Gravity Forms Visual CSS Customizer
- Code editor with syntax highlighting and autocomplete
- Code beautifier and error detection
- AI code generation using your own OpenAI API key
- Load snippets on the frontend, admin, login page, or block editor
- Control load position and priority per snippet
- Role-based access control
- Snippet descriptions and groups
- Smart tags: page title, featured image, permalink
- Basic snippet health check
- See which snippets load on each page — view loaded snippets directly on your site
- Import and export single snippets or all snippets
- Import snippets from WPCode, Code Snippets, Header Footer Code Manager, and Simple Custom CSS and JS
Live Visual CSS Customizer
Create designs directly from your site’s frontend using the built-in Visual CSS Editor. Select any element visually, adjust fonts, colors, spacing, borders, and hover effects with live preview, and save when you are happy with the result.
Key features:
- Launch the CSS Customizer from the admin bar with one click
- Select elements visually without writing selectors
- Adjust fonts, colors, spacing, borders, transitions, and hover effects
- See changes in real time before saving
- Every visual change generates clean, optimized CSS
Gravity Forms Visual CSS Customizer
Style Gravity Forms with the dedicated live CSS customizer. Open it from the admin bar under CSS Customize > Gravity Forms and fine-tune form fields, labels, buttons, and layouts in real time. Match your forms to your brand without writing CSS by hand.
Unlimited CSS, JavaScript & HTML Snippets
Go beyond CSS. Create and manage unlimited snippets for CSS, JavaScript, and HTML from a single interface. Each snippet type is built for its purpose, so you can style, script, and structure your site exactly as you need.
Highlights:
- Create as many snippets as you need for CSS, JS, or HTML
- All snippets saved as external files for better caching and portability
- Activate or deactivate snippets anytime
- Load externally or inline
- Choose code position: head, after body, or footer
- Set priority levels to control load order
- Rename snippet files for better organization
Flexible Loading Locations
Control where your code loads. Unlike basic custom CSS plugins, Simple Custom Code gives you granular control over the context and location of each snippet:
- Frontend: load CSS, JS, or HTML on the public-facing side of your site
- Backend: inject code into the WordPress admin dashboard
- Login Page: target the WordPress login screen for branded login pages
- Block Editor: load code inside the Gutenberg block editor
You never load unnecessary code where it does not belong, keeping your site lean and fast.
Advanced Code Editor with Autocomplete & Syntax Highlighting
The built-in code editor is built for developers and beginners alike:
- Syntax highlighting: CSS, JavaScript, and HTML are color-coded for easy reading
- Real-time autocomplete: the editor suggests CSS properties, JavaScript functions, and WordPress hooks as you type
- Code beautifier: format messy code with one click
- Error detection: flags syntax issues before you save, so mistakes never reach your site
AI-Powered Code Generation
Describe what you need in plain English, and the AI generates ready-to-use CSS, JavaScript, or HTML. Whether it is a sticky header, a custom button style, or an admin tweak, tell the AI what you need and review the result in the editor before saving.
- Works with CSS, JavaScript, and HTML snippets
- Uses your own OpenAI API key, so you control your API usage and costs
- Generated code inserts directly into the editor for review and adjustment
Smart Plugin Settings
Total control over how and where your snippets load:
- Role-based access control: limit editor access to specific WordPress roles
- Cache-busting file versions: browsers always load the most recent changes
- Inline or external loading per snippet
- Adjust snippet priority, file naming, and execution location from the settings page
See Loaded Snippets on the Page
Check exactly which snippets are active on any page. The plugin lists the loaded snippets directly on your site so you can verify what is running, where, and in what order — without guessing or hunting through the admin.
Upgrade to Pro
The free version covers the essentials. The Pro upgrade adds advanced features for developers and agencies who need complete control over code delivery:
- Conditional loading: target snippets by URL, post type, user role, date, or WooCommerce cart and page conditions
- Version history: save a snapshot of every snippet change, compare versions side by side, and restore with one click
- Code minification: automatically minify CSS and JavaScript on save
- SCSS and Less compiler: write styles in SCSS or Less and compile to CSS automatically
- Reusable snippets: include one snippet inside another with {{include:ID}} or the [reusable_snippet] shortcode
- Expanded smart tags: user details, WooCommerce product and order data, ACF fields, dates, UTM parameters, and more
- WooCommerce positions: load code on cart, checkout, product, shop, and thank-you pages
- Cache mode: combine active snippets into a single cached file per page
- Priority technical support
Pro is built for performance-focused developers and agencies who need production-grade code management on WordPress. com
Who This Is For
This plugin helps anyone customize WordPress design and functionality quickly, safely, and without touching core files:
- Web developers who want full control over styling and scripting without modifying theme files
- Designers who use the Visual CSS Customizer to fine-tune typography, colors, and layouts without code
- Site owners who make small design adjustments or add scripts without hiring a developer
- Agencies and freelancers who manage multiple client sites and store custom code snippets efficiently
* WordPress beginners who learn CSS and JavaScript using visual controls, AI assistance, and instant preview