IMPORTANT NOTICE

Hello everyone,

During the past year we have been working on a successor to CSS & JavaScript Toolbox, which we have named Easy Code Manager. This new version has a clean responsive user-interface that is both enjoyable and easy to use.

You can download it from our Easy Code Manager plugin page here: https://wordpress.org/plugins/easy-code-manager

Easy Code Manager PLUS

We also have a premium plugin that extends the free one with an amazing amount of features. Why not take a look to see if it suits your needs by clicking into the Easy Code Manager website: https://easy-code-manager.com

Compatibility

At this stage CSS & JavaScript Toolbox and Easy Code Manager cannot be installed and activated at the same time. It is advised to BACKUP all your CSS & JavaScript Toolbox code blocks, code files and template data, and take note of all your assignments and shortcode placements. This is a precautionary recommendation so you don’t lose your work.

Once CSS & JavaScript Toolbox is deactivated, then you should be able to install and activate Easy Code Manager. Currently, both plugins share the same database structure and depending on your current version of CSS & JavaScript Toolbox, you may just see all your original CJT code blocks intact in the Easy Code Manager main dashboard. However, please do not rely on this and BACKUP all of your work before trying to install the Easy Code Manager plugins on your site.

CSS & JavaScript Toolbox premium license holders

If you are a premium CSS & JavaScript Toolbox (CJT) license holder with a valid license key that has NOT expired, you will be eligible to receive Easy Code Manager for free with one year of premium updates. Please send us a message along with your valid license key via our Contact page OR via: info (at) easy-code-manager.com

Thanks for your support.

Regards,
Damian Baker

Overview

What is CJT?

The abbreviation CJT stands for ‘CSS & Javascript Toolbox’.

CJT was originally developed to help users, bloggers, novice and professional developers with integrating code into their WordPress-powered website. It was developed to provide solutions to many common tasks. For example, adding JavaScript snippets or CSS stylesheets into WordPress pages and posts.

CJT was designed to be flexible and very easy to use. In fact, it can be used in as little as two steps – simply adding your code and assigning where the code goes. The possibility of assigning/associating a piece of code to output or run anywhere within WordPress is just the beginning of what CJT can do!

add-it-assign-it-transparent

History of CJT

We released our first version of CJT (v0.3) on the WordPress.org plugin repository in September 2011. CJT until version 0.8, could only allow users to run JavaScript and CSS stylesheet code in parallel with WordPress pages and posts. Since then, HTML and PHP support has been added.

Today, CJT (including CJT Free and CJT Dev) has been solidly worked on by two developers for over two years, equating to around 3000 hours of development time. CJT Pro/Dev has now grown to over 930 files and folders totalling 4.3MB (as of v6.4)

CJT’s internal structure is based on the MVC design pattern. In order to make CJT software maintainable over time and to provide our customers with the best support and upgrade service, a lot of development work has gone into the internal structure.

Specific care has also been taken when it comes to deferring. CJT only reserves memory resources and usage processes when it needs to, otherwise it will not get involved. WordPress plugins that get involved when not being used can risk Memory size has been exceeded issues.

Back To Top

Introduction

The most basic and fundamental task that CJT is developed for, is to allow assigning a piece of code to WordPress pages/posts.

Creating a separate small plugin might be a good solution, however the user has to identify visitor requests and find a way to associate the parallel code. Also when reassigning the code to different pages/posts, updating the plugin would then be required.

CJT is doing all of its functionality behind the scenes. It not only takes the responsibility for identifying the request and running the code, it allows users to manage and organise their code. This is what gives CJT users the chance to clear their headspace from all the other complexities and just focus on the model they wish to create.

Not all users are able to create a WordPress plugin – even a single line WordPress plugin. Some users prefer not to deal with the technical things like connecting through FTP and dealing with programming editors. CJT solves that problem by providing a simple UI that would be easy for most WordPress users who know the basics of making a web site.

Back To Top

User Manual

The User Manual will demonstrate CJT Free/Dev plugin features and possible usage scenarios. It will also demonstrate usage of the Code Auto Complete extension plugin as it now plays a big part of CJT – even though its presented as a separate extension plugin.

Although the User Manual is primarily aimed at the CJT Pro/Dev users, CJT Free edition users can still access this manual and find it useful. Please note however, that there may be a few features and usage scenarios that are not available for CJT Free.

Through the User Manual, we’ll introduce CJT by focusing on all of its features and discuss how they can be utilised, making it extremely useful to manage your code, assign it to pages/posts, and in general – streamline your WordPress website development.

Please stay tuned for the User Manual, which is coming soon.

Back To Top

Installation

Fresh install — WordPress Plugins interface

  1. Download CJT zip package (for CJT Dev – see purchase receipt)
  2. Login to WordPress Dashboard
  3. Open Plugins page
  4. Upload the zip package and Activate the plugin
  5. Click on the CSS & JavaScript Toolbox Dashboard menu and follow the admin notice on the TOP to complete the installation process

Fresh install — FTP

  1. Connect to WordPress server using FTP
  2. Unzip the CJT package
  3. Upload css-javascript-toolbox folder found in the zip package to wp-content/plugins folder
  4. Open Plugins page and Activate the CJT plugin
  5. Click on the CSS & JavaScript Toolbox Dashboard menu and follow the admin notice on the TOP to complete the installation process

Fresh install — Host Panel File Manager

  1. Login to Host Panel
  2. Open Files Manager provided by the Host Panel
  3. Upload the zip package to wp-content/plugins folder
  4. Use File Manager Tools to unzip the package
  5. After a new folder named ‘css-javascript-toolbox’ appears, delete the zip package you uploaded
  6. Open Plugins page and Activate the CJT plugin
  7. Click on the CSS & JavaScript Toolbox Dashboard menu and follow the admin notice on the TOP to complete the installation process

Automatic upgrades

Like any WordPress plugin, CJT would notify you if updates are available from the CJT server. Click on the Update Now link. If there is a database upgrade to be performed, CJT will display admin notification to guide you through this process. You can also go directly to the CSS & Javascript Toolbox page and follow the upgrade steps.

Uninstall

NOTE: CJT does not clean up its database records when deactivated/deleted. If you require all data associated with CJT to be deleted, please click the General Plugin Settings button (cog icon), and under the Uninstall tab, select the Wipe all data! option. Then simply:

  1. Deactivate CJT plugin via WordPress Plugins list page.
  2. Delete CJT plugin via WordPress Plugins list page.

