How to Create an Image from WordPress Post Content with PHP and jQuery (Step by Step Guide)

Sometimes you may want to automatically generate an image from WordPress post content — for example, to create shareable images, downloadable posters, or social media graphics.

In this tutorial, I will show you how you can generate an image directly from your WordPress content using jQuery AJAX and PHP (GD library with TrueType fonts). This solution works without any external plugin — just a few lines of code in your theme’s functions.php file and a small jQuery script.

Why Generate an Image from WordPress Content?

Automatically create post previews for sharing on social media.

Make your articles downloadable as images for offline reading.

Add a “download as image” button for your readers.

Save time compared to manually designing images in Photoshop or Canva.

Step 1: jQuery Script (Frontend)

Add this JavaScript code to your theme (or enqueue it properly). It listens for a click on the .download-image button, calls AJAX, and then downloads the generated image.

</p>
<p>// scripts for automatic image generate</p>
<p><code><br />
// scripts for automatic image generate<br />
jQuery(document).ready(function($) {<br />
    $('.download-image').on('click', function(e) {<br />
        e.preventDefault();</p>
<p>        let post_id = $(this).data("postid");<br />
        var ajaxUrl = '<!--?php echo admin_url('admin-ajax.php'); ?-->';</p>
<p>        $.ajax({<br />
            url: ajaxUrl,<br />
            type: "POST",<br />
            data: {<br />
                action: "generate_post_image",<br />
                post_id: post_id<br />
            },<br />
            success: function(response){<br />
                if(response.success){<br />
                    let url = response.data.url;<br />
                    let a = document.createElement('a');<br />
                    a.href = url;<br />
                    a.download = "post-image.jpg";<br />
                    document.body.appendChild(a);<br />
                    a.click();<br />
                    a.remove();<br />
                } else {<br />
                    console.log("Error: " + response.data);<br />
                }<br />
            },<br />
            error: function(xhr, status, error){<br />
                console.log("Error: " + error);<br />
            }<br />
        });<br />
    });<br />
});<br />
</code></p>
<p>

Step 2: PHP Function (functions.php)

Now, add this code to your theme’s functions.php file. This function will fetch your post content, add a title + writer name, and generate an image using PHP’s GD library.

add_action(‘wp_ajax_generate_post_image’, ‘generate_post_image_callback’);
add_action(‘wp_ajax_nopriv_generate_post_image’, ‘generate_post_image_callback’);

function generate_post_image_callback() {

$post_id = intval($_POST[‘post_id’]);
$post = get_post($post_id);

if (!$post) {
wp_send_json_error(‘Invalid post ID’);
}

// Get content and wrap
$content = strip_tags($post->post_content);
$content = wordwrap($content, 100, “\n”);
$lines = explode(“\n”, $content);

// Image size
$line_height = 40;
$width = 1341;
$height = max(1754, (count($lines) * $line_height) + 200);

// Create image
$im = imagecreatetruecolor($width, $height);

// Colors
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);

// Fill background
imagefilledrectangle($im, 0, 0, $width, $height, $white);

// Fonts (change path to your theme’s fonts folder)
$font_regular = get_stylesheet_directory() . ‘/ast/fonts/poppins-400-regular.ttf’;
$font_bold = get_stylesheet_directory() . ‘/ast/fonts/poppins-700.ttf’;
$font_size_title = 40;
$font_size_writer = 20;
$font_size_body = 18;

// — Extra text section —
$topic_id = get_post_meta($post->ID, ‘_haslearn_connect_with_topic’, true);
$topic_name = $topic_id ? get_post_field(‘post_title’, $topic_id) : ‘___’;
$topic_writer= $topic_id ? get_the_terms($topic_id, ‘writers’) : [];
$topic_writer_name = !empty($topic_writer) ? $topic_writer[0]->name : ‘Unknown’;

// Title
$y = 80;
$title = “Topic name: $topic_name”;
$bbox = imagettfbbox($font_size_title, 0, $font_bold, $title);
$text_width = $bbox[2] – $bbox[0];
$x = ($width – $text_width) / 2;
imagettftext($im, $font_size_title, 0, $x, $y, $black, $font_bold, $title);

// Writer
$y += 70;
$writer = “Writer: $topic_writer_name”;
$bbox = imagettfbbox($font_size_writer, 0, $font_regular, $writer);
$text_width = $bbox[2] – $bbox[0];
$x = ($width – $text_width) / 2;
imagettftext($im, $font_size_writer, 0, $x, $y, $black, $font_regular, $writer);

// — Post Content —
$y += 80;
$left_margin = 80;

foreach ($lines as $line) {
imagettftext($im, $font_size_body, 0, $left_margin, $y, $black, $font_regular, $line);
$y += $line_height;
}

// — Add Watermark —
$watermark_text = “literaturexpres.com”;
$font_size_watermark = 80; // adjust size
$watermark_color = imagecolorallocatealpha($im, 150, 150, 150, 80);
// last parameter (0–127) is alpha (transparency)

// Diagonal watermark
$bbox = imagettfbbox($font_size_watermark, 45, $font_bold, $watermark_text);
$watermark_width = $bbox[2] – $bbox[0];
$watermark_height = $bbox[1] – $bbox[7];

// Center position
$watermark_x = ($width – $watermark_width) / 2;
$watermark_y = ($height – $watermark_height) / 1.5;

// Print watermark text
imagettftext(
$im,
$font_size_watermark,
45, // angle
$watermark_x,
$watermark_y,
$watermark_color,
$font_bold,
$watermark_text
);

// Save file in uploads
$upload_dir = wp_upload_dir();
$filename = ‘post-‘ . $post_id . ‘-‘ . time() . ‘.jpg’;
$filepath = $upload_dir[‘path’] . ‘/’ . $filename;

imagejpeg($im, $filepath, 90);
imagedestroy($im);

$fileurl = $upload_dir[‘url’] . ‘/’ . $filename;
wp_send_json_success([‘url’ => $fileurl]);
}

Step 3: Add a Button to Download the Image

In your WordPress post template (e.g. single.php), add:

<a href=”#” class=”download-image” data-postid=”<?php the_ID(); ?>”>
Download as Image
</a>