Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
REST APIs for Absolute Beginners
Search
Tom J Nowell
July 23, 2017
Technology
0
970
REST APIs for Absolute Beginners
How to make a basic endpoint, use it on the frontend, and convert existing code
Tom J Nowell
July 23, 2017
Tweet
Share
More Decks by Tom J Nowell
See All by Tom J Nowell
Using Blocks Outside The Editor
tarendai
0
960
Composer_and_WordPress__1_.pdf
tarendai
0
77
VVV 2
tarendai
0
760
WordCamp Europe 2016 - Handling Anxiety
tarendai
1
470
Escape From New York
tarendai
0
710
WP The Right Way
tarendai
0
1k
Code Deodorant 2014
tarendai
1
720
Adv WP CLI
tarendai
0
690
WP CLI
tarendai
0
650
Other Decks in Technology
See All in Technology
slog.Handlerのよくある実装ミス
sakiengineer
4
150
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
150
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
270
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
450
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
160
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
9
73k
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
AWSで始める実践Dagster入門
kitagawaz
1
620
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Agile that works and the tools we love
rasmusluckow
330
21k
Navigating Team Friction
lara
189
15k
Site-Speed That Sticks
csswizardry
10
820
Designing for humans not robots
tammielis
253
25k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
How to Ace a Technical Interview
jacobian
279
23k
BBQ
matthewcrist
89
9.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Transcript
REST APIs for Absolute Beginners How to make a basic
endpoint, use it on the frontend, and convert existing code
What are my options?
Admin AJAX? add_action("wp_ajax_fruit", "fruit"); add_action("wp_ajax_nopriv_fruit", "fruit"); function fruit() { echo
"bananas"; exit; } jQuery.ajax({ type : "get", url : "https://example.com/wp-admin/admin-ajax.php", data : { action: "fruit" }, success: function(response) { // } });
A file in your theme/plugin you call?
REST API Endpoints
Where is the API? /wp-json
The rest API is a is a set of pages
that return JSON instead of HTML that have no state
REST actions GET - viewing POST - adding/updating DELETE -
deleting
Adding an Endpoint add_action( 'rest_api_init', function () { register_rest_route( 'tomjn/v1',
'/test/', array( 'methods' => 'GET', 'callback' => 'tomjn_rest_test' ) ); } ); function tomjn_rest_test() { return "moomins"; }
/wp-json/tomjn/v1/test
None
Viewing an endpoint jQuery.get( "https://tomjn.com/wp-json/tom/v1/test", function ( data ) {
console.log( data ); } );
How Do I Accept Parameters? function tomjn_rest_test( \WP_REST_Request $request )
{ return "moomins ".$request["val"]; } /wp-json/tomjn/v1/test?val=1 "moomins 1"
Converting AJAX calls • Register an endpoint • Use the
function WP Admin AJAX uses • Return what you want instead of printing it • Use the request parameter instead of $_GET $_POST etc • Update the URLs in your javascript
A Useful Helper wp_enqueue_script( 'wp-api' );
Creating Content $.ajax( { url: wpApiSettings.root + 'wp/v2/posts', method: 'POST',
beforeSend: function ( xhr ) { xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce ); }, data:{ 'title' : 'Hello Moon', 'content': 'Test post' } } ).done( function ( response ) { console.log( response ); } );
Updating Content $.ajax( { url: wpApiSettings.root + 'wp/v2/posts/1', method: 'POST',
beforeSend: function ( xhr ) { xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce ); }, data:{ 'title' : 'Updated Moon', 'content': 'even better post' } } ).done( function ( response ) { console.log( response ); } );
Deleting Content $.ajax( { url: wpApiSettings.root + 'wp/v2/posts/1', method: 'DELETE',
beforeSend: function ( xhr ) { xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce ); } } ).done( function ( response ) { console.log( response ); } );
Built in Endpoints Posts /wp/v2/posts Post Revisions /wp/v2/revisions Categories /wp/v2/categories
Tags /wp/v2/tags Pages /wp/v2/pages Comments /wp/v2/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
Useful Things
Adding REST support to CPT 'show_in_rest' => true,
WP.org REST API Handbook https://developer.wordpress.org/rest-api
Rest API Console
None
None
Questions? Tom J Nowell @tarendai https://tomjn.com Wordpress.com VIP* * we’re
hiring