Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Isotope, WP REST API, and AJAX...Oh my!

699 views

Published on

Visceral recently launch a project for the Healthy Newborn Network which utilizes the WP REST API to find a load posts on the homepage. This presentation was prepared by lead developer, Austin Gil, for the Advanced WordPress San Diego meetup.

The presentation covers the requirements for the project, the approach, a simplified example of the source code, the challenges faced, and solutions.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Isotope, WP REST API, and AJAX...Oh my!

  1. 1. Isotope, WP REST API, and AJAX oh my! An example in the wild...
  2. 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. 3. Recent Project Using Rest API Healthy Newborn Network - http://www.healthynewbornnetwork.org/
  4. 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. 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. 6. get_posts()
  7. 7. Isotope markup
  8. 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. 9. AJAX
  10. 10. Gotchas...
  11. 11. Doesn’t support certain fields Featured image Author details Advanced Custom Fields
  12. 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)”
  13. 13. Why not wp_ajax()...?
  14. 14. So why all the fuss…?
  15. 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. 16. Useful Tools: console.log(allTheThings) JSON browser extension - Chrome JSONView https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihc kbnefhakgolnmc?hl=en

×