Simple Custom CSS and JS


Customize your WordPress site’s appearance by easily adding custom CSS and JS code without even having to modify your theme or plugin files. This is perfect for adding custom CSS tweaks to your site.


  • Text editor with syntax highlighting
  • Print the code inline or included into an external file
  • Print the code in the header or the footer
  • Add CSS or JS to the frontend or the admin side
  • Add as many codes as you want
  • Keep your changes also when you change the theme


  • Manage Custom Codes

  • Add/Edit Javascript

  • Add/Edit CSS


  • From the WP admin panel, click “Plugins” -> “Add new”.
  • In the browser input box, type “Simple Custom CSS and JS”.
  • Select the “Simple Custom CSS and JS” plugin and click “Install”.
  • Activate the plugin.


  • Download the plugin from this page.
  • Save the .zip file to a location on your computer.
  • Open the WP admin panel, and click “Plugins” -> “Add new”.
  • Click “upload”.. then browse to the .zip file downloaded from this page.
  • Click “Install”.. and then “Activate plugin”.


  • Download the plugin from this page.
  • Extract the .zip file to a location on your computer.
  • Use either FTP or your hosts cPanel to gain access to your website file directories.
  • Browse to the wp-content/plugins directory.
  • Upload the extracted custom-css-js folder to this directory location.
  • Open the WP admin panel.. click the “Plugins” page.. and click “Activate” under the newly added “Simple Custom CSS and JS” plugin.


What if I want to add multiple external CSS codes?

If you write multiple codes of the same type (for example: two external CSS codes), then all of them will be printed one after another

Will this plugin affect the loading time?

When you click the Save button the codes will be cached in files, so there are no tedious database queries.

Does the plugin modify the code I write in the editor?

No, the code is printed exactly as in the editor. It is not modified/checked/validated in any way. You take the full responsability for what is written in there.

My code doesn’t show on the website

Try one of the following:
1. If you are using any caching plugin (like “W3 Total Cache” or “WP Fastest Cache”), then don’t forget to delete the cache before seing the code printed on the website.
2. Make sure the code is in Published state (not Draft or in Trash).
3. Check if the wp-content/uploads/custom-css-js folder exists and is writable

Does it work with a Multisite Network?


What if I change the theme?

The CSS and JS are independent of the theme and they will persist through a theme change. This is particularly useful if you apply CSS and JS for modifying a plugin’s output.

Can I use a CSS preprocesor like LESS or Sass?

For the moment only plain CSS is supported, but you can check out the Pro version in case you need a CSS preprocessor.

Can I upload images for use with my CSS?

Yes. You can upload an image to your Media Library, then refer to it by its direct URL from within the CSS stylesheet. For example:
div#content {
background-image: url(‘’);

Can I use CSS rules like @import and @font-face?


Who can publish/edit/delete Custom Codes?

By default only the Administrator will be able to publish/edit/delete Custom Codes. On the plugin activation there is a role created called Web Designer. You can assign this role to a non-admin user in order to allow to publish/edit/delete Custom Codes. On the plugin’s Settings page there is an option to remove this role.

Compatibility with qTranslate X plugin
  • If the qTranslate X plugin is adding some [:] or [:en] characters to your code, then you need to remove the custom-css-js post type from the qTranslate settings. Check out this screenshot on how to do that.
My website has HTTPS urls, but the codes are linked as HTTP

The URL for the linked Codes is built just like the URL for other media (from Media Library) by using the WordPress Address option found on the WP Admin -> Settings -> General page, as shown in this screenshot. If the WordPress Address has HTTPS in the url, then the Custom Codes and all the other media will have HTTPS in the url.


