https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n\n\n\nTry copy-pasting that to your browser and you will see a bunch of data in JSON format<\/strong>. This format can easily be converted into an Array in any programming language.<\/p>\n\n\n\nIn this tutorial we will learn how to make a custom endpoint.<\/p>\n\n\n\n
Register GET Route<\/h2>\n\n\n\n
GET Request means receiving data<\/strong> from the server.<\/p>\n\n\n\nIn this example, we want 2 new endpoints for our Project post-type:<\/p>\n\n\n\n
Note<\/strong>: If you would like to follow along with this tutorial, Paste in these code<\/a> in functions.php<\/code> to generate Project post-type and create some initial data.<\/p>\n\n\n\n1. Static Route<\/strong> at \/projects<\/code> to get recent projects:<\/p>\n\n\n\nadd_action( 'rest_api_init', function() {\n register_rest_route( 'my\/v1', '\/projects', [\n 'methods' => 'GET',\n 'callback' => 'get_projects',\n 'permission_callback' => '__return_true',\n ] );\n} );\n\n\/\/ Get all projects and assign thumbnail\nfunction get_projects( $params ) {\n $projects = get_posts( [\n 'post_type' => 'project',\n 'posts_per_page' => 10\n ] );\n\n foreach( $projects as &$p ) {\n $p->thumbnail = get_the_post_thumbnail_url( $p->ID );\n }\n\n return $projects;\n}<\/code><\/pre>\n\n\n\nThe snippet above will create an endpoint at https:\/\/yoursite.com\/wp-json\/my\/v1\/projects<\/strong>.<\/p>\n\n\n\nYou might wonder what is my\/v1<\/code>. That is the namespace<\/strong> and version<\/strong>.<\/p>\n\n\n\nThe namespace is to identify a group. You can use anything, but try to keep it short.<\/p>\n\n\n\n
The version is to differentiate an updated route. When someday you want to update this API, you should keep the v1<\/code> as is and create a new route with v2<\/code> instead. This is to prevent existing apps that are using v1 from breaking down.<\/p>\n\n\n\n2. Dynamic Route<\/strong> at \/project\/[id]<\/code> to get a specific project:<\/p>\n\n\n\nadd_action( 'rest_api_init', function() {\n register_rest_route( 'my\/v1', '\/project\/(?P<id>\\d+)', [\n 'methods' => 'GET',\n 'callback' => 'get_project',\n 'permission_callback' => '__return_true',\n ] );\n} );\n\n\/\/ Get single project\nfunction get_project( $params ) {\n $project = get_post( $params['id'] );\n $project->thumbnail = get_the_post_thumbnail_url( $project->ID );\n return $project;\n}<\/code><\/pre>\n\n\n\nThe breakdown of (?P<id>\\d+)<\/code>: <\/p>\n\n\n\n?P<id><\/code> means it will save the value as ‘id’.<\/li>\\d+<\/code> is the regex validation and means it only accepts numbers. You can read more about regex in MDN article here<\/a>.<\/li><\/ul>\n\n\n\nRegister POST Route<\/h2>\n\n\n\n
POST Request means sending data<\/strong> to the server.<\/p>\n\n\n\nContinuing from the example above, we need a Search endpoint<\/strong> where we can filter by submitting title and\/or category.<\/p>\n\n\n\nHere’s how:<\/p>\n\n\n\n
add_action( 'rest_api_init', function() {\n register_rest_route( 'my\/v1', '\/projects_search', [\n 'methods' => 'POST',\n 'callback' => 'post_projects_search',\n 'permission_callback' => '__return_true',\n ] );\n} );\n\n\/\/ Search projects\nfunction post_projects_search( $request ) {\n \/\/ Get sent data and set default value\n $params = wp_parse_args( $request->get_params(), [\n 'title' => '',\n 'category' => null\n ] );\n\n $args = [\n 'post_type' => 'project',\n 's' => $params['title'],\n ];\n\n if( $params['category'] ) {\n $args['tax_query'] = [[\n 'taxonomy' => 'project_category',\n 'field' => 'id',\n 'terms' => $params['category']\n ]];\n }\n\n return get_posts( $args );\n}<\/code><\/pre>\n\n\n\nIt’s difficult to use your browser to simulate POST requests. So I suggest using a software called Postman.<\/p>\n\n\n\n
Debugging with Postman<\/h2>\n\n\n\n
Postman is an amazing free software to try out API requests. First, download and register for an account:<\/p>\n\n\n\n
\nDownload Postman<\/a><\/div>\n<\/div>\n\n\n\nAfter that, create a new POST request and enter the appropriate data. The screenshot below is the Postman setting for our Search endpoint:<\/p>\n\n\n\n![\"\"](\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/07\/rest-api-postman-config.jpg\")
Postman config for POST request<\/figcaption><\/figure>\n\n\n\nClick SEND and you will see the returned data in the panel below:<\/p>\n\n\n\n![\"\"](\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/07\/rest-api-postman-result-1.jpg\")
The response from POST request above.<\/figcaption><\/figure>\n\n\n\nIf there’s an error, move to “Preview” tab to see the error message in a clearer way.<\/p>\n\n\n\n
Create a Wrapper Class (Optional)<\/h2>\n\n\n\n
If the endpoints are related, I recommend putting them in a class. Not only it’s tidier it also relieves you from worrying about duplicate method names.<\/p>\n\n\n\n
Here’s what it looks like when grouping the 3 endpoints above:<\/p>\n\n\n\n
if( !class_exists( 'MyAPI' ) ) {\n\nclass MyAPI {\n function __construct() {\n add_action( 'rest_api_init', [$this, 'init'] );\n }\n\n function init() {\n register_rest_route( 'my\/v1', '\/projects', [\n 'methods' => 'GET',\n 'callback' => [$this, 'get_projects'],\n ] );\n\n register_rest_route( 'my\/v1', '\/project\/(?P<id>\\d+)', [\n 'methods' => 'GET',\n 'callback' => [$this, 'get_project'],\n ] );\n\n register_rest_route( 'my\/v1', '\/projects_search', [\n 'methods' => 'POST',\n 'callback' => [$this, 'post_projects_search']\n ] );\n }\n\n \/\/ Get recent projects\n function get_projects( $params ) {\n $projects = get_posts( [\n 'post_type' => 'project',\n 'posts_per_page' => 10\n ] );\n\n foreach( $projects as &$p ) {\n $p->thumbnail = get_the_post_thumbnail_url( $p->ID );\n }\n\n return $projects;\n }\n\n \/\/ Get single project\n function get_project( $params ) {\n $project = get_post( $params['id'] );\n $project->thumbnail = get_the_post_thumbnail_url( $project->ID );\n return $project;\n }\n\n \/\/ Search projects\n function post_projects_search( $request ) {\n \/\/ Get sent data and set default value\n $params = wp_parse_args( $request->get_params(), [\n 'title' => '',\n 'category' => null\n ] );\n\n $args = [\n 'post_type' => 'project',\n 's' => $params['title'],\n ];\n\n if( $params['category'] ) {\n $args['tax_query'] = [[\n 'taxonomy' => 'project_category',\n 'field' => 'id',\n 'terms' => $params['category']\n ]];\n }\n\n return get_posts( $args );\n }\n}\n\nnew MyAPI();\n}<\/code><\/pre>\n\n\n\n
\n\n\n\nConclusion<\/h2>\n\n\n\n
WordPress REST API can be very powerful. It has been used by many plugins like WooCommerce to create an interactive experience.<\/p>\n\n\n\n
The Gutenberg editor also used the REST API in many areas such as updating your post without a page refresh.<\/p>\n\n\n\n
In my next few posts, I will cover about using JavaScript to call these APIs. This will lead to Headless WordPress<\/strong>, a topic most requested by our readers \ud83d\ude42<\/p>\n\n\n\nUseful links:<\/strong><\/p>\n\n\n\n- List of default API endpoints – wordpress.org<\/a><\/li>
- Postman Download – postman.com<\/a><\/li>
- The official tutorial for REST API – wordpress.org<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
Wordpress REST API is a very powerful tool with the right implementation. Learn how to create custom GET and POST request here.<\/p>\n","protected":false},"author":1,"featured_media":1788,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[46,31],"class_list":["post-1757","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","tag-api","tag-php"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1757"}],"version-history":[{"count":10,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1757\/revisions"}],"predecessor-version":[{"id":1895,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1757\/revisions\/1895"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1788"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}