CodeKit Pro

Edit custom code inside WordPress

CodeKit Pro is a paid WordPress edition for adding, editing, and maintaining custom code in an integrated IDE. It supports CSS, SCSS, SASS, JavaScript, PHP, and HTML. Syntax highlighting, autocomplete, Emmet abbreviations, tabs, spaces, line numbers, and multiple themes are available in the editor.

Separate code blocks keep different tasks manageable. Custom groups or categories, code folding, custom code includes, and editor hints provide more ways to organize and work with them. Save with AJAX without refreshing the page; each save triggers cache-proof code release. Use the Output button to inspect compiled code.

Release settings depend on the language

• CSS, SCSS, and SASS: target specific pages or posts, devices, resolutions, and show types, including desktop, tablet, phone, and retina shows.
• JavaScript: target selected pages or posts, or place scripts in wp_head, after wp_body, or before wp_body.
• HTML: place markup in wp_head, after the wp_body tag, or before the wp_body tag.
• PHP: add custom code directly to functions.php.
• Additional languages: the Pro edition adds support for languages such as LESS, Stylus, CoffeeScript, and PUG.

Advanced release locations give more control over where code runs. These choices are useful for styles aimed at a particular page or device and for scripts or markup placed at a supported WordPress hook.

AI assistance and editor controls

CodeKit Pro includes tools to generate code, address syntax errors or bugs, and optimize code for performance. The AI connection supports Google Gemini and OpenAI through your own API keys.

For editing, the IDE includes language switching, search and line-comment shortcuts, adjustable font size and spacing, full-screen editing, toolbar access to code, and optional save notifications. Separate blocks can be used for style changes, analytics or tag snippets, custom JavaScript, static HTML, PHP functions, and urgent code updates.

Installation and use

Install CodeKit in WordPress, activate it, and open the plugin interface. The Upgrade button is identified as the route to learn about the Pro edition and obtain its license. Then make a code block, choose its language, enter or generate code, choose a release location, and save. To review compiled output, use the Output button at the bottom-right of the IDE.