WordPress REST API

I got the chance to speak about the WordPress REST API at Meetup WordPress Vienna.

In this presentation I tried to explain the WP REST API, what it is, how it came to WP, how we can use it and why is important.

Here you can find the best quality for these slides: https://qevalon.com/wp-content/uploads/2020/01/wordpress_REST_API_Final.pdf

Transcript

1. WORDPRESS REST API WORDPRESS REST API
2. W E B D E V E L O P E R QEVALON.COM QEVALON.COM Valon Cengaj Valon Cengaj
3. Outline Outline What is the WordPress REST API ? What is the WordPress REST API ? Background Background Advantages Advantages WordPress REST API Commands WordPress REST API Commands Authentication Authentication Routes & Endpoints Routes & Endpoints Custom Routes & Endpoints Custom Routes & Endpoints How we can use it How we can use it
4. What What is the is the WordPress WordPress REST API ? REST API ? An interface that developers can use to access An interface that developers can use to access WordPress from outside the WordPress WordPress from outside the WordPress installation itself. installation itself. REST REST API API JSON JSON
5. What REST & API mean? What REST & API mean? API API A Application pplication P Programming rogramming I Interface nterface REST REST Re Representational presentational S State tate T Transfer ransfer Each URL is called a request while the data sent back to you is called a response. It is a set of rules that allow programs to talk to each other. The developer creates the API on the server and allows the client to talk to it. Determines how the API looks like. It is a set of rules that developers follow when they create their API. One of these rules states that you should be able to get a piece of data (called a resource) when you link to a specific URL.
6. Understanding the Understanding the WordPRESS REST API WordPRESS REST API BACKGROUND Was released as part of core in version 4.7 in December 2016, but it was around as a plugin before then. It's designed to support a range of applications build on WordPress and to transform WordPress from a CMS to an application platform. It's used by the Gutenberg editing interface, which became part of core in 2018.
7. Understanding the Understanding the WordPRESS REST API WordPRESS REST API ADVANTAGES The ability to create SPAs using the REST API. The Ability to integrate WordPress with other frontend technologies and systems. Specific changes such as the need to build Gutenberg blocks instead of meta boxes in page and post editing screens. The ability to develop with WordPress if you're a frontend developer who doesn't write PHP. For PHP developers, an increasing need to expand your skills to include JavaScript.
8. WordPress REST API Commands WordPress REST API Commands GET Retrieves a resource such as a post or some other data. Adds a resource to the server, such as a post, attachment or another resource. Can be used to edit or update a resource that’s already on the server. Removes a resource from the server. Use it with care! POST PUT DELETE Action Action Resource Resource /posts /posts Description Description /posts/5 /posts/5
9. Authentication Authentication Only applicable if the REST API is used within WordPress Cookie authentication Cookie authentication Using JWT Authentication plugin by Enrique Chavez Token Autherization Token Autherization Can be used ONLY during development Uses Username & Password as security details Has plugins for assisting the process (github.com/WP-API/Basic-Auth) Basic Authentication Basic Authentication
10. ROUTES ROUTES out of the box out of the box Resource Base Route Posts /wp/v2/posts Post Revisions /wp/v2/posts/<id>/revisions Categories /wp/v2/categories Tags /wp/v2/tags Pages /wp/v2/pages Page Revisions /wp/v2/pages<id>/revisions Comments /wp/v2/posts/comments Taxonomies /wp/v2/taxonomies Media /wp/v2/media Users /wp/v2/users Post Types /wp/v2/types Post Statuses /wp/v2/statuses Settings /wp/v2/settings Themes /wp/v2/themes
11. DEMO DEMO Jump to Code Jump to Code
12. CUSTOM ROUTES AND ENDPOINTS CUSTOM ROUTES AND ENDPOINTS
13. Creating a custom endpoint Creating a custom endpoint <?php add_action('rest_api_init', function () { register_rest_route( '/wprestapi/v2', '/books', [ 'methods' => 'GET', 'callback' => 'rest_get_books' ]); }); ?>
14. Fetching data using the created endpoint Fetching data using the created endpoint <?php function rest_get_books() { $args = array( 'post_type' => 'books', 'post_status' => 'publish', 'posts_per_page' => -1, 'orderby' => 'date', ); $posts = new WP_Query( $args ); if ( $posts->have_posts() ): while ( $posts->have_posts() ) : $posts->the_post(); $postID = get_the_id(); $postLink = get_the_permalink(); $postTitle = get_the_title(); $postContent = get_the_content(); $postData[] = [ 'id' => $postID, 'link' => $postLink, 'title' => $postTitle, 'content' => $postContent ]; endwhile; endif; wp_reset_postdata(); return $postData; }
15. Display data using jQuery Display data using jQuery var ajaxurl = "http://localhost:8888/wordpressrestapi/wp-json/wprestapi/v2/books"; jQuery(document).ready(function ($) { var data = { 'action': 'rest_get_books', } $.get(ajaxurl, data, function (response) { $.each(response, function(i) { var posts = response[i]; jQuery('.books-wrapper').append('<h1>' + posts.title + '</h1> <br> <p>' + posts.content + '<p>'); }); }) })
16. Real-World Applications using the WordPress REST API Real-World Applications using the WordPress REST API WordPress.com WordPress.com The Block Editor (Gutenberg) The Block Editor (Gutenberg) USA Today - Newspaper USA Today - Newspaper USTWO - Digital Product Studio USTWO - Digital Product Studio
17. Thank You! Thank You! QEVALON.COM QEVALON.COM