Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Isotope,
WP REST API,
and AJAX
oh my!
An example in the wild...
About me:
Name:
Austin Gil
Work:
Visceral (https://thisisvisceral.com)
“We craft brands and experiences for the
world’s le...
Recent Project Using Rest API
Healthy Newborn Network - http://www.healthynewbornnetwork.org/
Process:
1. get_posts() shows initial posts and sets up array of IDs for posts to load.
2. Create gallery markup using Iso...
The toolbox:
Not necessary to know, but helpful for understanding.
Isotope - http://isotope.metafizzy.co/
WP REST API - ht...
get_posts()
Isotope markup
WP REST API
Default location:
/wp-json/wp/v2/posts
https://dev-hnn.thisisvisceral.com/wp-json/wp/v2/posts
Add WP Query fil...
AJAX
Gotchas...
Doesn’t support certain fields
Featured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default. Going to /wp-json/wp/v2/custom-post-type did
not work.
Must be enabled when re...
Why not wp_ajax()...?
So why all the fuss…?
REST API makes it possible to build a separate application and
access data in a WP site.
That means we can build with any ...
Useful Tools:
console.log(allTheThings)
JSON browser extension - Chrome JSONView
https://chrome.google.com/webstore/detail...
Próxima SlideShare
Cargando en…5
×

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

719 visualizaciones

Publicado el

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.

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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

×