Users can enjoy the structured, multi-tabbed appearance of the editor, whereby each .css or .js file displays in its own tab. To make writing code quick and effective, the plugin includes colorful syntax highlighting, line numbering and automatic indentation, and also supports SCSS for a more streamlined scripting experience—a feature currently unavailable in native WordPress. Users can export code from the plugin, either individual files or all files at once, into .css files, or alternatively, can import .css files directly into the plugin to save time in development.
- Use the tabbed multi-file interface to organize code files into separate entries
- Write clean code quickly, the plugin includes syntax highlighting, line numbering and automatic indentations
- Save your progress periodically, the plugin includes an autosave feature so you can work undistracted and not worry about losing process
- Reinstate a previous version of your code with the history revision feature
- Preview changes while you work, but only publish on the front-end when you’re ready
- Use a live view feature to view code changes in real time (available on certain browsers)
- Use SCSS for quicker and more efficient scripting
- Enable minification of code files to remove unnecessary characters, keep file sizes down and boost site performance
- Export code into .css files for later use, or import existing .css files directly into the plugin
Once the plugin has been installed, click Activate.
Return to the WP Zone website, log into your account and navigate to Licenses, search for the plugin and copy the license key and return to your site to paste in the key.
Once the plugin is installed and activated, it is ready to use. There are no additional settings or configuration steps to be taken, you can simply begin using the plugin.
As you open the Custom CSS menu, you’ll see a code editor panel on the left-hand side of the screen with a few options on the right-hand side.
Adding a new .css file
To add a new file, click either the + CSS or + SCSS tab. This will automatically add a new tab for you to work in. You can toggle between the tabs to view and edit your code.
By default, any new file added will be assigned the name "new". To rename the filename, enter custom text in the text area and click Rename.
If you’d like to add it to the visual editor (TinyMCE), select this checkbox.
Syntax Highlighting, Line Numbering and Indentation
Once you begin adding CSS code, you’ll see that it formats with standard syntax highlighting, line numbering and indentations.
Saving and Publishing Work
To view your work, click Save and your changes will be visible on the front-end of your site. These changes will only be visible to users with Admin level privileges, not general site visitors.
Once you are happy with your CSS, click Publish to deploy the code. Now, users logged out of the site will be able to view the changes.
Enabling Live View
To preview your work while you are busy writing code, you can enable the Live View feature. This will open a new tab and show the CSS changes you're working on in real-time.
As you work, you’ll see a log of your progress begin accumulating in the Revisions column. At any point you can reinstate a former version of your code by simply clicking on the revision timestamp. If you like, you can also delete draft revisions that are no longer useful to you. Clicking the Delete Draft Revisions button will instantly delete all previous drafts.
If at any point you need to delete a file, simply click the Delete button.
If you’d like your CSS files to automatically minify, select the Minify Output option.
Once you are happy with your work, you can export the .css file and use it on another site. To do so, click the Download button, or alternately, if you have multiple tabs with multiple files, click Download All to batch download everything.
The files will save as a .zip file in your Downloads folder.
If you’d like to import an existing .css file into your website, you can do so via the plugin itself. To do so, click in the Choose File button, select the file from your computer and then click Upload. The screen will refresh and the files will be added to your website.
Expanding the editor console
If you need more space to write code, click the Expand Editor button and the plugin will display in full screen view for an uninterrupted work experience.
To return to the original view, click Contract Editor.
Additional Information and Support
If you like our products and would like to purchase similar plugins, please visit our shop page.
See the changelog for this plugin by following this link.