Back To Top

Troubleshoot

Content is being writing!

Thanks for your patient!

Back To Top

Advanced Code Editor

CJT comes with an Advanced Code Editor that supports many languages, which is a necessity these days for almost all WordPress users.

  • Syntax highlighting for four languages (i.e. CSS, HTML, JavaScript, PHP)
  • Over 20 editor themes (GitHub, Eclipse, Chrome, Textmate, etc – more can be imported)
  • Automatic indent and outdent
  • Handles huge documents (four million lines seems to be the limit!)
  • Fully customizable key bindings including Vim and Emacs modes
  • Highlight matching parentheses
  • Toggle between soft tabs and real tabs
  • Displays hidden characters
  • Drag and drop text using the mouse
  • Line wrapping
  • Code folding
  • Multiple cursors and selections
  • Live syntax checker (currently JavaScript, CoffeeScript, CSS, XQuery)
  • Cut, copy, and paste functionality

Supported Languages

The CJT code editor currently supports syntax highlighting and error checking for four languages.

  • CSS (Cascading Style Sheet)
  • HTML (HyperText Markup Language)
  • JS (JavaScript)
  • PHP (PHP: Hypertext Preprocessor)

Back To Top

Code Blocks

About

CJT Code Blocks are the basic unit for writing code and assigning it to specific WordPress requests (e.g. for a Page, Post, Category, Blog index, Expression, etc). It is the main gateway for interaction, allowing users to have their codes assigned. In general, blocks should always be created when you need to assign a piece of code with specific requests.

CJT is very flexible, allowing you to create multiple blocks, while:

  • assigning each block to different requests
  • assigning each block to the same request

You can assign multiple blocks to the same request, and allow multiple requests to share the same block (or blocks). The possibilities are endless.

CJT Blocks require only two steps in order to get them involved with the request. The first is to tell CJT where this block should be assigned (to the request), and the second is to write the code that needs to be assigned. 

Blocks can be arranged in different levels. This includes the Global Block Level and the Page/Post Level (Metabox Block).

Back To Top

Writing Code

Writing code is the step taken within the code editor window of the code block, and is what carries out the functionality that’s intended to be performed by the block.

CJT is providing users with a number of tools for writing code. One of these powerful tools is the Advanced Code Editor (ACE) with syntax highlighting and error checking. The editor can also support a majority of the modern functions that’s currently being used by a lot of code editors like: folding, unfolding, collapsing and expanding code regions.

More helpful tools that can be utilised include: restore block revisions, switch editor languages, switch editor themes, full-width and full-screen mode, adjust font sizing, and the Code Auto Complete (CAC) extension.

Before writing HTML, JavaScript, CSS or PHP code, it is advised to set the editor to your chosen language. This way you will get the benefits from language-dependant features such as syntax highlighting and error checking. CJT is currently not doing that automatically for you. Although that said, in our development pipeline is a feature called a Multiple Code Files Block that should be able to handle those things automatically.

The following languages are currently being supported:

  • CSS (Cascading Style Sheet)
  • HTML (HyperText Markup Language)
  • JS (JavaScript)
  • PHP (PHP: Hypertext Preprocessor)

CJT is not going to insert any tags or wrappers for any language. Setting the editor language is currently a conduit for syntax highlighting and error checking. CJT does not alter the code at all, so users have the ability and freedom to do whatever they like while writing code.

Back To Top

Block Types

CJT provides two types of code block – Global Block and Metabox Block.

  • Global Block – this occurs in the main CSS & Javascript Toolbox dashboard page, where you can create multiple blocks and assign them to WordPress requests. Global Blocks can even be ordered so that blocks override other blocks. Additionally, blocks can be Activated/Deactivated and output in different locations. Global Blocks are used for providing shortcode support to block scripts, and also for assigning blocks to multiple WordPress requests.
  • Metabox Block – this occurs at the edit Page/Post level as a metabox, and when permitted in the Security settings, will show below the Visual/Text editor. Metabox Blocks will only affect the specific WordPress page or post it is attached to.

Back To Top

Code Blocks: Global

Global Blocks

Global Blocks is the Block type that works globally and can be assigned to multiple WordPress requests. CJT Global Blocks can be created through the CSS & JavaScript Toolbox main dashboard.

A Global Block has two components that build up the Global Block unit. The Code Editor and the Assignment Panel. The Assignment Panel allows you to assign the code block to multiple WordPress requests via both predefined and custom requests. Please visit the @Assignment Panel documents for more information.

Global Blocks share a few attributes and one of them is the order. Global Blocks can be reordered so that the top (higher up) blocks would be executed first before the bottom (lower down) blocks. This can be useful when you require a higher block to override a lower block.

You will notice that all Global Blocks are created in one single page and they are not categorised. With many blocks in play, this may get confusing to know the order of block execution, and whether some will not get involved on the same request. In the near future, CJT will be organised as separate individual Projects where each Project may contain multiple Global Blocks inside.

All Global Blocks are automatically assigned a shortcode with its name and can be used directly by typing the shortcode into the page or post content. Please visit @Shortcode section for more information about Global Block shortcodes.

Back To Top

Create

Creating a Global Block is a very simple process that can be done by clicking the ‘Create New Block’ button from the CSS & Javascript Toolbox dashboard page. You will have to fill out the Create New Code Block form and click OK.

New Block Fields:

  • Name: Block name that will be used for giving a hint about the block function and to be used as the shortcode name/parameters
  • Activate: Check it to initially Activate the newly created block, or leave it unchecked to initially make it disabled. Value can be changed later
  • Location Hook: Header/Footer is the initial location hook for the block, where the block would be executed and outputted
  • Position: The block order position for the Global Blocks list allows block creation in either the first block position (default position) or the last block position. The top (higher up) blocks would be executed first before the bottom (lower down) blocks

After the block has been created the popup form will close and the new block is added on the main Global Blocks manager page. It will be initially loaded/opened and the keyboard cursor will be activated for the code editor, allowing you to write code directly on there.

Back To Top

Delete

Deleting CJT Global Blocks can be done by clicking on the Delete (cross icon) from the block main toolbar. You’ll then need to confirm the delete message.

