Edit custom code inside WordPress

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

Separate code into manageable blocks and groups, use code folding and custom includes, and switch the editor language when needed. Code hints, search and comment shortcuts, adjustable font size and spacing, full-screen editing, toolbar access to codes, and optional save notifications support day-to-day editing.

Editing and code release have different controls

The editor is where you write and organize code. Release settings determine where that code is applied: CSS, SCSS, and SASS can target specific pages or posts, devices, resolutions, and display types, including desktop, tablet, phone, and retina displays. JavaScript can target selected pages or posts, or be placed in wp_head, after wp_body, or before wp_body. HTML can be placed in wp_head, after the wp_body tag, or before it. Custom PHP code can be added directly to functions.php.

Saving uses AJAX, so you can save without refreshing the page. CodeKit Pro also includes cache-proof code release each time you save. Use the Output function to inspect compiled code after compilation.

AI assistance uses your API keys

CodeKit Pro includes tools to generate code, address syntax errors or bugs, and optimize code. The AI connection supports Google Gemini and OpenAI through your own API keys. The editor also supports LESS, Stylus, CoffeeScript, and PUG.

Set up a code block

Install CodeKit in WordPress, activate it, and open the add-on interface. Use the Upgrade button for details about the Pro edition and its license. Then create a code block, choose its language, enter or generate code, select a release location, and save. The Output button at the bottom-right of the IDE displays the output.

Separate blocks can hold tasks such as style adjustments, analytics or tag snippets, custom JavaScript, static HTML, and PHP functions.