This document discusses integrating WordPress with web APIs. It defines APIs and provides examples using the Treehouse and ShopLocket APIs. It demonstrates making GET requests to retrieve data and displaying it in WordPress using JSON, AJAX, and PHP. It also covers authentication methods like OAuth and discusses best practices for caching API responses and handling errors.

1. Integrating WordPress
With Web APIs
Randy Hoyt

2. #wpsummit @randyhoyt@randyhoyt
Randy Hoyt randyhoyt.com
@randyhoyt
Presentation randyhoyt.com/wpsummit13
About Me

3. #wpsummit @randyhoyt@randyhoyt
• APIs: Defined
• Two Examples:
1. Get Treehouse Badges
2. Get ShopLocket Products
• WordPress Functions
Overview

4. API

5. Application Programming Interface

6. A point where two systems,
subjects, organizations, etc.,
meet and interact.
Interface, http://dictionary.com/browse/interface

7. [Keyboard]

8. [Remote Control]

9. [Lock and Key]

10. An interface for software
components to communicate
with each other.
Wikipedia: API, http://trhou.se/defineAPI

11. #wpsummit @randyhoyt@randyhoyt
•Android SDK: Camera API
API Examples

12. import android.hardware.Camera;
Camera.getNumberOfCameras();
Camera.open(cameraId);

13. #wpsummit @randyhoyt@randyhoyt
•Android SDK: Camera API
•WordPress: Plugin API
API Examples

14. <?php
/*
Plugin Name: Treehouse Badges
Description: Displays the badges ...
Version: 1.0
*/
?>
add_action('init','treehouse_badges_init');
...

15. #wpsummit @randyhoyt@randyhoyt
•Android SDK: Camera API
•WordPress: Plugin API
•HTML5: Canvas API
API Examples

16. var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillRect(10, 10, 40, 380, "#000000");
context.drawImage(img, x, y, 100, 77);

17. Web APIs

19. REST

20. Representational State Transfer

21. RESTful API

22. Example #1: Treehouse

23. [Treehouse screenshot]

24. JavaScript Object Notation:
Text-based open standard
designed for human-readable
data interchange.
Wikipedia: JSON, http://trhou.se/defineJSON

25. {
"firstName": "John",
"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumber": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "fax",
"number": "646 555-4567"
}
]
}
Wikipedia: JSON, http://trhou.se/defineJSON

26. [Treehouse JSON]

27. [HTML]

28. Asynchronous JavaScript and XML:
Technique used by the browser to
retrieve data from a server in the
background without interfering with
the existing page
Wikipedia: Ajax, http://trhou.se/defineAJAX

29. [AJAX Request Code]

30. [Badge Code]

31. [Badge Display]

40. <?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => 'http://teamtreehou...
));
$resp = curl_exec($curl);
curl_close($curl);
?>

41. GET
Request
with
WordPress
HTTP
API
WordPress, http://codex.wordpress.org/HTTP_API

42. #wpsummit @randyhoyt@randyhoyt
• GET
• POST
• PUT
• DELETE
REST: Types of Requests
(Read)
(Create)
(Update)
(Delete)

48. #wpsummit @randyhoyt@randyhoyt
•Does it have to
be real time?
•What if something
goes wrong?
API Questions

49. Example #2: ShopLocket

50. [Screenshot of WP]

51. [Screenshot of WordPress]

52. [Screenshot of Product Picker]

53. [Screenshot of Product Picker]

54. [Screenshot of Shortcode]

55. [Screenshot of Website]

56. Authentication

57. OAuth
An open protocol to allow secure
authorization in a simple and standard
method from web, mobile and desktop
applications.
OAuth, http://oauth.net/

58. App ID
5f4a89f2d6655ac7a8859343d6d15257
9410e7b659b200e00aaf3721cf46269e
App Secret
fa963a1ef3702c16d934500f7621697e2
d6bfd05d3ef1751a32bdeb2a0599020

59. [ShopLocket]

60. [ShopLocket Login]

61. [ShopLocket]

62. /? code = 53fe... & state = auth...

63. [GET Request]
$args = array(
"code" => $_GET["code"],
"app_id" => "app id",
"app_secret" => "app secret",
);
$response = wp_remote_post(
'https://www.shoplocket.com/'
. 'oauth/token',
$args
);

64. Token:
310826b20a535a422ccaa46d65c7065f
83e403b9218a38962ab4e43021b93585

65. [Token]

66. #wpsummit @randyhoyt@randyhoyt
•Does it have to
be real time?
•What if something
goes wrong?
API Questions

75. [Refresh Button]

77. WordPress Functions

80. WordPress wp_ajax, http://trhou.se/wp_ajax_hook

82. GET
Request
with
WordPress
HTTP
API
WordPress HTTP API, http://codex.wordpress.org/HTTP_API

84. WordPress update_option, http://trhou.se/update_option

85. Transients?
WordPress, http://codex.wordpress.org/Transients_API

86. TLC Transients
http://github.com/markjaquith/WP-TLC-Transients

87. Integrating WordPress
With Web APIs
Randy Hoyt randyhoyt.com
@randyhoyt
Presentation randyhoyt.com/wpsummit13

88. [Screenshot of Cultivatr]

89. [Screenshot of Edit Screen]

90. [Screenshot of Date Picker]

91. [Diagram]

96. @randyhoyt
•Does it have to
be real time?
•What if something
goes wrong?
API Questions

97. @randyhoyt
• GET
• POST
• PUT
• DELETE
REST: Types of Requests
(Read)
(Create)
(Update)
(Delete)

98. require
'../tmhOAuth.php';
require
'../tmhUtilities.php';
$tw
=
new
tmhOAuth(array(
'consumer_key'
=>
'APP_ID',
'consumer_secret'
=>
'APP_SECRET',
'user_token'
=>
'A_USER_TOKEN',
'user_secret'
=>
'A_USER_SECRET',
));
$code
=
$tw-­‐>request(
'POST',
$tw-­‐>url('1/statuses/update'),
array('status'
=>
'My
Tweet')
);
Twitter Libraries, https://dev.twitter.com/docs/twitter-libraries

99. Integrating WordPress
With Web APIs
Randy Hoyt randyhoyt.com
@randyhoyt
Presentation randyhoyt.com/wpsummit13