Write and organize code in WordPress

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

Keep work in separate code blocks, organize it with custom groups or categories, and use code folding and custom code includes to manage larger sets of changes. The editor also provides code hints, language switching, search and comment shortcuts, adjustable font size and spacing, full-screen editing, toolbar access to code, and optional save notifications.

Release locations vary by language

• CSS, SCSS, and SASS: target specific pages or posts, devices, resolutions, and display types, including desktop, tablet, phone, and retina shows.
• JavaScript: target selected pages or posts, or release 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.

The Pro edition also supports languages such as LESS, Stylus, CoffeeScript, and PUG. Saving code uses AJAX without a page refresh, and each save triggers cache-proof code release. The Output button lets you inspect compiled code.

AI tools and code changes

CodeKit Pro includes tools to generate, fix, and optimize custom code. The AI connection supports Google Gemini and OpenAI through your own API keys. You can enter code in a block or ask an integrated tool to generate it, then choose the relevant release location and save.

Installation and editor process

Install CodeKit in WordPress, activate it, and open the extension interface. The documented workflow points to the Upgrade button for information about the Pro edition and obtaining its license. Then make a code block, choose its language, enter or generate code, choose a release location, and save. The Output button is at the bottom-right of the IDE.

Separate blocks and language-specific release options let you manage styles, scripts, markup, and PHP functions within one WordPress editing workflow.