After confirming the deletion, nothing actually deletes just yet as the block is only removed from the UI list. You have to click the ‘Save All Changes’ button from the CJT main toolbar to save the deleted blocks.

Currently CJT is not supporting a way so the deleted blocks can be reverted back when the ‘Save All Changes’ button has not been clicked, however we plan to do that soon. So if you need to undo deleting your blocks, as long as did not click the ‘Save All Changes’ button, you can simply refresh the page to get them back.

Warning: After clicking the ‘Save All Changes’ button, blocks cannot be reverted back as they are permanently deleted from the database. Therefore, all the deleted blocks data will be lost.

Back To Top

Load For Edit

Initially all closed Global Blocks are in the unloaded state until they are opened. When it changes into the open state, it will then be loaded from the server. This means when you go into the main CJT block management page, all closed blocks are still not loaded from the server. Only basic details that identify the blocks are loaded, so users can take any primary actions that does not require the block to be loaded such as clicking the Activate/Deactivate or Header/Footer toggle switches. If more actions need to be taken (such as code editing), then the block needs to be loaded by clicking on the block toolbar.

Loading the block would fetch block code, initialise the code editor, and other resources such as the Assignment Panel window and so on. When this happens, the block is in the loaded state and ready for editing.

Block state is saved in your user profile so it would always be in the same state next time you access/refresh the CJT block management page.

It’s highly recommended to close all your code blocks before leaving CJT blocks manager page. This is very important because loading many blocks when the page is loading might cause the browser to crash or cause a server time out error. CJT blocks have no pagination. It has been tested with more than 600 closed blocks and works perfectly fine, however opening say all of them at once would most-certainly prevent them from opening due to the server error.

Back To Top

Ordering

Global Blocks can be reordered so that the top (higher up) blocks would be executed first before the bottom (lower down) blocks. Ordering Global Blocks can be very useful especially when functionality or output is dependant on the execution order. If for example you need to move a number of bottom (lower down) blocks higher up to override blocks above, you need to do the following:

  1. Drag the block you want to move by clicking the block toolbar
  2. Drop it in the new position
  3. After re-ordering all target blocks, click ‘Save All’ Changes’ button

 
Note: Nothing will be saved until the ‘Save All Changes’ button is clicked. As long as you have not clicked the ‘Save All Changes’ button, you can revert the block orders back by simply refreshing the page.

Back To Top

Assigning Global Block to Request

CJT is basically built over the assignment/association feature that allow users to run their codes in parallel with WordPress requests. A single Global Block might be assigned to multiple requests at the same time. This feature can be done through the Assignment Panel window.

The Assignment Panel can be classified into three parts:

  • WordPress (Posts, Pages, Custom Posts and Categories)
  • Auxiliary  (All Pages, All Posts, Blog index, etc)
  • Advanced (URL’s and Expressions)

By assigning Global Blocks to a WordPress request, you’re simply telling CJT to load these blocks when that specific request is submitted to the server. CJT would then prepare the blocks, run them, and provide the output.

Back To Top

Assign to Page

When assigning a block to a page, only that page would get the block applied. It doesn’t include the child pages automatically by default. This is intended so users can get more control by selecting the child pages (sub-pages) manually. Applying a block to all the child pages can be a problem if a few pages in the tree should not be included.

Assigning to single/multiple Pages

As the nature of WordPress pages are hierarchical, the CJT Assignment Panel also reflects that in the Pages tab. It list all WordPress Pages in a hierarchical form so that a user can find the relation between pages while assigning a block.

Include many or all child Pages

CJT provides a shaded secondary checkbox for every parent page that help users to check/uncheck all the child pages with a single click. It is still possible to uncheck some child pages after selecting all with the secondary checkbox. This is part of the helper tools that is intended to give you the maximum combination – that often fits most cases, and all for minimal work.

Assigning to All Pages

In order to assign a block to all pages, you should use the Auxiliary tab in the Assignment panel, and then check the ‘All Pages’ option. Checking this would apply the block to all pages – even those that would be added in the future. It’s like a live event that will always automatically assign new pages to the existing page set.

Back To Top

Assign to Post

Assigning single/multiple Posts

As the nature of WordPress Posts are flat (non-hierarchical), the assignment is straight-forward to the post itself and doesn’t include any other posts or categories that the post is related to.

The Post tab in the Assignment Panel provides you with the entire list of all existing posts in a flat, non-hierarchical form.

Assigning to All Posts

In order to assign a block to all posts, you should use the Auxiliary tab in the Assignment panel, and then check the ‘All Posts’ option. Checking this would apply the block to all posts – even those that would be added in the future. It’s like a live event that will always automatically assign new posts to the existing post set.

Back To Top

Assign to Category

Why Assign to a Category?

By assigning a Global Block to a category, you are applying the block to the category Archive (index) page and all the posts laying under that category! Yes, this is it. The idea behind applying blocks is to include all the child posts.

When assigning a block to a category, only that category and child posts would get the block applied. It doesn’t include the child categories automatically by default. This is intended so users can get more control by selecting the child categories (sub-categories) manually. Applying a block to all the child categories can be a problem if a few categories in the tree should not be included.

Assigning to single/multiple Categories

As the nature of WordPress Categories are hierarchical, the CJT Assignment Panel also reflects that in the Categories tab. It list all WordPress Categories in a hierarchical form so that a user can find the relation between categories while assigning a block.

Include many or all child Categories

CJT provides a shaded secondary checkbox for every parent category that help users to check/uncheck all the child categories with a single click. It is still possible to uncheck some child categories after selecting all with the secondary checkbox. This is part of the helper tools that is intended to give you the maximum combination – that often fits most cases, and all for minimal work.

Assigning to All Categories

In order to assign a block to all categories, you should use the Auxiliary tab in the Assignment panel, and then check the ‘All Categories’ option. Checking this would apply the block to all categories – even those that would be added in the future. It’s like a live event that will always automatically assign new categories to the existing category set.

Back To Top

Assign to Custom Posts

As most WordPress sites almost always have some form of custom posts (Products, Downloads, etc) created by using other plugins and themes, CJT supports assigning Global Blocks to custom posts.

Custom posts might be hierarchical like WordPress Pages or flat like WordPress Posts. CJT is able to detect the custom post type and list it hierarchically or flat as defined.

