Add AI Image Generation to WordPress in 15 Minutes
Step by step guide for adding an AI image generator to any WordPress site. No plugins required. Works with Elementor, Gutenberg, and classic themes.
Most WordPress users do not want to install yet another bloated plugin to add AI images. The good news is you do not have to. With about 30 lines of PHP you can call any modern image API from your theme functions file or from a tiny custom plugin and ship in an afternoon.
What you will end up with
A shortcode like [ai_image prompt='a cozy cabin in the snow'] that renders a fresh AI image in any post or page. The image is cached so you only pay once per unique prompt. You can also wire it into a Gutenberg block or an Elementor widget if you prefer a visual editor.
Step 1. Store your API key safely
Open wp-config.php and add this line above the line that says That's all, stop editing.
define('IMAGEAPI_KEY', 'sk_replace_me');Step 2. Add the shortcode to your theme
Open functions.php in your active theme or paste the snippet below into a small custom plugin file. The shortcode caches results in transients keyed by the prompt hash so repeat renders do not cost extra.
add_shortcode('ai_image', function ($atts) {
$a = shortcode_atts(array(
'prompt' => '',
'width' => 768,
'height' => 768,
), $atts);
if (empty($a['prompt'])) return '';
$cache_key = 'ai_img_' . md5($a['prompt'] . $a['width'] . $a['height']);
$cached = get_transient($cache_key);
if ($cached) return '<img src="' . esc_url($cached) . '" alt="' . esc_attr($a['prompt']) . '" />';
$resp = wp_remote_post('https://api.imageapi.org/api/v1/generate', array(
'timeout' => 120,
'headers' => array(
'Authorization' => 'Bearer ' . IMAGEAPI_KEY,
'Content-Type' => 'application/json',
),
'body' => wp_json_encode(array(
'prompt' => $a['prompt'],
'width' => intval($a['width']),
'height' => intval($a['height']),
'model' => 'flux-2-klein-9b',
)),
));
if (is_wp_error($resp)) return '<!-- AI image error -->';
$body = json_decode(wp_remote_retrieve_body($resp), true);
$url = isset($body['data']['image']) ? $body['data']['image'] : '';
if (!$url) return '<!-- AI image missing -->';
set_transient($cache_key, $url, WEEK_IN_SECONDS);
return '<img src="' . esc_url($url) . '" alt="' . esc_attr($a['prompt']) . '" />';
});Step 3. Use it inside any post
Drop this into a Gutenberg shortcode block, a classic editor, or an Elementor shortcode widget.
[ai_image prompt="a vintage typewriter on an oak desk, soft window light" width="1024" height="768"]Why not just install a plugin
Most AI image plugins for WordPress hide the API behind their own pricing layer and add tracking. The 30 lines above give you full control, no markup on the cost, and no extra dependencies. If you want a UI for non technical writers, build a small Gutenberg block on top of the same shortcode.
Bonus. Make it a Gutenberg block
If your editors are not comfortable with shortcodes, register a server side block that calls the same shortcode under the hood. The block can render a prompt input field in the editor and call your wp-json endpoint to fetch the image. That keeps the cost on your side and the UX simple.
Frequently asked questions
Try the API used in this article
Free tier, transparent pricing, and a single REST endpoint for FLUX, Stable Diffusion, and Leonardo models.
