WordPress.org

Add custom reusable CSS & JavaScript to pages, posts, categories & URLs. Full code template management system. Insert, create, save, edit and delete code templates. Add titles to code template and blocks. Reuse code via code templates drop-down list. Add code to header or footer. Add extra code blocks as needed. Default CSS/JS declarations. Simple and easy UI. Page/post nav icons for page preview. Multilingual support. Reorder, minimise & maximise blocks. Ability to embedded WordPress/CJToolbox Javascript files by just checking them. jQuery Cycle and jQuery Easing included. Ability to Backup and Restore blocks data.

Click for full instructions with screenshots, usage hints & tips, code examples, and user feedback

After Install & Activation

After you have installed and activated the CSS & JavaScript Toolbox plugin, you will notice a new menu item appear under Settings in your Dashboard. Click the 'CSS & JavaScript Toolbox' link in the main navigation (left side of your Dashboard).

Default code example

First time installers will see a large editor window with a JavaScript example, that simply adds an alert box to a page of your choice. You can try it out by clicking on a page or post checkbox. Clicking the navigation icon (rectangle with arrow in corner) will open the page in a new window. When you are done exploring, simply delete the entire text content from the editor.

Create a CSS & JavaScript Block title

Block names are useful to keep your code blocks managed and organised. Please type a relevant name that describes what your block does, then click Save.

Write the code, then choose what the code affects

The large editor window is where you write your CSS or JavaScript code. To allow your code to run on your website, you need to specify the pages, posts, categories, or page URLs you want the code to work with. You can select multiple checkboxes and even make selections from the other tabs, just make sure you click the Save All Changes button when you are done.

Insert, create, save, edit, delete your code templates

We have created a management system so you can perform these functions with your code templates. - down arrow icon: insert code from the drop-down list into the editor window (at cursor) - plus sign icon: popup appears so you can add a new code template, which will be added to the drop-down list - pen icon: popup appears allowing you edit any existing code templates - cross icon: confirmation popup appears before deleting the code template

Adding more CSS & JavaScript Blocks

Look for a button labelled Add New CSS/JS Block. Click this and a popup will appear asking you to name the code block. Once the Save button is clicked, an entirely new CSS & JavaScript code block with the new name is now added. Note: CSS & JavaScript Blocks with EMPTY code will not be saved!

Shuffle, drag, open and close CSS & JavaScript Blocks

If you hover your mouse cursor over the title bar of the code block, the cursor should change into a four-sided arrow. This allows you to shuffle and drag the blocks around. If you click on the title bar, the code block will open and close, which may come in handy if you have many code blocks.

Header and Footer switch

This switch can be used to automatically add your code block to a header location or a footer location.

Saving your work

Although this plugin uses Ajax for the function calls (in other words does not refresh the webpage), please remember to save your code on a regular basis by clicking the Save All Changes button.

Thank You

We would like to take this opportunity to thank you for installing our plugin. :) We hope you enjoy using our new WordPress plugin with your development work. We do plan on developing it further with some really cool updates in the near future. If you enjoy this plugin and not only find it useful, but appreciate the huge amount of work that has gone into creating it, you can certainly support us in a number of ways, including: - a small donation via our PayPal account - provide a rating on WordPress.org - visit our Wipeout Media website and provide some user feedback or feature requests - Like our Facebook page - we really need Likes :) - Follow us on Twitter - we really need followers too :D

Thank you very much for your support and we hope you enjoy using it as much as we enjoyed creating it.

Regards, Wipeout Media Team