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