\nSocial Media Feed:<\/b><\/h2>\n<\/li>\n<\/ul>\n
Using a REST API you can now show your social media feed from networks like Facebook, YouTube, Instagram, and Twitter on your website. <\/span><\/p>\nWordPress Theme and Plugin use REST API for Maintenance, Support, and Update<\/b><\/h3>\n
<\/p>\n
If you are into WordPress development you surely might have come across inserting the API Key option in theme options and plugin settings. Once an API key is inserted and saved the WordPress installation will now be able to communicate with the original developer server. Once API key is authenticated by the developer server it will send the update theme or plugin files to the WordPress installation.<\/span><\/p>\nData Sharing through Plugins using REST API<\/b><\/h2>\n
<\/p>\n
If it is a plugin, the API will sync the data between your WordPress website and the third-party application.<\/span><\/p>\n <\/p>\n
For example, if you use a Mailchimp Plugin and insert an authenticated API key you can directly send the opt-in emails to Mailchimp and it will store it in the selected Mailchimp list in your account.<\/span><\/p>\nHow REST API works in WordPress<\/b><\/h2>\n
<\/p>\n
Like other REST APIs, in WordPress too it works in four core HTML operations of GET, POST, PUT, and DELETE along with an additional command to instruct the API on what data is required and what to do with that data. You can understand this by going through the sections below.<\/span><\/p>\nComponents of WordPress REST API:<\/b><\/h2>\n
<\/p>\n
The Representational State Transfer (REST) API in WordPress comprises of 5 key components:<\/span><\/p>\n <\/p>\n
\n- Requests<\/span><\/li>\n
- Routes\/Endpoints<\/span><\/li>\n
- Responses<\/span><\/li>\n
- Schema<\/span><\/li>\n
- Controller Classes<\/span><\/li>\n<\/ul>\n
Understanding Requests:<\/b><\/h3>\n
<\/p>\n
Requests are communication in the form of getting operations between a client and the server implemented using the class WP_REST_Request submitted via HTTP. The requests are done to the registered routes.<\/span><\/p>\nUnderstanding Routes and Endpoints:<\/b><\/h3>\n
<\/p>\n
Each client-server request follows a certain route and reaches various endpoints within the route to get the desired output. In this case, Routes are effectively the URLs. When a request is made<\/span><\/p>\n <\/p>\n
When a request is made, API shows the available routes and each of the endpoints available within that route. It will then compare the GET request with the available endpoints and return the response accordingly.<\/span><\/p>\nResponses:<\/b><\/h3>\n
<\/p>\n
As it is a self-explanatory response is desired data that API returns against the request made. The response class is defined by WP_REST_Response.<\/span><\/p>\nSchema:<\/b><\/h3>\n
<\/p>\n
As web developers already understand that fetching data is done within a defined structure. This structure is known as a schema. A well-defined schema has an index of input parameters it accepts and an index of all the data attributes it can return. The schema also acts as a security cover for API as it only validates the requests adhering to its structure.<\/span><\/p>\nController Classes:<\/b><\/h3>\n
<\/p>\n
The controller coordinates between all the above elements and manages the complete process to get the desired output and optimize the complete process.<\/span><\/p>\nHow to create your first REST API functionality:<\/b><\/h2>\n
<\/p>\n
You have already learned about the 5 components of WordPress REST API, so the next step is how to implement these APIs in your project. To start with you must learn about the most popular Endpoints in a WP REST API. <\/span><\/p>\n <\/p>\n
They are as follows:<\/b><\/p>\n
<\/p>\n
\n\n\n| RESOURCES<\/b><\/td>\n | BASE ROUTE<\/b><\/td>\n<\/tr>\n\n| Posts<\/span><\/td>\n | \/wp\/v2\/posts<\/span><\/td>\n<\/tr>\n\n| Post Revisions<\/span><\/td>\n | \/wp\/v2\/revisions<\/span><\/td>\n<\/tr>\n\n| Categories<\/span><\/td>\n | \/wp\/v2\/categories<\/span><\/td>\n<\/tr>\n\n| Tags<\/span><\/td>\n | \/wp\/v2\/tags<\/span><\/td>\n<\/tr>\n\n| Pages<\/span><\/td>\n | \/wp\/v2\/pages<\/span><\/td>\n<\/tr>\n\n| Comments<\/span><\/td>\n | \/wp\/v2\/comments<\/span><\/td>\n<\/tr>\n\n| Taxonomies<\/span><\/td>\n | \/wp\/v2\/taxonomies<\/span><\/td>\n<\/tr>\n\n| Media<\/span><\/td>\n | \/wp\/v2\/media<\/span><\/td>\n<\/tr>\n\n| Users<\/span><\/td>\n | \/wp\/v2\/users<\/span><\/td>\n<\/tr>\n\n| Post Types<\/span><\/td>\n | \/wp\/v2\/types<\/span><\/td>\n<\/tr>\n\n| Post Statuses<\/span><\/td>\n | \/wp\/v2\/statuses<\/span><\/td>\n<\/tr>\n\n| Settings<\/span><\/td>\n | \/wp\/v2\/settings<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n <\/p>\n You are familiar with the endpoints, now you need to understand how to create an HTTP call, which always starts with your domain URL, for example myxyzdomain.com, and is followed by one of the base routes mentioned in the above table.<\/span><\/p>\nREST API Authentication<\/b><\/h2>\n <\/p>\n There are two types of functions in API that can be done without authentication, while others need authentication.<\/span><\/p>\nIn WordPress REST API authentication can be done through any of the three methods depending on the purpose.<\/span><\/p>\nThe 3 methods are:<\/span><\/p>\n <\/p>\n \n\n\n| Method of Authentication<\/b><\/td>\n | Purpose<\/b><\/td>\n<\/tr>\n\n| Cookie Authentication<\/span><\/td>\n | Plugins\/themes running on the same application<\/span><\/td>\n<\/tr>\n\n| OAuth<\/span><\/td>\n | Integrate with 3rd party apps, for example – Mailchimp, Instagram, Twitter, etc.<\/span><\/td>\n<\/tr>\n\n| Basic Authentication (through a plugin)<\/span><\/td>\n | For development and testing only<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Cookie authentication basically works well with the default login functionality of WordPress. The REST API works on this technique called \u201cnumber used once\u201d or \u201cnoonce\u201d which simply is a WordPress security token with a limited lifetime and is specific to the user. It is used to protect your application from being exploited by external sources and interfering with your program. This type of interference is commonly known as Cross-site request forgery (CSRF) or one-click attack or session riding.<\/span><\/p>\n <\/p>\n For REST API Authentication inbuilt and automatic javascript API can be used, or alternatively, manual AJAX authentication can also be used. If using Ajax, a noonce authentication request will have to be sent along with every request. In the absence of noonce the API will consider it as an unauthenticated request.<\/span><\/p>\n <\/p>\n For example if REST API authentication<\/span><\/p>\n <\/p>\n As an example, this is how the built-in Javascript client creates the nonce:<\/span><\/i><\/p>\n <\/p>\n <?php\r\nwp_localize_script( 'wp-api', 'wpApiSettings', array(\r\n'root' => esc_url_raw( rest_url() ),\r\n'nonce' => wp_create_nonce( 'wp_rest' )\r\n) );<\/pre>\n <\/p>\n This is then used in the base model:<\/span><\/i><\/p>\n \u00a0\u00a0\u00a0<\/span><\/i><\/p>\noptions.beforeSend = function(xhr) {\r\nxhr.setRequestHeader('X-WP-Nonce', wpApiSettings.nonce);\r\nif (beforeSend) {\r\n\u00a0\u00a0\u00a0 return beforeSend.apply(this, arguments);\r\n}\r\n};<\/pre>\n <\/p>\n Here is an example of editing the title of a post, using jQuery AJAX:<\/span><\/i><\/p>\n \u00a0\u00a0\u00a0<\/span><\/i><\/p>\n$.ajax( {\r\nurl: wpApiSettings.root + 'wp\/v2\/posts\/1',\r\nmethod: 'POST',\r\nbeforeSend: function ( xhr ) {\r\n\u00a0\u00a0\u00a0 xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );\r\n},\r\ndata:{\r\n\u00a0\u00a0\u00a0 'title' : 'Hello Moon'\r\n}\r\n} ).done( function ( response ) {\r\nconsole.log( response );\r\n} );<\/pre>\n <\/p>\n The other way of REST API authentication is using a plugin, but it is only recommended to be used during development and not on a live application.<\/span><\/p>\nREST API Global Parameters<\/b><\/h2>\nWordPress Representational State Transfer API has some pre-defined parameters, also known as meta parameters. They are as follows:<\/span><\/p>\n\n- _jsonp: <\/span>
\n<\/span>This metaparameter adds a JavaScript callback function before the data.<\/span><\/li>\n<\/ul>\nExample:<\/span><\/i>
\n<\/span><\/p>\n <\/p>\n <script>\r\nfunction receiveData( data ) {\r\n\u00a0\/\/ Do something with the data here.\r\n\u00a0\/\/ For demonstration purposes, we'll simply log it.\r\n\u00a0console.log( data );\r\n}\r\n<\/script>\r\n<script src=\"https:\/\/demo.wp-api.org\/wp-json\/?_jsonp=receiveData\"><\/script><\/pre>\n\n- _method (or X-HTTP-Method-Override header)<\/span>
\n<\/span>A method override parameter is used to make the API function compatible with all types of servers and clients, even the ones that don\u2019t process the HTTP methods correctly.<\/span><\/li>\n- _envelope<\/span>
\n<\/span>An envelope parameter collates all the response data within a body and then sends it to the requesting client. An added advantage of using this parameter is that it provides access to data to servers and clients that do not support accessing the full response data.<\/span>
\n<\/span>Example:<\/span><\/i>
\n<\/span><\/i><\/li>\n<\/ul>\nHTTP\/1.1 200 OK\r\n{\r\n\u00a0\"status\": 302,\r\n\u00a0\"headers\": {\r\n\"Location\": \"http:\/\/example.com\/wp-json\/wp\/v2\/users\/42\"\r\n\u00a0},\r\n\u00a0\"body\": {\r\n\"id\": 42\r\n\u00a0}\r\n}<\/pre>\n\n- _embed<\/span>
\n<\/span>In WordPress or any other development environment, any resource never works in isolation, it is always linked to other related resources. For example, an eCommerce product is linked to one or more categories, a featured image, product reviews, etc. Using an embed meta parameter the API directs the server to send all the parameters embedded in its response. It will minimize the number of HTTP requests made by the client. An embed parameter is passed within the GET parameter.<\/span><\/li>\n<\/ul>\n <\/p>\n How REST API Initiates Communication between Client and Server<\/b><\/h2>\n <\/p>\n To start the communication between two entities (server and client) it is important for the client to know whether a compatible API exists on a server that allows the communication. To initiate the communication and discover the client (in this case WordPress web application) send a request from HEADER using a route link.<\/span><\/p>\nThis is a two-step process. In 1st step, the web application identifies and discovers the API. In the second step, the client or web application should identify what all functions and data can be processed through it.<\/span><\/p>\nDiscovery of API<\/b><\/h4>\n <\/p>\n Example:<\/span><\/i><\/p>\nHTML:<\/span><\/i><\/p>\n<link rel='https:\/\/api.w.org\/' href='http:\/\/example.com\/wp-json\/' \/><\/pre>\nJavascript:<\/span><\/i><\/p>\n\/\/ jQuery method\r\nvar $link = jQuery( 'link[rel=\"https:\/\/api.w.org\/\"]' );\r\nvar api_root = $link.attr( 'href' );\r\n\/\/ Native method\r\nvar links = document.getElementsByTagName( 'link' );\r\nvar link = Array.prototype.filter.call( links, function ( item ) {\r\nreturn ( item.rel === 'https:\/\/api.w.org\/' );\r\n} );\r\nvar api_root = link[0].href;<\/pre>\n <\/p>\n XML <\/span><\/i><\/p>\n <\/p>\n XML uses Really Simple Discovery method. It comprises of a 2-step process:<\/span><\/i><\/p>\n <\/p>\n Step 1 – Find RSD endpoint using Link Element :<\/span><\/i><\/p>\n<link rel=\"EditURI\" type=\"application\/rsd+xml\" title=\"RSD\" href=\"http:\/\/example.com\/xmlrpc.php?rsd\" \/>\r\n\r\n<\/pre>\n <\/p>\n Step 2 – Fetch RSD endpoint:<\/span><\/i><\/p>\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<rsd version=\"1.0\" xmlns=\"http:\/\/archipelago.phrasewise.com\/rsd\">\r\n\u00a0<service>\r\n<engineName>WordPress<\/engineName>\r\n<engineLink>https:\/\/wordpress.org\/<\/engineLink>\r\n<homePageLink>http:\/\/example.com\/<\/homePageLink>\r\n<apis>\r\n\u00a0 <api name=\"WordPress\" blogID=\"1\" preferred=\"true\" apiLink=\"http:\/\/example.com\/xmlrpc.php\" \/>\r\n\u00a0 <!-- ... -->\r\n\u00a0 <api name=\"WP-API\" blogID=\"1\" preferred=\"false\" apiLink=\"http:\/\/example.com\/wp-json\/\" \/>\r\n<\/apis>\r\n\u00a0<\/service>\r\n<\/rsd><\/pre>\n<\/h3>\nIdentify API Capability:<\/b><\/h3>\n <\/p>\n In this step, the web application checks the configuration and sees what functions can be performed using the provided API, for example, sync data, update theme files, identify plugin support subscriptions, etc.<\/span><\/p>\n{\r\n\"name\": \"Example WordPress Site\",\r\n\"namespaces\": [\r\n\u00a0\u00a0\u00a0 \"wp\/v2\",\r\n\u00a0\u00a0\u00a0 \"oembed\/1.0\/\"\r\n]\r\n}<\/pre>\nConclusion:<\/b><\/h2>\nRepresentational State Transfer API holds immense potential for the future, and it has forced WordPress Stakeholders to start using it. REST API is already being included in the WordPress Core, and now Theme and Plugin developers have started to use API for theme and plugin maintenance, data integration, and other application requests.<\/span><\/p>\n <\/p>\n The REST API has transformed WordPress from a simple CMS to a fully equipped web application development platform. It is still in its nascent stage but the dedicated development community is surely going to harness its full potential. It is a vast concept and you need to practice it to understand it completely, and what you can do with it solely depends on your imagination.<\/span><\/p>\n | | | | | | | | | | | | | | | | |
![\"Zapier_logo\"](\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2019\/02\/1200px-Zapier_logo.svg_.png\" "\\"\\""){kind=logo}
<\/p>\n![\"google](\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2019\/02\/google_maps_2020_logo_before_after.png\" "\\"\\""){kind=logo}
<\/p>\n![\"simmer-wp\"](\"https:\/\/www.wpoven.com\/blog\/wp-content\/uploads\/2019\/02\/simmer-wp.jpg\" "\\"\\"")
<\/p>\n