POWERFUL EDITOR
The editor in Easy Code Manager is more than just a plain text field. It features a lot of the tools you would come to expect in a desktop Integrated Development Environment (IDE), like syntax highlighting, auto-indent, full-screen editing, and code auto completion.
Currently, Easy Code Manager supports four coding languages: CSS, HTML, JavaScript, and PHP. You can use any other these languages in your Code Blocks and the editor will automatically assist you with: indenting and outdenting; matching parenthesis highlighting; closing HTML tags; drag and drop text using the mouse; line wrapping and highlighting; Cut, Copy and Paste functionality; coloured syntax highlighting, and error reporting.
Code Tools Panel
The editing tools in the Code Tools Panel can be especially helpful when searching through many lines of code, and working through errors.
The tools available in this section include:
File
Reload, Load local, Load URL, Save, Save file, and Delete
Edit
Undo, Redo, Find, Find next, Find previous, Replace, Go to line, Go line up, Go line down, Go to next error, Go to previous error, Fold, Fold all, Unfold, Unfold all, To lower case, To upper case, Settings
View
Status bar
Loading/Saving Code Files
You can load code from a locally stored file on your hard drive and Easy Code Manager will automatically embed this inside your Code Block. Alternatively, you can load code from an external URL link and the code will be copied and embedded also. This can be particularly useful when adding code from GitHub, which you can do by clicking into the script and copying the link from the Raw button.
Editor Themes
Need an editor theme that suits your style? Choose from 32 code block editor themes including a mix of light, dark, colourful and eccentric themes. Whichever editor theme you decide on, Easy Code Manager will remember it for you. The Code Auto Completion (CAC) feature has also been designed to take on the same style and colour scheme as your chosen editor theme.
Full-screen Mode
This mode maximises the Code Block to fit the screen so you can work free from the distractions and clutter of the WordPress dashboard menu and the Easy Code Manager main toolbar. In fact, it is a necessary feature if you plan to do some coding on a tablet or mobile. It looks great on desktops, and responds to both portrait and landscape orientations on tablets and mobiles. Full-screen mode work especially nice with the Panels button. For example, the Assignment Panel will maximise to cover the full screen height so you can see a lot more Assignments (i.e. Pages, Posts, Custom Posts, etc).
PRECISE TARGETING
Tired of using only short-codes? Yes, we are too!
Easy Code Manager gives you the ability to run code blocks on practically any section of your website. You can direct your code to run in the header or footer section of your WordPress Pages, Posts, Custom Posts, Categories and Tags. You can also output your code using URLs, Regular Expressions (regex), sidebar widgets, footer widgets, and of course short-codes.
The sections described above are part of four main output categories, which include:
- Assignment Panel
- Code Block to Widget Controller
- Shortcodes
- Page/Post Metabox Code Blocks
Assignment Panel
One of the most unique and intuitive features of Easy Code Manager is the Assignment Panel. This is where you can ‘assign’ your code blocks to specific areas of your site. For example, you can assign your code to run on specific WordPress Pages.
The list below outlines all of the assignments that you can choose from:
Pages
(inc. child/sub Pages)
Posts
Custom Posts
Categories
(inc. child/sub Categories)
Tags
Auxiliary
Entire website, Website backend, All Pages, All Posts, Recent Posts, Blog Index, All Categories, Search Pages, All Archives, Tag Archives, Author Archives, Attachment Pages, 404 Error Pages
URLs
Regular Expressions
The Assignment Panel shows it true power and flexibility because you are not limited in choosing just one assignment. For example: you can choose multiple assignments; select just child/sub Page assignments; select only certain Custom Post type assignments (e.g. WooCommerce products); or use the powerful Invert function that runs your code on assignments ‘other’ than the inverted one.
When you use the Assignment Panel, you have the option of deciding if you want the code to run in the Header or Footer of the assignment. For example, you may want to run Google Analytics code in the Footer of the Entire Website assignment.
Code Block to Widget Controller
Easily add your code as a widget for your sidebar or footer. Widgets are great to add features to your website sidebar or footer. Easy Code Manager integrates perfectly to allow you to use code blocks as WordPress Widgets. Simply drag and drop the Easy Code Manager widget to the relevant sidebar or footer, then use the dropdown to choose the code block to use.
Easy Code Manager Shortcodes
For more accurate placement of your code blocks, you can add code block shortcodes at the Page/Post level. We include a TinyMCE button, which lists all your code block shortcodes for easy insertion via a single click.
When a shortcode is inserted into a WordPress Post or Page, it is replaced with some other content. In our case, we instruct Easy Code Manager to find the code block that is in the square brackets [ ] and replace it with the appropriate code block contents. This allows for perfect positioning of content in your webpage, and even specific execution order of the script within the page. Shortcodes are very useful and we have a dedicated TinyMCE button that can be used to automatically add shortcodes. Additionally, if you know the code block name, you can use this in the square brackets.
Metabox Code Blocks
These Easy Code Manager Metabox Code Blocks reside at the Page and Post level. They are great for quick code embeds to the WordPress page or post directly. You can easily create them as you need.
Page/Post Metabox Code Blocks
Metabox Code Blocks are shown at the page/post level. When you are working with your pages or posts, you may prefer to work with code blocks at this level rather than in the Easy Code Manager dashboard. It is therefore a matter of personal preference. The main difference in the metabox Code Block UI, is that there is no Assignment Panel. You will also notice an added Preview button (see Code Editor Toolbar), and when clicked, will open your page or post in a new window.
Code Metabox Security
If you have users that are authorised to create Posts or Pages, although you do not want them to be able to create a new Code Block metabox for these posts or pages, then you can disable this in the Easy Code Manager Options. You can disable Code Block metaboxes for Pages, Posts, and Custom Posts.
CODE MANAGEMENT
There are times where you need to store those library-type scripts/styles in one place to be reused. Storing your code templates for reuse can help streamline your development processes and help keep everything managed and organised. There are two main systems that work together for templating code, and they are the Templates Manager and the Templates Panel.
Templates Manager (under Tools -> Templates)
The Template Manager allows you to create a library of scripts and styles in HTML, PHP, JavaScript or CSS.
Centralise your library/third-party codes by linking templates, which is using WordPress scripts/styles queue to avoid conflictsIt provides all the tools needed to create, edit, delete, and manage all of your code templates in one main table.
You would need to go to the Templates Manager and create your script templates. Templates can be created in HTML, PHP, JavaScript or CSS. Once saved, you can go to the Templates Panel and either embed the code into or link the code to the Code Block.
Templates Panel (under Panels -> Templates)
The Templates Panel allows you to use any of your templates that you created in the Templates Manager. You have a choice of either embedding the template directly into the coded block or linking the template to the code block. Embedding a template copies and pastes the entire template code into your code block, making it easy to see and make changes to the code. Linking a template, makes it ideal for linking multiple templates. The Templates Panel also allows you to embed or link to WordPress built-in scripts/styles (e.g. jQuery, Thickbox, etc) that are bundled with WordPress. These are often minified, so using the Beautify function will make it nice and readable.
Once you have embedded or linked templates to code blocks, you can then assign it to WordPress Pages, Posts, Custom Posts, Categories, Tags, and basically all the locations in the Assignment Panel.
External Script (under Panels -> Templates)
This handy feature can be used to automatically create templates from a third-party script. It works by downloading the third-party script (e.g. from a CDN such as jQuery), adding it as a new template to the Templates Manager, and linking it to the current code block. All of this is done automatically and seamlessly behind the scenes, and from a single click of a button. No need to worry about hot-linking to the third-party server hosting the script and worrying if it will one day be removed.
CODE AUTO COMPLETION
The CAC has got your Back!!!
Easy Code Manager has a powerful Code Auto Completion (CAC) feature that allows you to add code into the editor automatically. The CAC utilises a code syntax dictionary so you can quickly auto-complete CSS, JavaScript, PHP, and HTML code syntax or embed code snippets. There are stacks of code snippets for you to choose from and it even supports your own local variables.
Stacks of Code Snippets
No need to remember all of those script or style declarations, just start typing and let the CAC output the snippet for you. Contains hundreds of useful code snippets that will make your coding life a breeze.
Local Variable Support
Have you created your own variables but need a quick way to show them? The CAC will output all of your local variables so you don’t need to search throughout the entire code block to figure out what you called them.
Using the CAC – How to Launch
If you are using either a Mac or a PC, the hot-key combination is Control + Space (i.e. Ctrl + Space bar). This can be achieved by holding down the Control (i.e. Ctrl) button with your little finger and then click the Space bar with your thumb.
Simply click the hot key combination on your keyboard and your CAC dialog box will popup allowing you to choose from an extensive list of code syntax depending on the code editor you are currently using. In other words if you are using the CSS code editor, then the CAC will use the CSS code dictionary. You can even start typing a few letters and launching the CAC will filter down the list based on the letters typed. Clicking the back and forward arrow keys on the letters typed will either increase or decrease the list of results respectively. We have also included a short description of code syntax where applicable.
CODE BEAUTIFY/MINIFY
Code beautifying is the process of taking minified or just plain ugly formatted code and reformatting it in such a way that is not only beautiful to look at, but highly readable to understand. Code minifying on the other hand is a technique that removes unnecessary data such as whitespace in order to reduce the overall file/byte size. Minifying code is a simple way to lower resource usage and improve page-load.
Easy Code Manager provides both beautify and minify solutions side-by-side, where you can easily beautify minified code for readabilty OR minify already readable code for improving performance. You no longer need to use external third-party code beautify/minify websites, when this function is sitting in the Editor Tools Panel – right next to where you write your code.
Sometimes scripts found on the internet are already minified such as jQuery scripts. In fact many of the WordPress built-in scripts/styles (e.g. jQuery, Thickbox, etc) that are bundled with WordPress are already minified. However, they can be embedded into your code blocks (under Panels -> Templates), then using the ECM beautifier will reformat it into beautiful human-readable code. So Easy!!!
OPTIMISED FOR DEVICES
Easy Code Manager has been carefully crafted to not only look and work great on desktops computers, but also on tablets and smart mobile devices. The possibilities of coding on small devices such as mobiles are now becoming a reality so it made perfect sense to design Easy Code Manager to be 100% responsive. Simply put, code blocks automatically adjust its width to the device screen. The device can be rotated from portrait to landscape and vice versa and your code blocks will readjust. Code blocks can also be visually reset if needed by a simple pinch-zoom gesture on the device screen.
Since Easy Code Manager is so feature-rich, there was a lot of emphasis on mobile first design principles. There was no point designing the code blocks to be responsive and look great if the user interface was clunky and frustrating to work with. This is how the Panels idea was born! Panels contain most of the code block functionality and can only be accessed by touching the Panels button. Furthermore, there are no hover-over mouse actions, which is irrelevant to touchscreen devices, so every button has to be toggled on or off via a touch or click.
Performance
The performance aspect of Easy Code Manager is something that is extremely underrated or under-acknowledged and this is probably so because it’s hidden or ‘under-the-hood’ so to speak. We understand that not everyone has a super-fast computer, tablet or device with heaps of memory in RAM, with a super-fast broadband connection. With that said, developing with performance in mind is super-important!!!
To optimise on performance, Easy Code Manager only reserves memory resources and usage processes when it needs to, otherwise it will not get involved. It also utilises AJAX technology to dynamically load data only when required.
Say for example you created a large number of code blocks and added thousands of lines of code in each. Your desktop browser would probably crash trying to load everything on page-load. Now just imagine that scenario but on a mobile device! To deal with the problem, Easy Code Manager will always keep code blocks in a closed (or minimised) state until you touch the code block toolbar to open (or expand) it. Only then will the code block start loading your code into the editor via AJAX from the database.
Easy Code Manager has been fully tested with over one hundred code blocks and thousands of assignments (e.g. Posts, Pages, Categories, etc). This was made possible using a combination of AJAX scrolling and pagination. In fact, 99% of Easy Code Manager utilises AJAX technology, so there is no need to refresh/reload the webpage for data to transfer between the server and your computer or device.