Based on the custom post layout, CJT will display it hierarchically like pages with secondary shaded checkboxes, or flat like posts. However all custom posts are listed under a single Assignment Panel tab with a toggle-able list inside. If there are no custom posts defined, then a notice message will show in place of the list.

Note: Only custom posts that have dashboard admin page and front-end access would be listed under the Custom Posts tab. Other custom post types such as Logs, History, etc, which is only intended to be used internally by the plugin or theme should not be listed.

Back To Top

Auxiliary Assignments

Auxiliary assignments are predefined assignments that group some common WordPress request types.

When assignments are required for cases where: the request currently exists AND the request does not yet exist, then it would be a good idea to use Auxiliary assignments. Auxiliary assignments give you the option of assigning a block to WordPress request items (e.g. posts, pages, categories, etc) whereby the item does not yet exist, so that whenever a new item gets added, it’s automatically added to the list.

It can also simplify assigning a block to a large group of WordPress items that cannot be assigned directly, as it would take sometime, or as it has not even been presented as WordPress items. Most of the Auxiliary assignments do logically exist but not physically on the database or disk.

Auxiliary assignment types

  • Entire Website: Apply to WordPress entire frontend website
  • Website Backend: Apply to WordPress dashboard/backend
  • All Pages: Apply to all WordPress pages that do not yet exist
  • All Posts: Apply to all WordPress posts that do not yet exist
  • Blog index: When Settings->Reading->’Front page displays’ with the option being set to show ‘Your latest posts’ for the homepage, then this Auxiliary assignment will apply to the blog index page
  • All Categories: Apply to all WordPress categories and all posts laying under those categories even though they do not yet exist
  • Search Pages
  • 404 Error: Apply to error page when WordPress cannot reach the requested item
  • Tag Archive
  • Author Archive
  • Attachments Archive
  • All Archive: Includes all of the above archives (including categories). However, it has the lowest priority, so if any archive assignment from the above items are being assigned, then that would take a priority over the All Archive assignment

Back To Top

Assign to URL

When to use?

As in some cases, users might need to cover more areas/requests where the assignment items are just not enough. URLs can be passed through the CJT Assignment Panel.

CJT URL parser accepts a list of URLs separated by a newline. so each line would have the full URL you wish to use. You must write the full URL including the WordPress home page/domain. CJT is not adding any trailer or prefixes to the URL you write.

CJT URL checker is splitting all URLs that are being passed, checking if it’s exactly equal the current request URI based on the PHP $_SERVER[‘REQUEST_URI’) and $_SERVER[‘HTTP_HOST’]. The URL can contain a custom Port number, with either HTTP or HTTPS is being supported.

Example of using URLs include:

Home Page: http://mywordpresssite.com/

WordPress Page: http://mywordpresssite.com/mypage/

Secure HTTP: https://mysecurewordpressite

Custom Port Number: http://mysecurewordpressite:PORT-NUMBER

Back To Top

Using Expressions (Advanced)

When to use?

In some cases, users might need to cover more areas/requests where the assignment items fall short. This is when Expressions can be used and passed to the CJT Assignment Panel.

What kind of Expression is it?

CJT currently supports only Regular Expression as PHP, except that you don’t need to write the Expression delimiters. The expression will be automatically wrapped by the forward-slashes /EXPRESSION/ delimiters.

Difference Between Expressions and URLs

Although URLs are a custom assignment, each URL can only cover a single WordPress request. Since each URL is internal and can only point to a single request, Expressions on the other hand can evaluate what URLs it has to apply the block with.

How it’s being evaluated

The CJT expressions parser accepts a list of expressions separated by a new line. In other words, each line would contain a full single expression.

Each expression (line) would be automatically wrapped by double forward slashes (as specified by PHP) and then evaluated to the current request URL. Once a single expression is valid and matching, the block is then added to the In-Load Blocks Queue (IBsQ). The blocks queue will process and then go onto the next block that has expressions and repeat.

Regular Expression References

PHP Offical Regular Expression

Examples using Expressions

Matching all the site pages including frontend and backend:

.+

Matching all Pages that start with ‘mypage’ including the ‘mypage’ page:

\/mypage.*

Matching any page that contains the word ‘test’:

test.*

Matching any page that ends up with the word ‘test’:

test\/$

Back To Top

Code Blocks: Metabox

Metabox Blocks

A Metabox Block is a CJT block that is assigned to one single WordPress page or post. This type of block cannot be assigned to multiple items (i.e. pages/posts) at the same time. The main visual difference between a Metabox Block to a standard Global Block is a Metabox Block does not have the Assignment Panel.

These blocks are created at the page/post level (i.e. when editing a page or post). They can be useful when working with the post content and having the code in the same place is required. It can also provide better code management, if say your code organisation requires each block to be assigned to a specific post, and you want to leave the Global Blocks for global cases. Metabox Blocks provides another option to help you manage your development in a structured way.

Security

CJT gives web-masters the control to specify which post types are allowed to have Metabox Block creation. No post type would allow the creation of a Metabox Block unless it’s specified in the CSS & Javascript Toolbox->Settings->Metabox option.

Performance

Posts/pages do not have Metabox Blocks created by default. Users have to create a Metabox Block for each post that requires it. This is intentional as it allows for better performance for posts/pages that do not need them.

Back To Top

Create

By default CJT is not associating or creating a Metabox Block for WordPress pages/posts until it is created by the user. This is ideal for performance as it saves database processing, server memory and page loading time. Instead of creating a full Metabox Block for every WordPress page/post, CJT is placing a ‘creation block’ from which users can create a Metabox Block for the desired posts. Once created, it would reserve a database record and it would always be there.

Creating a Metabox Block is done behind the scenes using AJAX technology so that users wouldn’t need to refresh the whole page after creating or even editing the block.

By default when a Metabox Block is created it is automatically assigned a default name generated by CJT. The name would be as following:

CJT Block – Post #ID

Where ID is the post ID that the block is being create for. This name can be changed later.

Back To Top

Delete

Deleting a Metabox Block is to remove the internal link/association between the block and the page or post that it is associated with. It would also delete all of your database records that are related to the block.

As long as a Metabox Block is not required any more, it is recommended to delete them to enhance your page loading time.

Back To Top

Priority

In a case where there is a Global Block assigned/associated to a page/post that already contains a Metabox Block, then the Metabox Block will get higher priority over the Global Block.

