CodeKit Pro for WordPress, with Your Own AI API Keys

Edit custom code within WordPress

CodeKit Pro is a paid WordPress edition for adding, editing, and maintaining code in an integrated IDE. It works with CSS, SCSS, SASS, JavaScript, PHP, and HTML. The editor provides syntax highlighting, autocomplete, Emmet abbreviations, tabs, spaces, line numbers, and multiple themes. Separate code blocks, custom groups or categories, code folding, custom code includes, and editor hints help organize work as projects grow.

Save changes with AJAX without refreshing the page; each save triggers cache-proof code release. Use the Output button at the bottom-right of the IDE to inspect compiled code. You can switch the editor language, adjust font size and spacing, edit full-screen, find code, comment out a line with a shortcut, and access codes from the toolbar. Save notifications are optional.

AI tools for writing and revising code

Integrated AI features can generate code, help address syntax errors or bugs, and optimize code for performance. They connect to Google Gemini or OpenAI through your own API keys.

Release settings vary by language

• CSS, SCSS, and SASS: Apply styles to selected pages or posts, devices, resolutions, and show types, including desktop, tablet, phone, and retina displays.
• JavaScript: Place scripts on selected pages or posts, or release them in wp_head, after wp_body, or before wp_body.
• HTML: Add markup in wp_head, after the wp_body tag, or before the wp_body tag.
• PHP: Add custom PHP code directly to functions.php.
• Additional languages: The Pro edition includes support for LESS, Stylus, CoffeeScript, and PUG.

These language-specific locations let you select where code is released. For example, styles can target a device or display type, while JavaScript and HTML can be placed at designated WordPress hooks or page positions.

Set up a code block

Install CodeKit in WordPress, activate it, and open the add-on interface. The described upgrade flow uses the Upgrade button to view Pro details and obtain a license. To work with code, make a block, choose its language, enter or generate code, choose a relevant release location, and save. The Output button at the bottom-right of the IDE displays compiled code for review.

CodeKit Pro brings code editing, organization, AI assistance, and release controls into a WordPress workflow for styles, scripts, markup, and PHP functions.