Yarkomaa 9, 2019
The best part of this plugin is the ability to have different snippets of code in separate posts like structure. It helps to quickly identify the purpose of that code without having to go through the rest of it. Pretty versatile with a lot of options for control over visibility. Great plugin!
Morso 9, 2019
I am an administrator but also I see this message. You need a higher level of permission. Sorry, you are not allowed to edit posts in this post type.
Duujal 1, 2019
I've been using this plugin for forever, it was rock solid, even when it was left unattended and un-updated for several years. Now its got tons of crap in it, lots of grayed out areas and no revisions unless you go pro? This was my go-to plugin. Simple, clean, perfect. Now it goes in the trash never to be used again. WTF? Why screw up a perfect thing? The author is clearly relying on years of 5-star reviews that have nothing to do with this new version.
Siilo 18, 2019
The free version is useless because revisions are not available.
Siilo 15, 2019
This plugin appears to violate guideline #5 on WordPress Plugins may not contain functionality that is restricted or locked, only to be made available by payment or upgrade. The Pro features are coded on the page but restricted unless you pay for the plugin. If you want to sell a pro version, more power to you, just don't junk up the page with non-functional code and an advertisement to upgrade. Don't get me wrong, it is a good plugin if you just need to add some JS or CSS site-wide.
Read all 60 reviews

Contributors & Developers

“Simple Custom CSS and JS” is open source software. The following people have contributed to this plugin.


“Simple Custom CSS and JS” has been translated into 3 locales. Thank you to the translators for their contributions.

