Upload
austin-gil
View
443
Download
1
Embed Size (px)
Citation preview
Isotope WP REST APIand AJAXoh myAn example in the wild
About meNameAustin Gil
Work Visceral (httpsthisisvisceralcom)ldquoWe craft brands and experiences for the worldrsquos leading causesrdquo
Position Lead Developer
WP Experience 3 years
Recent Project Using Rest API
Healthy Newborn Network - httpwwwhealthynewbornnetworkorg
Process1 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
The toolbox Not necessary to know but helpful for understanding
Isotope - httpisotopemetafizzyco
WP REST API - httpv2wp-apiorg
jQuery AJAX - httpapijquerycomjqueryajax
get_posts()
Isotope markup
WP REST APIDefault location
wp-jsonwpv2posts
httpsdev-hnnthisisvisceralcomwp-jsonwpv2posts
Add WP Query filters such as posts_per_page
filter[posts_per_page]=1
httpsdev-hnnthisisvisceralcomwp-jsonwpv2postsfilter[posts_per_page]=1
AJAX
Gotchas
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
About meNameAustin Gil
Work Visceral (httpsthisisvisceralcom)ldquoWe craft brands and experiences for the worldrsquos leading causesrdquo
Position Lead Developer
WP Experience 3 years
Recent Project Using Rest API
Healthy Newborn Network - httpwwwhealthynewbornnetworkorg
Process1 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
The toolbox Not necessary to know but helpful for understanding
Isotope - httpisotopemetafizzyco
WP REST API - httpv2wp-apiorg
jQuery AJAX - httpapijquerycomjqueryajax
get_posts()
Isotope markup
WP REST APIDefault location
wp-jsonwpv2posts
httpsdev-hnnthisisvisceralcomwp-jsonwpv2posts
Add WP Query filters such as posts_per_page
filter[posts_per_page]=1
httpsdev-hnnthisisvisceralcomwp-jsonwpv2postsfilter[posts_per_page]=1
AJAX
Gotchas
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
Recent Project Using Rest API
Healthy Newborn Network - httpwwwhealthynewbornnetworkorg
Process1 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
The toolbox Not necessary to know but helpful for understanding
Isotope - httpisotopemetafizzyco
WP REST API - httpv2wp-apiorg
jQuery AJAX - httpapijquerycomjqueryajax
get_posts()
Isotope markup
WP REST APIDefault location
wp-jsonwpv2posts
httpsdev-hnnthisisvisceralcomwp-jsonwpv2posts
Add WP Query filters such as posts_per_page
filter[posts_per_page]=1
httpsdev-hnnthisisvisceralcomwp-jsonwpv2postsfilter[posts_per_page]=1
AJAX
Gotchas
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
Process1 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
The toolbox Not necessary to know but helpful for understanding
Isotope - httpisotopemetafizzyco
WP REST API - httpv2wp-apiorg
jQuery AJAX - httpapijquerycomjqueryajax
get_posts()
Isotope markup
WP REST APIDefault location
wp-jsonwpv2posts
httpsdev-hnnthisisvisceralcomwp-jsonwpv2posts
Add WP Query filters such as posts_per_page
filter[posts_per_page]=1
httpsdev-hnnthisisvisceralcomwp-jsonwpv2postsfilter[posts_per_page]=1
AJAX
Gotchas
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
The toolbox Not necessary to know but helpful for understanding
Isotope - httpisotopemetafizzyco
WP REST API - httpv2wp-apiorg
jQuery AJAX - httpapijquerycomjqueryajax
get_posts()
Isotope markup
WP REST APIDefault location
wp-jsonwpv2posts
httpsdev-hnnthisisvisceralcomwp-jsonwpv2posts
Add WP Query filters such as posts_per_page
filter[posts_per_page]=1
httpsdev-hnnthisisvisceralcomwp-jsonwpv2postsfilter[posts_per_page]=1
AJAX
Gotchas
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
get_posts()
Isotope markup
WP REST APIDefault location
wp-jsonwpv2posts
httpsdev-hnnthisisvisceralcomwp-jsonwpv2posts
Add WP Query filters such as posts_per_page
filter[posts_per_page]=1
httpsdev-hnnthisisvisceralcomwp-jsonwpv2postsfilter[posts_per_page]=1
AJAX
Gotchas
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
Isotope markup
WP REST APIDefault location
wp-jsonwpv2posts
httpsdev-hnnthisisvisceralcomwp-jsonwpv2posts
Add WP Query filters such as posts_per_page
filter[posts_per_page]=1
httpsdev-hnnthisisvisceralcomwp-jsonwpv2postsfilter[posts_per_page]=1
AJAX
Gotchas
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
WP REST APIDefault location
wp-jsonwpv2posts
httpsdev-hnnthisisvisceralcomwp-jsonwpv2posts
Add WP Query filters such as posts_per_page
filter[posts_per_page]=1
httpsdev-hnnthisisvisceralcomwp-jsonwpv2postsfilter[posts_per_page]=1
AJAX
Gotchas
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
AJAX
Gotchas
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
Gotchas
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
Doesnrsquot support certain fieldsFeatured image
Author details
Advanced Custom Fields
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
Custom post types
Not supported by default Going to wp-jsonwpv2custom-post-type did not work Must be enabled when registering post types
Apply filters with ldquorest_prepare_(your post type)rdquo
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
Why not wp_ajax()
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
So why all the fusshellip
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
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 HTMLhttplocalhostrestwpindexhtml
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en