So that the Global Blocks those assigned to the Post is getting in the queue before the Metabox Block that’s give the Metabox Block priority as it running after them all therefor might override or revert what Global Block has done.

Back To Top

Block Functions

Edit Block Name

Please keep CJT Block names simple and briefly describe the functionality of the block. It can be very useful for remembering things about the block. The block name is also used as the shortcode name, when adding shortcodes to pages/posts.

For editing the block name do the following:

  1. Click on the block name
  2. An input field will appear over the block name
  3. Write the new name and click Enter (alternatively you can click the Save button)
  4. After a moment, your new name would be reflected as the block name

 
NOTE: There is also a pencil icon that can be clicked to allow the block name to be changed. If you did not mean to edit the block name, you can click the Cancel icon that appears next to the Save icon.

Back To Top

Activate/Deactivate Blocks

In many case it might require to Activate/Deactivate or Enable/Disable a few code Blocks as those Blocks is not ready at the moment or for other debugging purposes.

Activate/Deactivate code Blocks can be very handy in many situation if preserving the code Block is required however only the functionality is need to be stopped for some conditions. When CJT is preparing the code Blocks to be involved with the current request is then excluded all those Deactivated Blocks as they’re not exists or assigned to the request.

Activate/Deactivate Blocks can be done the State-Switcher button from the Block Toolbox.

Back To Top

Block Code Execution/Output Location

Output/Execution location is defining where is the code Block is going to be executed or outputted. So that when CJT is preparing the code Blocks it then wait for WordPress signals where those code Blocks should be executed. Currently CJT is using two Location. Header and Footer locations. Header location is being fired by WordPress via wp_head and admin_head hooks for Frontend and Backend sides respectively while Footer location is being fired by WordPress via wp_footer and admin_footer hooks for Frontend and Backend sides respectively.

Blocks executed in the Header location would got their outputs between the HTML <head></head> TAG while Blocks that uses Footer location are going to get outputted just before </body> tag closing tag.

So it would be very handy in many cases to switch between those location based on the script you create. Some Blocks might required some other scripts to be loaded first so they wait at the end/Footer while other those doesn’t require any restriction or need to take a higher priority would use the Header location.

There’re many other Location in the features queue that CJT would include in the next releases. There would a huge number of location that would serve most of the cases that CJT users might need.

NOTE: Hook location has no effect when delegating Global Block with Shortcodes! Using Shortcode for delegating Block would result of output/execute the code Block exactly in the point where the Shortcode is added.

Back To Top

Using Shortcode

Every created CJT Block is automatically assigned a Shortcode that can be used from WordPress Posts. Block can be delegated by using [cjtoolbox] Shortcode. If you’re running a PRO edition you can use the TinyMCE button for inserting the Shortcode. Shortcode can delegate the block by either Block Name or Id. As the Id is a little hard to remember and might broken when moving your site data to another host you its recommended to always use Block Name.

Example: Delegate Block By Name:

[cjtoolbox Name=”NAME”]

Example: Delegate Block By Id:

[cjtoolbox id=”ID”]

Another parameter is being supported by Shortcode is force parameter. force parameter is ideal when the Block you’re trying to delegate using Shortcode is already being linked to the same request via the Assignment Panel. When CJT Applier find such a case where a Block is linked to the request while its delegated via Shortcode it cannot output the same Block twice unless user being  forcing that! That’s it.  force parameter is set to false by default in order to force the Block to be executed and outputted even if its being duplicated just set force to true.

Example: Force Block to be executed via Shortcode even if its being assigned to the same request.

[cjtoolbox name=”NAME” force=”true”]

Back To Top

Restore To Revision

Each time Block is saved a new revision would be created by taking a snapshot from the Block fields. The following list represent the fields that are being copied while creating Block revision:

  • Code
  • Assignment Panel

So when a new revision is being created the Block code and all the assignment panel (Pages, Posts, Custom Posts, Aux, Urls and Expressions are being saved).

Currently, each Block is being saved up to 10 revisions. Block can be reverted to 10 times saves behind however take in your mind that all the other fields (Name, Order, Editor Language, Theme, etc…) cannot be restored as it doesn’t being saved anyway.

Revisions list is ordered in descendant order so that the last revision would be listed first. Once you select a revision CJT helps you look around first by checking if this revision is intended to be restored. The Block would get a read only copy of the Code and Assignment Panel values. You’ll notice that all those fields are disabled and the assignment panel is only showing the assigned Only items. You can discard that revision by click on ‘Cancel’ or save the reivision by ‘Restore’ it.

When the Revision is being cancelled CJT would take you to the last state just before you select the revision from the list however unlike restoring the revision would get a full copy of the revision and restoring the Assignment Panel to the initial/empty state.

Back To Top

Templates

Templates

Template is a peace of reusable code that can be embedded or linked to code Blocks, Global or Metabox Blocks.

Unlike code Blocks that is just created to do specific function by assigned to specific requests. Templates is to be used by Code Blocks as Code Libraries that might be required to be used by Multiple Code Blocks. It is independent peace of code and not related to anything. It can either embedded or Linked to code Blocks.

It keeps Blocks code cleaned and organised as it give the chance to separate the Code into Model and Library codes that is represented in CJT as Block and Template.

Its originally developer for big library files that is not logically related to the Block Model, might be reused by other Blocks and provided by third-party developers. jQuery is an example of using Templates as its not a part of the code Block and also it shouldn’t be in the code Block as its huge file that would prevent you from editing your code in a simple professional way. Also having those huge library files away from code Block is great for performance as those template files is rarely modified.

Back To Top

Centralisation

Linking Template can be used when centralizing a peace of code is required. As Multiple Code Blocks can be linked to the same Template file its force a centralisation as those all code Blocks is being use one Template file.

Updating Centralised Template file is always reflected to the Blocks so there is no need to re-link code Blocks after updating the Template file.

Back To Top

Create

Creating a template is a very easy process that required few fields to be filled.

  • Name: Require template name that would be used when link/embedded templates through Templates Lookup. Please keep the name clean, brief and descrbing the Job of the template. Once the template is created this field cannot be changed.
  • Language: Require template language to be used by identifying the template type and how it would be linked by CJT. Its also set the Editor Syntax Highlight and Error checker based on the selected language. Once the template is created this field cannot be changed.

