{"id":5186,"date":"2021-01-14T19:56:37","date_gmt":"2021-01-15T01:56:37","guid":{"rendered":"http:\/\/localhost:3000\/?p=29"},"modified":"2023-04-19T08:53:51","modified_gmt":"2023-04-19T14:53:51","slug":"introduction-to-the-wordpress-rest-api","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/introduction-to-the-wordpress-rest-api\/","title":{"rendered":"Introduction To The WordPress REST API"},"content":{"rendered":"\n

In the modern age of frontend development developers need flexibility in what tools they can use to implement their frontend websites and apps. Prior to the release of the WordPress REST API separating your frontend from WordPress would be a daunting task. With the release of the REST API, WordPress is paving the way for a better future for developers. If you have worked with a REST API before then it shouldn’t be too difficult to get started with the WordPress REST API. If you are new to REST APIs or APIs in general, let’s get acquainted with them before we dive into the WordPress REST API.<\/p>\n\n\n\n

What Is A REST API?<\/h2>\n\n\n\n

An Application Programming Interface<\/a>, or API, defines a way for multiple computing platforms to communicate. It allows for a computing platform (e.g. a frontend website) to make requests and receive data from another system. The API defines how the requests should be made, what the format of the data will look like, and any conventions that are needed. A REpresentational State Transfer API, or REST API, is a special style of API that comes with a common architecture and patterns used in web services. RESTful web services provide interoperability between web computing platforms over the internet. REST APIs provide URL endpoints where you can request information from a system. <\/p>\n\n\n\n

The WordPress REST API<\/h2>\n\n\n\n

The WordPress REST API provides URL endpoints to request different objects from WordPress such as posts, pages, settings, taxonomies, etc. Transactions with the WordPress REST API are done using JSON<\/a>, making it easy for JavaScript applications in particular to interact with the API. JavaScript is not a requirement to interact with the API, you can use any language that can make HTTP requests. In general, when you are building a client application separate from WordPress and you want to use some data from WordPress you will need to utilize the REST API.<\/p>\n\n\n\n

Using the WordPress REST API<\/h2>\n\n\n\n

Let’s take a look at the WordPress REST API using only our browser. The simplest request you can make is a GET<\/code> request to yoursite.com\/wp-json\/<\/code>. For example, for my test site I use Local<\/a>, a popular developer tool for running local WordPress sites. I have my local WordPress site as http:\/\/mysite.local\/<\/code>. If I go to http:\/\/mysite.local\/wp-json\/<\/code> I see a JSON response showing me a few things:<\/p>\n\n\n\n

  1. Some general information about my site (i.e. name, description, url)<\/li>
  2. What API routes are available<\/li>
  3. What endpoints are available for each route<\/li><\/ol>\n\n\n\n

    The root GET<\/code> requests actually returns all of the available API routes. If you look closely you will see one route called \/wp\/v2\/posts<\/code>. This route is the list posts endpoint. Making a GET<\/code> request to this route will return all of the published posts for the site. I have my site setup with a test post so I can see it in action. Let’s visit this route (i.e. http:\/\/mysite.local\/wp-json\/wp\/v2\/posts<\/code>) and make a GET<\/code> request to see what it returns:<\/p>\n\n\n

    [\n<\/span><\/span>  {\n<\/span><\/span>    \"id\"<\/span>: 26<\/span>,\n<\/span><\/span>    \"date\"<\/span>: \"2020-12-18T20:37:13\"<\/span>,\n<\/span><\/span>    \"date_gmt\"<\/span>: \"2020-12-18T20:37:13\"<\/span>,\n<\/span><\/span>    \"modified\"<\/span>: \"2020-12-18T20:37:13\"<\/span>,\n<\/span><\/span>    \"modified_gmt\"<\/span>: \"2020-12-18T20:37:13\"<\/span>,\n<\/span><\/span>    \"slug\"<\/span>: \"test-post-please-ignore\"<\/span>,\n<\/span><\/span>    \"status\"<\/span>: \"publish\"<\/span>,\n<\/span><\/span>    \"type\"<\/span>: \"post\"<\/span>,\n<\/span><\/span>    \"link\"<\/span>: \"http:\/\/mysite.local\/test-post-please-ignore\/\"<\/span>,\n<\/span><\/span>    \"title\"<\/span>: {\n<\/span><\/span>      \"rendered\"<\/span>: \"Test Post, Please Ignore\"<\/span>\n<\/span><\/span>    },\n<\/span><\/span>    \"content\"<\/span>: {\n<\/span><\/span>      \"rendered\"<\/span>: \"<p>This is a test post.<\/p>\"<\/span>,\n<\/span><\/span>      \"protected\"<\/span>: false<\/span>\n<\/span><\/span>    },\n<\/span><\/span>    \"excerpt\"<\/span>: {\n<\/span><\/span>      \"rendered\"<\/span>: \"<p>This is a test post.<\/p>\"<\/span>,\n<\/span><\/span>      \"protected\"<\/span>: false<\/span>\n<\/span><\/span>    },\n<\/span><\/span>    \"_links\"<\/span>: {\n<\/span><\/span>        \"self\"<\/span>: [{\n<\/span><\/span>            \"href\"<\/span>: \"http:\/\/mysite.local\/wp-json\/wp\/v2\/posts\/26\"<\/span>\n<\/span><\/span>        }]\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>]\n<\/span><\/span><\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
    I took the liberty of reducing some of the fields in the response to make it easier to view. Notice the response is a list of posts, and will return multiple posts if you have more than one. Each posts has a standard set of fields such as title, content, excerpt, slug, etc.<\/p>\n\n\n\n
    If you notice in the JSON response above there is also a “link” to the API endpoint for the post. Making a GET<\/code> request to the link will return the individual post data as shown below:<\/p>\n\n\n
    {\n<\/span><\/span>  \"id\"<\/span>: 26<\/span>,\n<\/span><\/span>  \"date\"<\/span>: \"2020-12-18T20:37:13\"<\/span>,\n<\/span><\/span>  \"date_gmt\"<\/span>: \"2020-12-18T20:37:13\"<\/span>,\n<\/span><\/span>  \"modified\"<\/span>: \"2020-12-18T20:37:13\"<\/span>,\n<\/span><\/span>  \"modified_gmt\"<\/span>: \"2020-12-18T20:37:13\"<\/span>,\n<\/span><\/span>  \"slug\"<\/span>: \"test-post-please-ignore\"<\/span>,\n<\/span><\/span>  \"status\"<\/span>: \"publish\"<\/span>,\n<\/span><\/span>  \"type\"<\/span>: \"post\"<\/span>,\n<\/span><\/span>  \"link\"<\/span>: \"http:\/\/mysite.local\/test-post-please-ignore\/\"<\/span>,\n<\/span><\/span>  \"title\"<\/span>: {\n<\/span><\/span>    \"rendered\"<\/span>: \"Test Post, Please Ignore\"<\/span>\n<\/span><\/span>  },\n<\/span><\/span>  \"content\"<\/span>: {\n<\/span><\/span>    \"rendered\"<\/span>: \"\\n<p>This is a test post.<\/p>\\n\"<\/span>,\n<\/span><\/span>    \"protected\"<\/span>: false<\/span>\n<\/span><\/span>  },\n<\/span><\/span>  \"excerpt\"<\/span>: {\n<\/span><\/span>    \"rendered\"<\/span>: \"<p>This is a test post.<\/p>\\n\"<\/span>,\n<\/span><\/span>    \"protected\"<\/span>: false<\/span>\n<\/span><\/span>  },\n<\/span><\/span>  \"_links\"<\/span>: {\n<\/span><\/span>    \"self\"<\/span>: [\n<\/span><\/span>      {\n<\/span><\/span>        \"href\"<\/span>: \"http:\/\/mysite.local\/wp-json\/wp\/v2\/posts\/26\"<\/span>\n<\/span><\/span>      }\n<\/span><\/span>    ]\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
    Note the above response is the same as what is returned for the list of posts, but this time only a single post object is returned rather than a list. Looking at the endpoint you notice that we are making the request for the post using its id<\/code> property. While this works, it isn’t ideal for a few reasons. Applications typically use URLs to determine what request to  make. So if you have a single post page on your site at \/posts\/{id}<\/code> you will be able to get the id<\/code> of the post from the URL and use it to make a GET<\/code> request to your WordPress site. However, this requires your URLs to have numeric IDs when what you really want is prettier URLs that contain the post slug<\/code>. WordPress allows you to make requests for posts based on slug<\/code> (and many other fields for that matter) using the list posts endpoint. For example, to get the post above using the slug<\/code> we can make a GET<\/code> request to http:\/\/mysite.local\/wp-json\/wp\/v2\/posts?slug=test-post-please-ignore<\/code>. This will return a list of one post with our requested post in it.<\/p>\n\n\n\n
    Pagination Using the WordPress REST API<\/h2>\n\n\n\n
    By default, the list posts API endpoint will only return the latest 10 posts. As your site grows to eventually have more than 10 posts, you will need to customize your API queries to allow for paginating these posts. You can request up to 100 posts at a time from WordPress using a per_page<\/code> query parameter, but note that larger queries can hurt your site performance. Let’s take a look at a couple query parameters that are useful for paginating your WordPress posts.<\/p>\n\n\n\n