Translate “Simple Custom CSS and JS” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.



  • 08/08/2019
  • Compatibility with the “CMSMasters Content Composer” plugin
  • Feature: keep the cursor position after saving
  • Option: remove the comments from the HTML


  • 05/08/2019
  • Fix: remove the Codemirror library added from WP Core
  • Tweak: use protocol relative urls for custom code linked file
  • Declare compatibility with WordPress 5.2


  • 04/21/2019
  • Tweak: update the Bootstrap and jQuery library links
  • Declare compatibility with WooCommerce 3.6


  • 04/05/2019
  • Fix: remove the editor scrollbar
  • Tweak: rename “First Page” to “Homepage” to avoid misunderstandings


  • 03/15/2019
  • Fix: avoid conflicts with other plugins that use CodeMirror as their editor


  • 12/06/2018
  • Fix: another solution for the bug related to the Edit Custom Code page was blank for WordPress 5.0 and the Classic Editor enabled


  • 12/06/2018
  • Fix: the Edit Custom Code page was blank for WordPress 5.0 and the Classic Editor enabled


  • 11/15/2018
  • Fix: remove compatibility with the Shortcoder plugin. Bug
  • Declare compatibility WooCommerce 3.5


  • 10/16/2018
  • Fix: keep the editor LTR even on RTL websites
  • Fix: flush rewrite rules after modifying the “Add Web Designer role” option


  • 07/13/2018
  • Fix: the default comment for JS for other locales than “en_” was removing the tags
  • Tweak: make the search dialog persistent
  • Tweak: correct the tooltip info for the ‘ccs_js_designer’ option


  • 04/25/2018
  • Fix: add the add/edit/delete custom post capabilities to the admin and ‘css_js_designer’ roles on plugin activation


  • 04/22/2018
  • Fix: “The link you followed has expired” on custom code save if the WP Quads Pro plugin is active
  • Fix: PHP warning for PHP 7.2
  • Change: add/remove the “Web Designer” role only on activating/deactivating the option in the Settings page


  • 03/27/2018
  • Change: check the option name against an array of allowed values


  • 02/04/2018
  • Feature: permalink slug for custom codes
  • Fix: set the footer scripts to a higher priority
  • Update the french translation
  • Fix: allow admin stylesheets from ACF plugin, otherwise it breaks the post.php page
  • Tweak: for post.php and post-new.php page show code’s title in the page title


  • 01/12/2018
  • Feature: add the “Keep the HTML entities, don’t convert to its character” option


  • 01/03/2018
  • Reverse to the wp_footer function for the footer scripts, as the print_footer_scripts function is used also in the admin, which lead to many broken back-ends


  • 01/03/2018
  • Use the print_footer_scripts function for the footer scripts (
  • Escape selectively the HTML characters in the editor (


  • 12/15/2017
  • Fix:
  • Feature: add filter by code type
  • Feature: make the ‘Modified’ column sortable
  • Fix: if the default comment remains in the “Add Custom JS”, then there was no tags added to the code, as the comment contained a tag


  • 12/01/2017
  • Feature: add “Last edited …” information under the editor
  • Fix: jump to line when searching
  • Tweak: add message that the Code Revision data is dummy


  • 10/19/2017
  • Declare compatibility with WooCommerce 3.2 (
  • Fix: avoid conflicts with other plugins that implement the CodeMirror editor
  • Update the CodeMirror library to 5.28 version


  • 10/06/2017
  • Add French and Polish translation


  • 09/07/2017
  • Fix: compatibility with the CSS Plus plugin


  • 08/25/2017
  • Code refactoring
  • Add activate/deactivate link to row actions and in Publish box
  • Make the activate/deactivate links work with AJAX
  • Add Turkish translation


  • 07/11/2017
  • Security fix according to VN: JVN#31459091 / TN: JPCERT#91837758


  • 06/23/2017
  • Feature: option for adding Codes to the Login Page


  • 06/13/2017
  • Fix: compatibility issue with the HTML Editor Syntax Highlighter plugin


  • 05/14/2017
  • Feature: prepare the plugin for translation


  • 04/12/2017
  • Feature: create the Web Designer role
  • Feature: allow Custom Codes to be managed only by users with the right capabilities


  • 02/05/2017
  • Feature: circumvent external file caching by adding a GET parameter
  • Add special offer for Simple Custom CSS and JS pro


  • 12/05/2016
  • Compatibility with WP4.7. The “custom HTML code” was not showing up anymore


  • 10/09/2016
  • Feature: add search within the editor accessible with Ctrl+F
  • Feature: make the inactive rows opaque


  • 09/04/2016
  • Fix: there was a space in the htmlmixed.%20js url
  • Feature: make the editor resizable


  • 08/31/2016
  • Feature: add HTML code
  • Fix: add htmlentities when showing them in the editor
  • Feature: when adding a code, show more explanations as comments


  • 08/25/2016
  • Fix: compatibility with other plugins that interfere with the CodeMirror editor


  • 08/01/2016
  • Add the “Add CSS Code” and “Add JS Code” buttons next to the page title
  • Compatibility with WP 4.6: the “Modified” column in the Codes listing was empty


  • 06/22/2016
  • Add the includes/admin-notices.php and includes/admin-addons.php
  • Feature: change the editor’s scrollbar so it can be caught with the mouse


  • 06/22/2016
  • Check compatibility WordPress 4.5.3
  • Add special offer for Simple Custom CSS and JS pro


  • 04/24/2016
  • Fix: on multisite installs have to create the custom-css-js folder in the upload dir for each site
  • Fix: the deactivate code star wasn’t working when first time clicked
  • Fix: In the add/edit Code page filter which meta boxes are allowed
  • Fix: If the custom-css-js folder is not created of is not writable, issue an admin notice.


  • 04/11/2016
  • Feature: enable/disable codes
  • Feature: add a GET parameter at the end of external files in order to over circumvent caching
  • Fix: don’t add the “” tag from the code if already present.


  • 03/26/2016
  • Fix: the number of codes were limited because query_posts is automatically inserting a limit


  • 03/10/2016
  • Fix: solved a conflict with the shortcoder plugin.


  • 01/04/2016
  • Tweak: Do not enqueue scripts unless we are editing the a custom-css-js type post.
  • Fix: The register_activation_hook was throwing a notice
  • Fix: add window.onload when initializing the CodeMirror editor
  • Tweak: Differentiated the option names for “Where on page” and “Where in site”
  • Fix: set the correct language modes to CodeMirror object
  • Tweak: remove the slug metabox
  • Tweak: use the compressed version of CodeMirror


  • 12/27/2015
  • Tweak: changed the submenus to “Add Custom CSS” and “Add Custom JS” instead of “New Custom Code”
  • Tweak: Use admin_head instead of admin_enqueue_scripts for external files in order to add priority to the code
  • Fix: The javascript code was not shown
  • Fix: For longer code the last line in the editor was hidding because of the CodeMirrorBefore div.


  • 12/14/2015
  • Fix: when a code was sent into Trash it still wasn’t shown on the website


  • 10/12/2015
  • Tweak: for external files use wp_head and wp_footer instead of wp_enqueue_style. Otherwise the CSS and JS is inserted before all the other scripts and are overwritten.
  • Tweak: Save all the codes in files in order to save on database queries
  • Tweak: Rewrite the readme.txt in the form of FAQ for better explanations


  • 06/12/2015
  • Initial commit