facebook_pixel

Simple Custom CSS & JS Pro – Documentation

Installation and Updates

  • Download the .zip file from the email you received.
  • Go to: WordPress Admin > Plugins > Add New to upload the file you downloaded with Choose File.
  • Activate the plugin.

More information at: Installing and Managing Plugins.

When upgrading from the free to the PRO version, the Custom Codes from the free version will be automatically overtaken by the PRO version and the free plugin will get deactivated.

Don’t forget to activate the license in the Custom CCS & JS > Settings > License Key tab, as shown below.

ccj-activate-license

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

ccj-updates

Backend Features

The Editor

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

editor

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.

themes

The Options

The following image shows the options meta box:

options

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.

CSS Preprocessor option will be shown only for CSS codes.

  • None – no preprocessing will be performed.
  • LESS – the code will be preprocessed according to the LESS rules.
  • 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.

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.

preview
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.
preview-duration

When previewing a code, the rules from the Apply only on these URLs section are ignored.

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 Website and 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.

revision

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.

revision-iframe

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.

export
All the code's information is exported (options, preview URL, URL restrictions), except the revisions.

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

import

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.

Credits

Big thanks to the authors of the following open-source scripts: