How to get featured image from WordPress REST API

When I was building my WordPress headless site, one of the biggest problems that I came across was NOT being able to get the featured image URL of an article when I made an API call.

Here’s the default response object that WordPress return from a specific post API call:

GET /wp-json/wp/v2/posts/3084

{
    "id": 3084,
    "date": "2020-06-01T12:26:38",
    "date_gmt": "2020-06-01T12:26:38",
    "modified": "2020-06-01T12:32:02",
    "modified_gmt": "2020-06-01T12:32:02",
    "slug": "how-to-make-wordpress-headless-and-fetch-posts-with-javascript",
    "status": "publish",
    "type": "post",
    "title": {
        "rendered": "How to make WordPress headless and fetch posts with JavaScript"
    },
    "content": {
        "rendered": "This is the content",
    },
    "excerpt": {
        "rendered": "This is the excerpt",
    },
    "author": 1,
    "featured_media": 3118,
    "categories": [
        2
    ],
    "tags": []
}

No where in the response object do you or I see a property with the feature image URL value.

First, if you’re looking to launch a WordPress site for your blog or business, you might want to look into launching your blog with SiteGround for just $6.99/mo (46.63% off). They make it really easy to select an affordable plan, create or transfer a domain, and they have best customer support I’ve ever came across.

Get started with SiteGround.

If you’re looking for other options, check out this article, “Cheap hosting for WordPress blogs“.

Disclaimer: The two SiteGround links above are affiliate links which provide a small commission to me at no cost to you. These links track your purchase and credit it to this website. Affiliate links are a primary way that I make money from this blog and SiteGround is the best web hosting option for new bloggers.

Let’s dive into how to get the feature image url from the WordPress REST api.

Solution: Install Better REST API Featured Images plugin

The Better REST API Featured Images plugin will extend the Rest API posts endpoint and add the featured image urls in the response WordPress post response object.

"better_featured_image": {
    "id": 3118,
    "alt_text": "",
    "caption": "",
    "description": "",
    "media_type": "image",
    "media_details": {
        "width": 1024,
        "height": 768,
        "file": "2020/06/js-wp-fetch-posts.jpg",
        "sizes": {
            "medium": {
                "file": "js-wp-fetch-posts-300x225.jpg",
                "width": 300,
                "height": 225,
                "mime-type": "image/jpeg",
                "source_url": "https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2020/06/01121222/js-wp-fetch-posts-300x225.jpg"
            },
            "thumbnail": {
                "file": "js-wp-fetch-posts-150x150.jpg",
                "width": 150,
                "height": 150,
                "mime-type": "image/jpeg",
                "source_url": "https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2020/06/01121222/js-wp-fetch-posts-150x150.jpg"
            },
            "medium_large": {
                "file": "js-wp-fetch-posts-768x576.jpg",
                "width": 768,
                "height": 576,
                "mime-type": "image/jpeg",
                "source_url": "https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2020/06/01121222/js-wp-fetch-posts-768x576.jpg"
            }
        },
        "image_meta": {
            "aperture": "0",
            "credit": "",
            "camera": "",
            "caption": "",
            "created_timestamp": "0",
            "copyright": "",
            "focal_length": "0",
            "iso": "0",
            "shutter_speed": "0",
            "title": "",
            "orientation": "0",
            "keywords": []
        }
    },
    "post": 3084,
    "source_url": "https://daqxzxzy8xq3u.cloudfront.net/wp-content/uploads/2020/06/01121222/js-wp-fetch-posts.jpg"
}

The object doesn’t just provide the URL’s but also different image sizes with the correct URL’s to those sizes.

If the post doesn’t have a featured image. The value will be null.

"better_featured_image": null

I like to tweet about WordPress and post helpful code snippets. Follow me there if you would like some too!