For updates you’ll be notified in the WorPress Admin -> Plugins page and by clicking update now you will receive the latest version.

Backend Features

The Editor

The editor is based on the well known CodeMirror text editor, which is specialized in editing code.

You don’t need to add the CSS/JavaScript opening and closing tags, that is handled automatically. Below the editor you’ll find the Last edited by name on date line to let you know who last edited the code.

You have the possibility to change the editor’s theme on the WordPress Admin > Custom CSS & JS > Settings page to better fit your taste.

The Options

The following image shows the options meta box:

The meaning of the options are:

Linking type

External file – the code will be linked as an external file with the <link rel="stylesheet" type="text/css" href="http://www.wp-site.com/code_id.css" media="all"/> or the <script src="http://www.wp-site.com/code_id.js" type="text/javascript"></script> code.

Internal – the code will be outputed directly in the header or the footer of the HTML code.

The externally linked file has the advantage that it can be cached in the browser and it will not be loaded everytime the browser reloads.

Where on page

Header – the code will be linked or outputed in the header of the HTML code.

Footer – the code will be linked or outputed in the footer of the HTML code.

The external CSS files will always be linked in the header. For the external JavaScript file you have the option to link them in the header or in the footer or the HTML code.

Where in site

In Frontend – the code will be shown only in the frontend of the website.

In Admin – the code will be shown only in the backend of the WordPress installation.

SASS (only SCSS syntax) – the code will be preprocessed according to the SASS rules, but only with the SCSS syntax. For example, this will work:

$primary-color: #333;
body {
color: $primary-color;
}
and this will not work:

$primary-color: #333
body
color: $primary-color

If you don't know what a CSS Preprocessor is, then you should leave it to None.

Minify the code

inifying the code means removing the unnecessary characters (like whitespace, new line or comments) from the code in order to reduce the size of the code.

Enabled - the code will be minified in a similar way to the YUI Compressor.

Disabled - the code will be outputed exactly the way it was written in the editor.

Add HTML within the Page

If you want to add some HTML code within the page, whether in the page/post's content, or within a widget, then you can make use of the "shortcode" functionality.

All the shortcode functionality is explained in detail also in the comments found in the editor when you click on the "Add HTML Code", so you always have the documentation at hand, as shown in the following screenshot:

In the following screencast you'll find an example of how to add Google Maps in a post by using the plugin with a shortcode:

Preview the Code

This is a handy way of checking if the code you're adding to the website looks alright or not before you publish it.

Please make sure you write the full URL to the preview page in the preview input field, not only a relative path.

By clicking on the Preview Changes button, the preview page will be opened in a new tab. The generated URL in the new tab can be shared with your co-workers or your customers, so you can ask their opinion about the changes before making them live. When you make additional changes to the code, you have to regenerate the preview by clicking the Preview Changes button again.

By default, the preview will be available only for 1 hour. After 1 hour the page will be shown as normal and you'll be notified by an alert that the preview expired. You can change the preview duration on the WordPress Admin > Custom CSS & JS > Settings page.

Apply only on these Pages

By default the code is applied on the entire website. Use this feature to restrict the pages on which the code shows up. For example, the following settings will apply the code on the entire website, except on the pages with the URL containing the word "category":

You can combine the rules to match exactly the pages you want. The combining works like a logical AND, which means the two rules from the example above can be read as:

Apply the code on All Websiteand the URL not contains the word category.

The following rules are available:

All Website

First Page

URL contains <string>

URL not contains <string>

URL is equal to <string> (see below)

URL not equal to <string> (see below)

URL starts with <string> (see below)

URL ends by <string>

WP Conditional Tag <string> (see below)

For the URL is equal to, URL not equal to, URL starts with rules you have to use a relative URL that starts with a single slash. For example, if you want to match the products, the following rule will suffice Starts with "/products/", as shown in the below example:

With the WP Conditional Tag rule you can use any of the WordPress native Conditional Tags normally used in template files. For example, for displaying a code only on archive pages for any category, except the `movies` category use the WP Conditional Tag is_archive() && ! is_category( 'movies' ) rule, as shown below:

Code Revisions

Code revisions are very useful especially if you're working in a team and want to see what changes were made to the code over time.

You can compare two revisions, which gives you a side-by-side diff output of the code and in addition the changes to the options.

In the example above you see that User 222 changed a line, added a line and modified two options (Linking type and Minify the code).

By restoring to an older revision you'll also restore the code's options.

Import/Export Codes

If you are moving to a new host or just want a backup of your site data, then Exporting your code can come very handy. You can export the codes with the native WordPress Export tool located at WordPress Admin > Tools > Export.

The importing is done also with the native WordPress Import tool, as shown in the screenshot below.

FAQ

Is there any performance penalty to having many individual CSS or Java codes as opposed to one putting it all in one big file?

No, from a performance point of view it makes no difference if you have many small codes or one big code.

When you save a code there is a "codes tree" built and saved in the database and the actual code is saved in a file. When you load a page only the "code tree" is retrieved from the database in order to identify the specific codes that need to be loaded (so only one database query). The internal codes are loaded from the saved files and the external codes are simply linked.

The benchmark test for measuring the loading time showed only minuscule differences between many small files and one big file.