Currently the following languages are being supported:

  • HTML
  • Javascript
  • CSS
  • PHP
  • Template State: Require template state to identify the Publish state. The following state are being supported.
    • Draft: Won’t be displayed in the Templates Lookup form so it cannot be linked or embedded.
    • Published: Template is published and ready to be used. It will displayed in the Lookup form and can be liked or mbedded.
    • Trash: In order to delete template it must passed to this state first.
  • Code: Require template code that builds up the Template.
  • Description: Optional field to describe Template Job.
  • Keywords: Not being used however author might use it any private uses.
  • Version, Revision State and Revision Note: Template is internally revisioned. By mean that it saves the history of all the changes that has been made to the Template however CJT is currently not exposing Restoring to Revision functionality but it would be in the feature. Every time Template code is changed a revision is internally created for the template. User should specify revisions number for tracing their changes as the next releases would expose this functionality.
  • Back To Top

    Delete

    Deleting Template is to remove the Template record from the database and also unlink it from all the Block that being linked this Template. This is it! Embedded Template is getting a copy from the template code and pasting it to code Block and deleting Template has no effect on embedded templates. Only linked Blocks would lose the deleted template, those Blocks should be updated as the dependencies has been changed.

    Back To Top

    Embedded

    Embedding Templates is simply to Copy the template into the Code Block Editor where in the location of the Editor Cursor. Currently CJT is not adding any Tags to the embedded templates, its simply geta Template copy.

    If the embedded Templates is then updated later it doesn’t reflect that update to the Code Block as its already copied. If reflecting update is required Linking Template then would be used instead of embedding.

    Template can be embedded to the same Code Block Multiple time, CJT is not confirming that. Its up to Block Author to handle em,bedding Templates unlike Linking Templates is linked to the Block only once and managed by the CJT internal Queue.

    Back To Top

    Linking

    Its the most useful feature provided by Templates system. Linking Template is to Import Template into one or more Code Block. The method of how the Template would be linked by CJT is based on the Template Type/Language. Each Type is linked differently. We’re going to show how each type would be linked.

    HTML & PHP

    CJT Template Linker is appending all the Templatee Code that being linked to the Block and then execute them all (including Block code) as PHP code.

    Example:

    Block

    <div id="block-layer">
    <span><?php echo 'Hello World'; ?></span>
    </div>

    Linked HTML Template

    <div class="block-footer"></div>

    Linked PHP Template

    <span><?php echo "Footer Text"; ?></span>

    All the above Codes would be aggregated as following and then executed as PHP.

    <div id="block-layer">
    <span><?php echo 'Hello World'; ?></span>
    </div>
    <div class="block-footer"></div>
    <span><?php echo "Footer Text"; ?></span>

    The Final Result would be:

    <div id="block-layer">
    <span>Hello World</span>
    </div>
    <div></div>
    <span>Footer Text</span>

    Javascript and Stylesheets

    CJT is linked Javascript and Stylesheet Templates by using <script> and <link> HTML tags respectively.

    Back To Top

    Types

    Template Types is to tell CJT what Language specifications (Syntax Highlights, Error Checker, etc…) and also tell Template Linker of how to link this Template. Finally its used by the Template Author for identifying different type of scripts (Javascript, CSS, etc…). Different types would be handled differently while its being linked.

    Currently, CJT is support the following Types/Languages for Templates:

    • HTML
    • Javascript
    • CSS
    • PHP

    Back To Top

    Writing Javascript & CSS Templates

    When writing Javascript and CSS Templates it would be considered like writing separated .js or .css files, no <script> or <style> or <link> tags should be added in those templates. Those Tags are being added automatically by CJT Templates linker. Adding those tag would break those Templates.

    Embedding Template is current will embedded Javascript and CSS templates without any tags appended. Its still a good practice to follow the Above strategy of avoiding adding any Tags as next CJT release would start adding those templates while embedding too.

    Back To Top

    WordPress Built-In Scripts & Styles

    CJT Template Lookup allows WordPress built-in Scripts and Styles to be linked or embedded to Code Blocks. Its one of the powerful features that CJT Template Lookup is providing for Blocks. Almost there is no Third-Party script is not depending on some famous scripts like jQuery. CJT user don’t have to add those manually or copy their codes into the Code Blocks. They’re all available through Template Lookup.

    Back To Top

    Packages

    Packages

    Packages is a set of CJT Blocks and Templates files added to a ZIP package and defining by the package definition.xml file.

    The idea behind the package is to allow sharing a peace of codes between two CJT users or between two CJT servers that all would use the same Blocks/Templates.

    A typical package contain one or more Blocks and zero or more Templates. Block can also be linked to Templates. All the available functionality of creating Block/Template from CJT UI is supported via the package definition.xml file. In fact, there’re more features that Packages providing is not being supported by CJT UI. Features like Passing Shortcode Parameters and attach Templates Images is only available through package.

    The package is simply a group of files holds Block and Templates code. definition.xml is all about the package! Using this file to define how the CJT installer would handle the package installation process.

    Back To Top

    Definition XML File

    The one file that builds up the CJT Packages. Just like using User Interface for creating Blocks or Templates. User has to click ‘New’ button, Fill the Form, click save and Link Block to Templates if needed. The same operations can be done by writing few keywords to the definition.xml file that CJT Package installer would carry instead of users.

    definition.xml file is defining a few XML Tags that can be used to tell CJT what operation should take. The file is processed by the same order from Top to Bottom.

    The definition file must be exists in the package root folder otherwise the CJT Installer would fail.

    Back To Top

    Basic Structure

    The basic valid structure of the definition.xml file is as following:

    <?xml version="1.0" encoding="utf-8" ?>
    <package xmlns="http://css-javascript-toolbox/xml/namespaces/cjt/6/package">
       <name>PACKAGE_NAME</name>
       <description>DESCRIPTION</description>
       <author>AUTHOR_NAME</author>
       <webSite>PACKAGE_WEBSITE</webSite>
       <license>RAW_LICENSE or LICENSE_FILE</license>
       <readme>RAW_README or README_FILE</readme>
       <objects>
          OBJECT LIST GOES HERE ...
          AT LEAST ONE BLOCK OBJECT SHOULD BE PRESENETED
          ....
          ....
          .... 
          ....
       </objects>
    </package>

    Back To Top

    Define Block

    Like creating new Block via user Interface its possible to create new Block by writing definition.xml file command that instruct CJT to create new Block.

    Only Global Blocks can defined via Package definition file. Block cannot assigned to WordPress pages when created via Package, assignment to page must be done through UI by webmaster.

    Block will be deactivated by default until its being activated by webmaster.

    Creating Block can be done by using <object> tag. object tag with Type=’block’ would instruct CJT to create new Block by using the fields laying between <object></object> tags.

    <object type="block">
      BLOCK FIELDS GOES HERE...
      .....
      .....
      .....
    </object>

    Basic Block Data

    Block Data is what defining the Block, the basic Data Field is currently name and code. They can defined as following:

    <object type="block">
      <name>BLOCK-NAME</name>
      <code>[RAWDATA] or [CODEFILE]</code>
    </object>

    Code data can be raw or point to file. Raw data must be presented inside CDATA section as following.

    <code><![CDATA[RAW-CODE]]></code>

    In many situation specially when Block Code is huge, its better to add Block Code in external file as following

    <code locate='file'>CODE-FILE</code>

    Back To Top

    Link Template

    Linking Template to a Block can be done through package definition XML file via link tag. Link multiple Templates can be done by using as many link tags as needed.

    link tag must be presented under the root links tag as following:

    <object type="block">
      <links>
       <link name="TEMPLATE_NAME_1" />
       <link name="TEMPLATE_NAME_2" />
       <link name="TEMPLATE_NAME_3" />
      </links>
    </object>

    Back To Top

    Shortcode Parameters Form

    One of few features is only available via Packages and currently cannot be achieved using Windows!

    Shortcode parameters form is CJT internal form used to prompt for Block parameters when inserted as Shortcode via TinyMCE shortcodes list. Parameters also might be passed directly by writing the Shortcode manually however PRO edition helps using simple form that validate and do the internal jobs that required for generating Shortcode.

    Defining Shortcode Parameters form created using form tag and just required few simple parameters.

    <form>
      <name>FORM_NAME</name>
      <groupType>GROUP_TYPE</groupType>
    </form>
    • FORM_NAME: Form name to show as the Form Title
    • GROUP_TYPE: Form allows add a set of parameters under specific Group. Currently only group of type tab is being supported.

    Back To Top

    Define Groups

    Group is used to group a set of parameters together. It has no logical affects however it will be used by the Form to display each group as set of parameters.

    Creating group can be done by using group tag. Its possible to create multiple groups with no limitation.


    <group>
     <name>NAME</name>
     <description>DESCRPTION_TEXT</description>
    </group>

    Data Fields

    • NAME: Used as the parameters set title.
    • DESCRIPTION_TEXT: Help text for that define the parameters set. It will be showed as Tooltips.

    Back To Top

    Parameters

    Define Block Shortcode Form Parameters would inform CJT to carry up few steps based on the current process. Two process is being handled when using Block Shortcode with parameters based.

    Insert Shortcode

    • Get user Inputs through internal Parameter Form
    • Validate Parameters value based on the Parameter Data Type
    • Generate Block Shortcode text.

    Process Shortcode

    • Read Shortcode Parameters.
    • Validate Shortcode Parameters (This is important in case Shortcode text is typed manually)
    • Allow Code Block to access Shortcode parameters by using CJT Blocks Developer API (CBDA)

    Defining Block Parameter is done by using param tag. There is no limitation of the number of parameters that can be defined for the Block.

    <param>
      <name>PARAM_NAME</name>
      <type>DATA_TYPE</type>
      <defaultValue>DEFAULT_VALUE</defaultValue>
      <group name="GROUP_NAME">
       <renderer>INPUT_TYPE</renderer>
       <description>PARAM_DESCRIPTION</description>
      </group>
    </param>

    Data Fields

    • PARAMS_NAME: Parameter name used for read/write parameter value and will be the title of the input field.
    • DATA_TYPE: Data type used to validate and generate parameter Shortcode text.
    • DEFAULT_VALUE: To be used when Parameter is not being passed
    • GROUP_NAME: Associate to group.
    • INPUT_TYPE: Input field type to be used for receiving user inputs (Text, Dropdown List, Checkbox, etc…). For more info about the supported input types checkout Input Types article.
    • PARAM_DESCRIPTION: Parameter input field help text.

    Content Parameter

    Each block might content one Content Parameter. Content Parameter is to use the TEXT between Shortcode open and close tags. Its great when generating TEXT inside the Shortcode is required like getting a list of HTML Images of Links. It should be used with RAW data type.

    <param>
      <contentParam>1</contentParam>
    </param>

    Back To Top

    Data Types

    Parameter Data Types is used by CJT Shortcode Block parameters form for validating user inputs and generating Shortcode Parameters Text/String.

    The following Data Types are being supported by CJT.

    Native/Primitive Data Types

    • boolean: Accept String true/false or numeric 1/0.
    • number: Accepts any numeric value
    • text: Accept String data.
    • raw: Same as the text data type except that when generated as Shrotcode, it won’t wrapped by Quotes.

    Structured Data Types — Collection

    • array: Accepts a list/array of any CJT Data Types (Array, Boolean, List, etc..). Generate Shortcode Parameter Text as CJT Array JSON {A ITEM-0, ITEM-1 A}. Passing Javascript array as CJT parameters require use of {A A} instead of Javascript array [ ]. This is important as WordPress Shortcode parser is unable to parse Shortcodes when parameters containing [ or ].
    • structure: Represent Structure Data Type that holds other CJT Data Types. The different between array and structure is that the later one would generate Shortcode Parameters text as JSON Object instead of Array. Array type is discarding all the child parameters names unlike structure data type is preserving the names.

    Back To Top

    Input Types

    CJT Block Shortcode parameters form is provide a few Input Types to be used for talking user inputs. Its mean the Input Field Type to be used for getting user Inputs. For example Boolean Parameter might use either Checkbox or (Yes/No) Dropdown list! This is up to the package author to define which type to use. CJT if providing the following Input Types.

    • array: Used to display parameter of type array. Its generate HTML Fieldlist with the member/child Parameters inside.
    • structure: The same as the array except its used for the structure data type.
    • checkbox
    • dropdown
    • list
    • input
    • textarea
    • imageslist: Allows user to select multiple images via WordPress Media Popup.

    Back To Top

    Define Template

    Like creating new Template via user Interface its possible to create new Template by writing definition.xml file command/tag that instruct CJT to create new Template.

    Templates must be defined first before Blocks. Linking Block to Templates is not being created yet would cause the package installer to fail.

    Creating Template can be done by using <object> tag. object tag with Type=’template’. It would instruct CJT to create new Template by using the fields laying between <object></object> tags.

    <object type="template">
      TEMPLATE FIELDS GOES HERE...
      .....
      .....
      .....
    </object>

    Basic Template Data

    Template Data is what defining the Template, the basic Data Field is currently name, type, description and code. They can defined as following:

    <object type="block">
      <name>TEMPLATE-NAME</name>
      <description></description>
      <type>TEMPLATE_TYPE</type>
      <code>[RAWDATA] or [CODEFILE]</code>
    </object>

    Code data can be raw or point to file. Raw data must be presented inside CDATA section as following. Please note that name is very important as its what is used to link Template to Blocks.

    Template type can be either html, javascript, css or php however if not specified and a code is pointing to a file it would obtain the type from the code file extension, if no code file or a type defined it would be a css by default. So be careful when defining the type.

    <code><![CDATA[RAW-CODE]]></code>

    In many situation specially when Block Code is huge, its better to add Block Code in external file as following

    <code locate='file'>CODE-FILE</code>

    Back To Top

    Attach Images

    Attaching images to Template can be very useful when a Template of type CSS need to link to images.

    Attaching images can be done via folder tag as following:

    <folders path="PATH/TO/ALL/CHILD/FOLDERS">
      <folder path="FOLDER_PATH_TO_UPLOAD" />
    </folders>

    folders tag allows to group a set of related folders without repeating the path on each on of them. Multiple folder tags might exists inside the folders tag.

    Back To Top

    License file

    Attaching license file for the package script is great for developers like to publish/share their CJT package scripts with others. Defining a license for the CJT Package script is defining by license tag. License can be either of raw text inside the Definition XML file or independent package text file.

    RAW License

    <license>
    <![CDATA[
    ... LICENSE TEXT HERE
    ... LICENSE TEXT HERE
    ... LICENSE TEXT HERE
    ]]>
    </license>

    License File

    <license locate='file' />

    NOTE: license.txt file must be presented in the package root folder.

    Back To Top

    Package info

    The following tags are currently supported for the Package. All of them are being displayed in the Packages Table List.

    • name: Use to identify the package.
    • description: Package description text.
    • author: Package author name.
    • webSite:
    • license
    • readme
    <?zml version="1.0" encoding=utf-8" ?>
    <package xmlns="http://css-javascript-toolbox/xml/namespaces/cjt/6/package">
    <name>NAME</name>
    <description>DESC</description>
    <author>AUTHOR</author>
    <webSite>WEB SITE</webSite>
    <license>
    <readme>
    ...
    ...
    ...
    ...
    </package>

    Back To Top

    Pointing to file

    Pointing to file is to point to a package file located inside the package from the definition.xml file, so that package process can locate those files and loading them

    Point to Block code File named block.php located in the package root folder.

    <object type="block">
      <code locate='file'>block.php</object>
    </object>

    Point to Block code File named block.php located in the a folder named blocks in the package root folder.

    <object type="block">
      <code locate='file'>blocks/block.php</object>
    </object>

    Back To Top

    Readme file

    Attaching readme file for the package script is great for developers like to publish/share their CJT package scripts with others. Defining a readme for the CJT Package script is defining by readme tag. Readme file can be either of raw text inside the Definition XML file or independent package text file.

    RAW readme

    <readme>
    <![CDATA[
    ... README TEXT HERE
    ... README TEXT HERE
    ... README TEXT HERE
    ]]>
    </readme>

    Readme File

    <readme locate='file' />

    NOTE: readme.txt file must be presented in the package root folder.

    Back To Top

    Hello World Package

    Hello World package is a simply package to explain how a very simple package can be created.

    Hello World Package is define the following:

    • Block: Display a text that is taken as Block Shortcode Parameter.
    • Template: Style the displayed text.
    • readme
    • license

    Template Code

    h1.hello-world-text {font-size: 24px; color: red}

    Block Code

    <h1 class="hello-world-text">
    <?php
    // Display text as passed for the Text input parameter.
    echo $cb->params()->get('text');
    ?>
    </h1>

    definition.xml File

    <?xml version="1.0" encoding="utf-8" ?>
    <package xmlns="http://css-javascript-toolbox/xml/namespaces/cjt/6/package">
    <name>HelloWorld</name>
    <description>CJT Hello World package example</description>
    <author>CJT</author>
    <webSite>http://css-javascript-toolbox.com/scripts/examples/HelloWorld/</webSite>
    <license locate="file" />
    <readme locate="file" />
    <objects>
    <object type="template">
    <name>hello-world-style-sheet</name>
    <description>Hello World Stylesheet file</description>
    <code locate="file">template/style.css</code>
    </object>
    <object type="block">
    <name>HelloWorld</name>
    <code locate="file">block/hello-world.php</code>
    <params>
    <form>
    <name>Hello World</name>
    <groupType>tab</groupType>
    <groups>
    <group>
    <name>General</name>
    </group>
    </groups>
    </form>
    <list>
    <param>
    <name>Text</name>
    <type>text</type>
    <group name="General">
    <renderer>input</renderer>
    </group>
    </param>
    </list>
    </params>
    <links>
    <link name="hello-world-style-sheet" />
    </links>
    </object>
    </objects>
    </package>

    The package is also available for hello-world

    Back To Top

    Install / Uninstall

    Install

    Installing CJT Package is to instruct CJT Package process to load the package definition.xml file and create all Objects (Blocks, Templates, Parameters, etc…)

    Currently, after installed the package cannot be downloaded or upgraded. The package can only installed or uninstalled. For upgrading package it should be uninstalled and installed again. CJT Packages is still in BETA release and would be enhanced in the next releases.

    NOTE: All installed Blocks would be Deactivated and not being assigned to any WordPress page.

    Uninstall

    Uninstalling Package is to remove the package and the Objects (Blocks, Templates, Parameters, etc…) that installed within the package. The action is permanent and cannot be reverted.

    Back To Top

    Advanced Topics

    How CJT is Loading Blocks

    Content is in progress …

    Thanks for your patient!

    Back To Top