![WP REST API
Default location:
/wp-json/wp/v2/posts
https://dev-hnn.thisisvisceral.com/wp-json/wp/v2/posts
Add WP Query filters such as posts_per_page:
?filter[posts_per_page]=1
https://dev-hnn.thisisvisceral.com/wp-json/wp/v2/posts?filter[posts_per_page]=1](https://image.slidesharecdn.com/isotopewprestapiandajaxohmy-160311163415/85/Isotope-WP-REST-API-and-AJAX-Oh-my-8-320.jpg)
Isotope, WP REST API, and AJAX...Oh my!
- 1. Isotope, WP REST API, and AJAX oh my! An example in the wild...
- 2. About me: Name: Austin Gil Work: Visceral (https://thisisvisceral.com) “We craft brands and experiences for the world’s leading causes” Position: Lead Developer WP Experience: 3 years
- 3. Recent Project Using Rest API Healthy Newborn Network - http://www.healthynewbornnetwork.org/
- 4. Process: 1. get_posts() shows initial posts and sets up array of IDs for posts to load. 2. Create gallery markup using Isotope for animations and filters. 3. When a filter is clicked, WP REST API sets up post objects based on IDs 4. AJAX takes the data from the REST API and loads it
- 5. The toolbox: Not necessary to know, but helpful for understanding. Isotope - http://isotope.metafizzy.co/ WP REST API - http://v2.wp-api.org/ jQuery AJAX - http://api.jquery.com/jquery.ajax/
- 6. get_posts()
- 8. WP REST API Default location: /wp-json/wp/v2/posts https://dev-hnn.thisisvisceral.com/wp-json/wp/v2/posts Add WP Query filters such as posts_per_page: ?filter[posts_per_page]=1 https://dev-hnn.thisisvisceral.com/wp-json/wp/v2/posts?filter[posts_per_page]=1
- 9. AJAX
- 10. Gotchas...
- 11. Doesn’t support certain fields Featured image Author details Advanced Custom Fields
- 12. Custom post types Not supported by default. Going to /wp-json/wp/v2/custom-post-type did not work. Must be enabled when registering post types. Apply filters with “rest_prepare_(your post type)”
- 14. So why all the fuss…?
- 15. REST API makes it possible to build a separate application and access data in a WP site. That means we can build with any language: PHP, Ruby, Python, Node, Angular, React.... ...even static HTML http://localhost/restwp/index.html
- 16. Useful Tools: console.log(allTheThings) JSON browser extension - Chrome JSONView https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihc kbnefhakgolnmc?hl=en