All articles
April 29, 20268 min read·ImageAPI Team

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.

WordPressTutorials

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

Is this safe to use on a live WordPress site?
Yes. The API key lives in wp-config.php, never reaches the browser, and the shortcode escapes all output. Cache results in transients to control cost.
Will this slow down my pages?
Only the first render of a unique prompt makes an API call. After that, the URL is served from a transient. For new posts, render the shortcode once in the editor before publishing so visitors get the cached version.
Can I use this with WooCommerce product images?
Yes. Hook into the product save action and call the same generate endpoint to create a hero image based on the product title and description.

Try the API used in this article

Free tier, transparent pricing, and a single REST endpoint for FLUX, Stable Diffusion, and Leonardo models.

Related reading