Isotope, WP REST API, and AJAX...Oh my!
-
Upload
austin-gil -
Category
Internet
-
view
437 -
download
1
Transcript of Isotope, WP REST API, and AJAX...Oh my!
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
- Isotope WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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
- Isotope WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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
- Isotope WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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
- Isotope WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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
- Isotope WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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 WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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 WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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 WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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 WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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 WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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 WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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 WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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 WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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 WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
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 WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-
Useful Toolsconsolelog(allTheThings)
JSON browser extension - Chrome JSONView httpschromegooglecomwebstoredetailjsonviewchklaanhfefbnpoihckbnefhakgolnmchl=en
- Isotope WP REST API and AJAX oh my
- Slide 2
- Recent Project Using Rest API
- Process
- The toolbox Not necessary to know but helpful for understand
- get_posts()
- Isotope markup
- WP REST API
- AJAX
- Gotchas
- Doesnrsquot support certain fields
- Custom post types
- Why not wp_ajax()
- So why all the fusshellip
- Slide 15
- Useful Tools
-